如何用Protractor检查元素可见性？解决isDisplayed报错问题

你遇到的这个问题其实挺典型的——isDisplayed()这个方法有个“小脾气”：它必须先找到元素（也就是元素得存在于DOM里）才能检查可见性，如果元素压根儿不在页面上，它直接就会抛出找不到元素的错误，这就是为啥你用它的时候会报错。

而我们说的“元素不可见”其实包含两种情况：要么元素根本不在DOM里，要么元素在DOM里但被隐藏了（比如CSS设了display:none或者visibility:hidden）。下面给你几种靠谱的解决办法：

方法一：用Protractor内置的Expected Conditions（首推！） #

Protractor自带的ExpectedConditions里有个invisibilityOf方法，简直就是为这个场景量身定做的——它会自动处理两种情况：不管元素是不存在，还是存在但不可见，都会返回true，完美匹配你的需求。

代码示例：

const EC = protractor.ExpectedConditions;
// 可以先等待元素变成不可见，超时时间设5秒为例
browser.wait(EC.invisibilityOf(element(by.yourLocator())), 5000);
// 或者直接做断言
expect(EC.invisibilityOf(element(by.yourLocator()))()).toBe(true);

方法二：手动组合isPresent和isDisplayed #

如果你不想用内置的条件，也可以自己手动判断：先检查元素是否存在，存在的话再判断它是否不可见，同时处理元素不存在的情况：

element(by.yourLocator()).isPresent().then(function(isPresent) {
  if (isPresent) {
    // 元素在DOM里，检查是否不可见
    return element(by.yourLocator()).isDisplayed().then(function(isDisplayed) {
      expect(isDisplayed).toBe(false);
    });
  } else {
    // 元素压根儿不存在，这也符合“不可见”的要求呀
    expect(true).toBe(true);
  }
}).catch(function(error) {
  // 万一遇到定位器写错之类的异常，这里可以处理
  expect(true).toBe(false);
});

方法三：用async/await简化代码（现代写法） #

如果你的项目支持ES6+的async/await，代码能写得更清爽：

async function checkElementIsInvisible() {
  const isPresent = await element(by.yourLocator()).isPresent();
  if (isPresent) {
    const isDisplayed = await element(by.yourLocator()).isDisplayed();
    expect(isDisplayed).toBe(false);
  } else {
    // 元素不存在，满足“不可见”的条件
    expect(true).toBe(true);
  }
}

checkElementIsInvisible();

总的来说，最推荐第一种方法，毕竟是官方专门提供的工具，代码简洁还不容易出错，省得自己写一堆判断逻辑~

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