如何手动使用Protractor的ExpectedCondition？关于EC.visibilityOf的疑问

作为刚上手Protractor的新手，我完全理解你对官方文档晦涩描述的困惑！咱们把EC.visibilityOf的用法和返回值拆解开讲清楚：

首先，EC.visibilityOf的返回值是什么？ #

EC.visibilityOf(targetElement) 返回的是一个预期条件函数——简单说，这是一个可以被执行的函数，当你调用它时，它会返回一个 Promise<boolean>：

• 如果目标元素存在于DOM中，并且可见（同时满足displayed不为none、元素的宽高都大于0），Promise最终会解析为 true
• 如果元素不存在，或者存在但不可见，Promise会解析为 false

官方文档之所以写得绕，是因为EC（Expected Conditions）最初是为browser.wait()设计的——browser.wait()会反复调用这个返回的函数，直到它返回true或者超时。

怎么用它写你想要的断言？ #

你想要的expect(elementIsVisible).toBe(true);风格的断言，其实有几种简洁的写法：

写法1：直接在expect中使用EC.visibilityOf #

Protractor的expect可以自动处理Promise，所以你可以直接把EC.visibilityOf的结果传进去：

expect(EC.visibilityOf($('#your-target-element'))).toBe(true);

这里要注意：这种写法会立即检查元素状态，如果元素还没加载出来，断言会直接失败，不会等待。

写法2：结合browser.wait等待元素可见后再断言 #

如果你需要等待元素变为可见（比如页面加载需要时间），可以先调用browser.wait()等待EC条件满足，再做断言：

// 等待元素可见，超时时间设为5秒，超时后会抛出指定错误信息
await browser.wait(EC.visibilityOf($('#your-target-element')), 5000, '元素超过5秒仍未可见');
// 此时元素已经可见，再用isDisplayed()做断言（更直观）
expect(await $('#your-target-element').isDisplayed()).toBe(true);

写法3：直接用元素的isDisplayed()方法 #

其实你也可以跳过EC，直接用元素本身的isDisplayed()方法，它的判断逻辑和EC.visibilityOf是一致的，同样返回Promise：

expect(await $('#your-target-element').isDisplayed()).toBe(true);

小总结 #

• EC.visibilityOf返回的是一个可执行的函数，执行后给你一个布尔值Promise
• 直接用在expect里适合快速检查元素当前状态
• 结合browser.wait适合需要等待元素加载的场景
• 用element.isDisplayed()是更直观的可见性断言方式

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