Lately, I've been working on streamlining my Protractor e2e tests using the Page Object model for better reusability. Each Page Object typically starts with defining elements on that page followed by local functions. Here's an example:
'use strict';
var examplePage = function() {
// Locators
this.button1 = $('#button1')
this.element1 = $('#element1');
this.element2 = $('.element2');
// Error Messages
this.ERROR_ONE = 'There was an error!';
// Protractor ExpectedConditions instance
var until = protractor.ExpectedConditions;
this.doSomeStuff = function() {
this.button1.click().then(function() {
browser.wait(until.visibilityOf(this.element1), global.TIMEOUT_INTERVAL_SHORT, this.ERROR_ONE);
return this.element1;
});
};
};
module.exports = examplePage;
The code above serves as a simple illustration, but my actual code closely resembles it.
Sometimes, I face challenges in controlling the order of function execution to prevent premature execution. However, this creates a restricted scope inside the .then statement. For instance, 'this.ERROR_ONE' property becomes inaccessible, making it hard to maintain consistency across my Page Objects.
Has anyone else encountered this issue and found a solution? It can get cumbersome keeping track of the same values across multiple Page Objects.