Похоже, я не могу обойти эту ошибку — «элемент не может взаимодействовать».

#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

)}