#javascript #node.js #automated-tests #webdriver-io #web-testing
Вопрос:
Поэтому все, что я хочу сделать, это автоматизировать вход в систему через WebdriverIO.
Это класс LoginPage, в котором возникает ошибка, функция входа в систему — «элемент, с которым невозможно взаимодействовать».
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
}
}
Параметры функции входа в систему определяются ее вызовом в тестовом файле.
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);
}
}
Я считаю, что использую мокко для структуры теста и для репортеров (спецификации и привлекательности), поправьте меня, если я в чем-то ошибаюсь.
Я немного новичок в автоматизированном веб-тестировании, может ли кто-нибудь помочь мне в этом?
Ответ №1:
Есть пара вещей, которые могут быть причиной этого:
- На странице есть «модальное» окно cookie, которое появляется. Этот модальный способ может блокировать ввод текста в форму входа в систему, из-за чего появляется сообщение «элемент не доступен для взаимодействия». Если это так, вы также, вероятно, увидите дополнительное сообщение о том, что другой элемент получил щелчок.
- Страница входа загружает содержимое с помощью вызовов JavaScript API. WebdriverIO/Selenium хорошо подходит для ожидания нормальной загрузки страниц, но когда вы загружаете контент с помощью JavaScript, он не знает, чего ждать. У вас действительно есть
username.waitForClickable();
звонки, но я думаю, что они могут понадобитьсяawait username.waitForClickable();
для работы.
Комментарии:
1. Я не ставил туда, но у меня есть функция, которая обходит всплывающее окно cookie, вызываемое перед:
await LoginPage.login("emailtest@test.com", process.env.PASSWORD);
, Которое успешно выполняет свою работу, я попробую поставить ожидание на имя пользователя.waitForClickable();2. Похоже, я не могу понять, как я могу включить асинхронность и ожидание в этих методах get, это приводит к ошибкам и даже не открывает chrome
Ответ №2:
Похоже waitForClickable
, в данном случае это не работает. Не могли бы вы переместить его в асинхронную функцию?
На основе вашего кода:
get inputUsername() {
return $("#username");
}
async login(username, password) {
await this.inputUsername.waitForClickable();
await this.inputUsername.setValue(username);
...
}
wait...
и set...
может быть перенесен browser.addCommand()
в файл wdio.conf, чтобы получить более чистый код.
Ответ №3:
Попробуй это:
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();
}
}
Я бы рекомендовал написать даже метод для заполнения входных данных:
async fillLoginName(loginname){
await this.inputUsername.waitForExist();
await this.inputUsername.clearValue();
await this.inputUsername.setValue(loginname);
}
и вы позвонили только в своем тесте, как:
it("should successfully login", async () => {
await Loginpage.fillLoginName("emailtest@test.com");
// do the rest for password field and click login button
)}