Protractor中elementToBeClickable检测通过但元素点击失败问题求助

核心原因 #

Protractor 内置的 elementToBeClickable 仅校验元素可见且未被禁用，不会校验元素实际宽高是否大于 0。动态渲染的元素刚插入 DOM 时样式计算可能滞后，此时宽高为 0 但已经满足 elementToBeClickable 的判断条件，就会触发对应报错。如果选择器命中了页面上隐藏的同属性输入框，也会出现该问题。

解决方案 #

1. 新增自定义元素尺寸校验等待条件 #

在调用交互逻辑前，新增等待元素宽高大于0的自定义判断，替换原有的elementToBeClickable判断：

// 全局复用的自定义等待条件：元素可见且宽高均大于0
const elementHasValidSize = (elem) => {
  return protractor.ExpectedConditions.and(
    protractor.ExpectedConditions.visibilityOf(elem),
    () => elem.getSize().then(size => size.width > 0 && size.height > 0)
  )
}

// 业务代码中调用
async fillEmail() {
  const newEmail = CommonMethods.createRandomEmail();
  const emailElement = element(by.css('.block-info input[name="email"]'));
  // 替换原有等待逻辑，超时时间可根据实际情况调整
  await browser.wait(elementHasValidSize(emailElement), 10000, '邮箱输入框始终未获得有效尺寸');
  await CommonMethods.fillInput(emailElement, newEmail);
  return newEmail;
}

2. 优化通用填充方法，增加降级兼容逻辑 #

部分场景下自定义样式可能会隐藏原生 input（比如自定义输入组件把原生input设为透明、0尺寸，实际可交互区域是父容器），可以在通用方法中增加降级处理，兼容这类场景：

static async fillInput(el, text = this.randomString()) {
  await browser.wait(() => el.getSize().then(s => s.width > 0 && s.height > 0), 5000);
  try {
    // 优先走原生模拟用户操作逻辑
    await el.click();
    await el.clear();
    await el.sendKeys(text);
  } catch (e) {
    // 交互失败时降级为JS操作，主动触发input/change事件保证业务逻辑正常触发
    await browser.executeScript(`
      const inputEl = arguments[0];
      inputEl.value = arguments[1];
      inputEl.dispatchEvent(new Event('input'));
      inputEl.dispatchEvent(new Event('change'));
    `, el.getWebElement(), text);
  }
}

3. 排查选择器是否命中隐藏元素 #

如果上述方案无效，可以先打印当前定位元素的可见状态排查定位问题：

console.log(await emailElement.isDisplayed())

如果返回false说明当前选择器命中了页面上隐藏的输入框，需要优化选择器，增加更精确的父元素限定条件，避免匹配到隐藏元素。

4. 关闭测试环境CSS动画 #

如果元素有入场过渡动画，动画未结束时元素宽高也可能为0，可以在测试用例初始化时统一关闭页面CSS动画，避免等待动画导致的异常：

await browser.executeScript(`
  const style = document.createElement('style');
  style.innerHTML = '* { transition: none !important; animation: none !important; }';
  document.head.appendChild(style);
`)

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