While working on a webdriver.io automation project, I encountered an issue with recognizing objects in my page object file (login.po.js) when calling them in the test spec file (test.spec.js). The error message displayed is
LoginPage.username.setValue is not a functionHere is the code snippet from my files:
login.po.js
var LoginPage = {
username: { get: function () { return $('#email'); } },
password: { get: function () { return $('#password'); } },
form: { get: function () { return $('#login'); } },
flash: { get: function () { return $('#flash'); } },
submit: { value: function() {
this.form.click();
} }
};
module.exports = LoginPage;
test.spec.js
var LoginPage = require('../page/login.po');
const userObj = {
user: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="463335233428272b2306232b272f2a6825292b">[email protected]</a>',
password: 'password',
}
var assert = require('assert');
describe('login form', () => {
it('should deny access with wrong creds', function () {
LoginPage.username.setValue('username');
LoginPage.password.setValue('password');
LoginPage.submit();
browser.pause(5000);
expect(LoginPage.flash.getText()).to.contain('Your username is invalid!');
});
it('should allow access with correct creds', function () {
LoginPage.username.setValue(userObj.user);
LoginPage.password.setValue(userObj.password);
LoginPage.submit();
browser.pause(5000);
expect(LoginPage.flash.getText()).to.contain('You logged into a secure area!');
});
});
The errors that occurred during execution are shown below:
1) login form should deny access with wrong creds
LoginPage.username.setValue is not a function
TypeError: LoginPage.username.setValue is not a function
at Context.<anonymous> (D:\MyTest00\specs\test.spec.js:31:28)
at Context.executeSync (D:\MyTest00\node_modules\@wdio\sync\build\index.js:56:18)
at D:\MyTest00\node_modules\@wdio\sync\build\index.js:82:70
2) login form should allow access with correct creds
LoginPage.username.setValue is not a function
TypeError: LoginPage.username.setValue is not a function
at Context.<anonymous> (D:\MyTest00\specs\test.spec.js:45:28)
at Context.executeSync (D:\MyTest00\node_modules\@wdio\sync\build\index.js:56:18)
at D:\MyTest00\node_modules\@wdio\sync\build\index.js:82:70
I would appreciate any assistance in resolving this issue. Additionally, if you notice any other problems in my code, please feel free to suggest corrections. Thank you!
When I changed the last line of code in login.po.js to:
exports.LoginPage = LoginPage;
An error was displayed:
1) login form should deny access with wrong creds
Cannot read property 'setValue' of undefined
TypeError: Cannot read property 'setValue' of undefined
at Context.<anonymous> (D:\MyTest00\specs\test.spec.js:20:28)
at Context.executeSync (D:\MyTest00\node_modules\@wdio\sync\build\index.js:56:18)
at D:\MyTest00\node_modules\@wdio\sync\build\index.js:82:70
2) login form should allow access with correct creds
Cannot read property 'setValue' of undefined
TypeError: Cannot read property 'setValue' of undefined
at Context.<anonymous> (D:\MyTest00\specs\test.spec.js:28:28)
at Context.executeSync (D:\MyTest00\node_modules\@wdio\sync\build\index.js:56:18)
at D:\MyTest00\node_modules\@wdio\sync\build\index.js:82:70
Even after editing the first line of code in test.spec.js to:
var LoginPage = require('../page/login.po').LoginPage
The same error persisted:
1) login form should deny access with wrong creds
LoginPage.username.setValue is not a function
TypeError: LoginPage.username.setValue is not a function
at Context.<anonymous> (D:\MyTest00\specs\test.spec.js:31:28)
at Context.executeSync (D:\MyTest00\node_modules\@wdio\sync\build\index.js:56:18)
at D:\MyTest00\node_modules\@wdio\sync\build\index.js:82:70
2) login form should allow access with correct creds
LoginPage.username.setValue is not a function
TypeError: LoginPage.username.setValue is not a function
at Context.<anonymous> (D:\MyTest00\specs\test.spec.js:45:28)
at Context.executeSync (D:\MyTest00\node_modules\@wdio\sync\build\index.js:56:18)
at D:\MyTest00\node_modules\@wdio\sync\build\index.js:82:70
You can find the full code for this project on GitHub at:
github.com/seanray7/pageobject-webdriverio