似乎无法绕过此错误 - “元素不可交互”答案

【问题标题】：Can't seem to be able to bypass this error - "element not interactable"似乎无法绕过此错误 - “元素不可交互”
【发布时间】：2021-12-01 04:05:25
【问题描述】：

所以我想做的就是通过 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);
  }
}

我相信我将 mocha 用于测试结构和记者（规格和魅力），如果我有什么错误，请纠正我。

我是自动化 Web 测试方面的新手，有人可以帮助我吗？

【问题讨论】：

标签： javascript node.js automated-tests webdriver-io web-testing

【解决方案1】：

有几件事可能会导致这种情况：

页面有一个弹出的cookie“模态”窗口。这种模式可以阻止文本输入到登录表单，这就是“元素不可交互”消息的来源。如果是这种情况，您可能还会看到一条附加消息，说明另一个元素收到了点击。
登录页面通过 JavaScript API 调用加载内容。 WebdriverIO/Selenium 很适合等待正常的页面加载，但是当您通过 JavaScript 加载内容时，它不知道等待。您确实有username.waitForClickable(); 电话，但我认为他们可能需要await username.waitForClickable(); 才能工作。

【讨论】：

我没有放在那里，但我确实有一个函数可以绕过在之前调用的 cookie 弹出窗口：await LoginPage.login("emailtest@test.com", process.env.PASSWORD); 它成功地完成了它的工作，我将尝试放置在 username.waitForClickable(); 上等待
似乎无法弄清楚如何将 async 和 await 放在这些 get 方法上，它给了我错误，甚至不打开 chrome

【解决方案2】：

看起来waitForClickable 在这种情况下不起作用。你能把它移到异步函数吗？

根据您的代码：

get inputUsername() {
  return $("#username");
}

async login(username, password) {
  await this.inputUsername.waitForClickable();
  await this.inputUsername.setValue(username);
  ...
}

wait... 和 set... 可以移动到 wdio.conf 中的 browser.addCommand() 以获得更简洁的代码。

【讨论】：

【解决方案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

)}

【讨论】：