Protractor中点击元素后仍抛出‘元素不可见’错误的原因排查

你遇到的问题核心在于错误地使用了element.all()来定位单个按钮，以及element.all()的方法行为和单个元素element()的行为差异导致的。

具体来说：

1. element.all(by.className('modal-button-no'))返回的是ElementArrayFinder（元素数组定位器），而非单个元素。当你调用isDisplayed()时，它实际检查的是数组中第一个元素是否可见；但调用click()时，element.all()会尝试点击数组中所有匹配的元素。
2. 当你点击第一个按钮后，弹窗被关闭，此时数组中后续的“元素”（实际已不存在）自然不可见，所以Protractor会抛出element not visible的错误——哪怕第一个按钮已经被成功点击。

1. 改用单个元素定位器 #

既然这个恢复表单的按钮是唯一的，直接用element()代替element.all()：

let DoNotRefillBtn = element(by.className('modal-button-no'));

2. 优化元素可见性判断逻辑 #

你的isApproachable函数可以简化，同时推荐使用Protractor内置的ExpectedConditions来处理元素可见性，比手动判断更可靠（它会自动等待元素状态变化，避免硬等待的不稳定）：

const EC = protractor.ExpectedConditions;

// 封装更可靠的可见性检查函数
var isElementVisible = function(element) {
  return browser.wait(EC.visibilityOf(element), 3000).then(
    () => true,
    () => false
  );
};

3. 调整测试用例代码 #

把硬等待替换成逻辑判断，同时确保点击操作只针对存在且可见的元素：

describe('Form Test', function () {
  it('Open the form and handle refill prompt', function () {
    browser.driver.get('foo');
    
    isElementVisible(DoNotRefillBtn).then(function(visible) {
      if (visible) {
        DoNotRefillBtn.click();
        // 等待弹窗关闭，用EC.invisibilityOf代替sleep更稳定
        browser.wait(EC.invisibilityOf(DoNotRefillBtn), 2000);
      }
      // 无需else分支的sleep，直接继续后续操作即可
    });
    
    // 后续的表单操作...
  });
});

补充说明 #

• 尽量避免使用browser.sleep()这类硬等待，它会让测试变得不稳定（不同环境加载速度不同），优先使用ExpectedConditions系列方法等待元素状态变化。
• 如果按钮的className不是唯一的，建议改用更精准的定位方式（比如by.css('.modal .modal-button-no')），确保只定位到目标按钮。

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