使用isDisplayed()检查元素可见性时触发找不到元素错误的原因咨询

这个问题我之前也碰到过，核心原因是你对Protractor里isDisplayed()的行为理解有偏差：

• 当元素已经存在于DOM中，但被CSS隐藏（比如display: none、visibility: hidden这类情况），isDisplayed()会返回false，这时候你的代码会正常进入else分支。
• 但如果元素完全不在DOM里，element(by.id('button--copy'))本身就会触发Protractor的元素查找超时，直接抛出No element found的错误，导致isDisplayed()根本没机会执行，程序自然就终止了，走不到你写的then回调里。

解决方法 #

你需要先判断元素是否存在于DOM中，再去检查它的可见性，这里有两种常用的实现方式：

方法1：用element.all().count()判断元素是否存在 #

element.all()配合count()不会因为找不到元素报错，找不到就返回0，很适合用来做前置判断：

element.all(by.id('button--copy')).count().then(function(count) {
  if (count > 0) {
    // 元素存在，再检查可见性
    element(by.id('button--copy')).isDisplayed().then(function(isVisible) {
      if (isVisible) {
        // 元素可见时的操作
        console.log("按钮可见，执行对应逻辑");
      } else {
        // 元素存在但不可见时的操作
        console.log("按钮存在但不可见");
      }
    });
  } else {
    // 元素不存在，对应你预期的"不可见"场景
    console.log("按钮不存在，视为不可见");
  }
});

方法2：用isPresent()做前置判断 #

isPresent()专门用来判断元素是否在DOM中存在，不存在时返回false而不是报错，结合它可以把逻辑整合得更简洁：

element(by.id('button--copy')).isPresent().then(function(isPresent) {
  if (isPresent) {
    // 元素存在，返回可见性状态
    return element(by.id('button--copy')).isDisplayed();
  } else {
    // 元素不存在，直接返回false（视为不可见）
    return false;
  }
}).then(function(isVisible) {
  if (isVisible) {
    // 可见时的操作
  } else {
    // 不可见（或不存在）时的操作
  }
});

简单总结一下：你原来的代码只处理了「元素存在但不可见」的情况，但没考虑「元素根本不存在」的场景，这就是程序直接报错终止的原因。

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