Protractor element handling -

i have question regarding how protractor handles locating of elements. using page-objects did in webdriver. big difference webdriver locating element happens when function called on element.

when using page-objects, advised instantiate objects before tests. wondering, if instantiate object , page changes, happens state of elements?

i shall demonstrate example

  it('change service', function() {       servicepage.clickchangeservice();       serviceform.selectservice(1);       serviceform.save();        expect(servicepage.getservice()).tomatch('\bno service\b');   }); 

when debugging servicepage.getservice() returns undefined. because serviceform page , state of servicepage has been changed?

this pageobject:

var servicepage = function() {    this.changeservicelink = element(by.id('servicelink'));    this.service = element(by.id('service'));    this.clickchangeservice = function() {      this.changeservicelink.click();    };  this.getservice = function() {    return this.service.getattribute('value');  };  };  module.exports = servicepage; 

thank in advance. regards

essentially, element() 'elementfinder' doesn't work unless call action getattribute().

so can think of element(by.id('service')) placeholder.

when want find element , action, combine element(by.id('service')).getattribute('value'), in isn't value looking for, it's promise value. can read how deal promises elsewhere.

the other thing protractor patch in waitforangular() when applies action wait outstanding http calls , timeouts before going out find element , apply action. when call .getattribute() looks like

return browser.waitforangular().then(function() {      return element(by.id('service')).getattribute('value');  }); 

so, in example, if angular pages aren't set correctly or depending on controls using, might trying value before page has settled new value in element.

to debug example should doing like

it('change service', function() {     servicepage.getservice().then(function(originalservice) {         console.log('originalservice: ' + originalservice);     });      servicepage.clickchangeservice();     serviceform.selectservice(1);     serviceform.save();      servicepage.getservice().then(function(newservice) {         console.log('newservice: ' + newservice);     });      expect(servicepage.getservice()).tomatch('\bno service\b'); }); 

the other thing i'm seeing pageobject appears constructor when use object instead:

// name file servicepage.js, , use 'var servicepage = require('./servicepage.js');' module.exports = {     changeservicelink: element(by.id('servicelink')),      service: element(by.id('service')),      clickchangeservice: function() {          this.changeservicelink.click();      },      getservice: function() {          return this.service.getattribute('value');      }   }; 

otherwise have module.exports = new servicepage(); or instantiate in test file.