Nightwatch: Separate xpath into another files - testing

Question

How to separate xpath into separate file and use it in nightwatch automation testing?
EDIT:
I running a page object pattern example and found some errors.
Errors: TypeError: browser.page.url is not a function
Please help on this.
module.exports = {
url: 'http://localhost:63916/Login/Login',
elements: {
username: {
selector: '//*[#id="inputName"]',
locateStrategy: 'xpath'
}
}
};
module.exports = (function(settings) {
settings.test_workers = false;
return settings;
})(require('./nightwatch.json'));
//const data = require('./data.js')
module.exports = {
'Login' : function (browser) {
var page = browser.page.url();
page.navigate()
.setValue('#username', 'peter')
browser.end()
}
};

Answer 1

So assuming the page object is defined in pages directory. You need to change your nightwatch.conf.js like below
nightwatch.conf.js
module.exports = (function(settings) {
settings.test_workers = false;
settings.page_objects_path = "./pages";
return settings;
})(require('./nightwatch.json'));
Your pages has a file named main.js
pages/main.js
module.exports = {
url: 'https://gmail.com',
elements: {
username: {
selector: '//*[#id="identifierId"]',
locateStrategy: 'xpath'
},
next: {
selector: '#identifierNext span',
locateStrategy: 'css'
}
}
};
And then you test is like below
tests/test.main.js
module.exports = {
'Login' : function (browser) {
var page = browser.page.main();
page.navigate()
.setValue('#username', 'peterlalwani')
.click('#next')
.waitForElementNotPresent("#username", 10000);
browser.saveScreenshot("./so.png")
browser.end()
}
};
Now when you run it, it creates a so.png
I created a sample repo for you to clone and see the above
https://github.com/tarunlalwani/nightwatch-page-object-so.git
PS: It is important to note that var page = browser.page.main(); means it would load main.js from the pages folder here.