So all I want to do is automate a login through WebdriverIO.
This is the LoginPage class where the error occurs, login function - "element not interactable"
class LoginPage {
get inputUsername() {
const username = $("#username");
username.waitForClickable();
return username;
}
get inputPassword() {
const password = $("#current-password");
password.waitForClickable();
return password;
}
get btnSubmit() {
const submitButton = $(".button.button--primary.button--l");
submitButton.waitForClickable();
return submitButton;
}
async login(username, password) {
await this.inputUsername.setValue(username); //<--Throws error
await this.inputPassword.setValue(password); //<--Throws error
await this.btnSubmit.click(); //<--Not sure if throws error
}
}
The parameters from the login function come from the call of it on the test file.
describe("login", () => {
it("should successfully login", async () => {
await browser.maximizeWindow();
await LoginPage.open(); //<--Opens the login page on the browser
await LoginPage.login(
"emailtest@test.com",
process.env.PASSWORD
);
await expect(browser).toHaveUrl(process.env.CLIENT_AREA_URL);
}
}
I believe I'm using mocha for the test structure and for the reporters (spec and allure), correct me if I'm wrong in something.
I'm kinda new in Automated Web Testing, can someone help me on this?
It looks like waitForClickable doesn't work in this case. Could you move it to the async function?
Based on your code:
get inputUsername() {
return $("#username");
}
async login(username, password) {
await this.inputUsername.waitForClickable();
await this.inputUsername.setValue(username);
...
}
wait... and set... can be moved to browser.addCommand() in wdio.conf to have a cleaner code.
Try this:
class LoginPage {
get inputUsername() { return $("#username");
get inputPassword() {return $("#current-password");
get btnSubmit() {return $(".button.button--primary.button--l");
async login(username, password) {
await this.inputUsername.waitForClickable();
await this.inputUsername.setValue(username);
await this.password.waitForClickable();
await this.inputPassword.setValue(password);
await this.submitButton.waitForClickable();
await this.submitButton.click();
}
}
I would recommend to write even a method to fill the input:
async fillLoginName(loginname){
await this.inputUsername.waitForExist();
await this.inputUsername.clearValue();
await this.inputUsername.setValue(loginname);
}
and you called just in your test as:
it("should successfully login", async () => {
await Loginpage.fillLoginName("emailtest@test.com");
// do the rest for password field and click login button
)}
There are a couple things that could be causing this:
username.waitForClickable(); calls, but I think they might need to be await username.waitForClickable();to work.