WebdriverIO登录自动化出现element not interactable错误如何解决

• 核心错误：get 访问器中调用的waitForClickable()是异步方法，未添加await关键字，代码不会等待元素达到可点击状态就直接返回元素对象，此时元素还未完成加载/渲染，调用setValue自然会抛出不可交互错误。
• 其他可能原因：
  • 页面存在加载遮罩、cookie提示、弹窗等元素遮挡住输入框，即使输入框已加载完成也无法接收操作
  • 选择器匹配到了DOM中多个隐藏的同规则元素，默认返回的第一个元素不可见
  • 输入框初始处于disabled禁用状态，需要等接口请求完成后才会解禁，未等状态更新就执行操作

1. 修复异步等待逻辑 #

ES6的get访问器本身不支持异步等待逻辑，因此需要将等待操作转移到login方法内，主动添加await等待元素状态符合要求后再执行操作，修改后的LoginPage代码如下：

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({ timeout: 5000 });
    await this.inputUsername.setValue(username);
    await this.inputPassword.waitForClickable({ timeout: 5000 });
    await this.inputPassword.setValue(password);
    await this.btnSubmit.waitForClickable({ timeout: 5000 });
    await this.btnSubmit.click();
  }

}

2. 排查页面遮挡元素 #

修改代码后如果仍报错，可在页面加载完成后添加截图逻辑，确认是否有遮挡元素：

await LoginPage.open();
// 保存截图到本地排查页面状态
await browser.saveScreenshot('./login-page-load.png');

如果存在弹窗、遮罩，新增逻辑关闭遮挡元素后再执行登录操作即可。

3. 校验选择器唯一性 #

打开浏览器控制台，分别执行以下代码确认选择器匹配的元素是否为目标可交互输入框：

• 校验用户名输入框：document.querySelector('#username')
• 校验密码输入框：document.querySelector('#current-password')
  如果匹配到多个元素，可优化选择器（比如增加父元素限定范围）保证定位到唯一的可见元素。

4. 兜底兼容处理 #

如果元素不在可视区域内导致不可交互，可先调用scrollIntoView将元素滚动到视口内再操作：

await this.inputUsername.scrollIntoView();
await this.inputUsername.setValue(username);

内容的提问来源于stack exchange，提问作者NeonSilver