I'm using the last version of nightwatch I had some issues when a Page Object can have another Page Object as 'field'.
I develop PageObjects for the header, footer and for html elements related for a login action as below:
menu.js
var commands = {
// commands for the menu
}
module.exports = {
elements: {
// menu html elements selectors, i.e.
someElementInHeader : '.cssSelector'
},
commands: [commands]
}
footer.js
module.exports = {
elements: {
// footer html elements selectors
}
}
But I need to embed these two Page Objects in a third Page Object, as example, a login page that contains the same menu and the same footer.
loginPage.js
// import the menu and footer js some way
module.exports = {
url: function() {
// get the url from configuration
return this.api....
}
// should have the elements from menu and footer, along with this page elements
elements: { ... },
// should contain the commands from menu and some commands from the page itself
commands: [{ ... }]
}
I tried to use a constructor for the loginPage Page Object, but it's not working.
Now I'm using this approach for the loginPage.js, but I don't think that is the better one:
// the header.js is a Page Object for nightwatch because it's located on the page objects path
const header = require('../common/header.js');
/**
* commands related to this page
*/
let _commands = [];
// add comands from dependencies
_commands = _commands.concat(header.commands);
/**
* elements related to this page
*/
let _elements = {};
// add elements from dependencies
Object.assign(_elements, header.elements);
/**
* page object configuration
*/
module.exports = {
url: function() {
return this.api.globals.baseUrl + '/login';
},
elements: _elements,
commands: _commands
};
And this is an example for tests (simplelogin.spec.js):
var customer = null;
module.exports = {
// set tests parameters
before : function (browser) {
var loginPage = browser.page.pages.loginPage();
browser
.useCss()
.pause(1000);
customer = loginPage.navigate();
},
// check for a basic element in header is present because it's needed
'a basic element should be present' : function (browser) {
customer.expect.element('@someElementInHeader').to.be.present;
},
after : function (browser) {
browser.end();
}
}
Even though I'm reusing the code for the the header, I didn't like the design and the readibility of the code for the loginPage.js... also, if a lot of page objects is needed in this page object for further testing, it will became very verbose.
Any ideas?
let menu = this.page.menuPage();
Seems like it should work but like I said I haven't tried it. – tehbeardedone Feb 6 '18 at 22:38this.api.page.pageName()
. So, it looks like you can just dolet menu = this.api.page.menu();
inside one of your command functions and then you can access the functions from the menu page object inside the login page. – tehbeardedone Feb 6 '18 at 22:50