在等待元素可见性时如何避免冗余调用

Question

我目前有一个使用 WebdriverIO 的测试脚本，它点击一个按钮并等待弹出窗口显示。测试的目的是确保元素在单击后显示，但由于它是异步的，我必须等到它显示出来。

但是，如果我等到元素显示，如果 waitForVisible 成功，我的断言将始终通过。如果不成功，它总是会在 waitForVisible 命令上抛出异常，并且断言永远不会执行。

下面是代码示例：

browser.click(btnElement)
browser.waitForVisible(popupElement)
expect(browser.isVisible(popupElement)).to.be.true

是否有不同的方法来告诉期望语句重试/等待直到元素可见，这样断言就没有用了？

Answer 1

您似乎混淆了 assertions 的用途，或者滥用了它们，特别是在您的示例中。仅当您有事物（WebElement、text、attribute 元素等）要验证的确定性时，您才应该使用断言包含预期的值类型（您将其返回到您的assert 或expect 语句以进行最终验证=> 输出是所需的值）。

断言验证 static 值，它们不会轮询 DOM。这就是为什么您拥有.waitForVisible()、waitForText() 或更重要的.waitUntil()（提供更大的灵活性）之类的工具的原因。

诚然，ChaiJS 提供的 expect 断言样式可能有一个令人困惑的词汇（expect 可能会断章取义：它期望 WebElement 是可见的）。只需使用它们来验证不同命令的输出，而不是 WebElements 的状态或其他动态/变化的元素。

---

话虽如此，作为最佳实践，您应该始终将您的命令（例如：.click()）包装到.waitUntil() 块中并确保@ 987654339@ 已准备好执行您即将执行的操作：

• 是不是被前端逻辑渲染到了DOM中？ （使用.isExisting()）
• 在 DOM 中是否可见？ （您*不能点击viewport中不可见的元素）
• 它是否可点击？ （或您想要对其执行的其他操作...）

最后，一个惯用的动作（在我们的例子中是.click()）应该是这样的：

browser.waitUntil(() => {
    browser.isExisting(locator);
}, timeout, "Oups! An error occured.\nReason: element ('" + locator + "') does not exist");
browser.waitUntil(() => {
    browser.isVisible(locator);
}, timeout, "Oups! An error occured.\nReason: element ('" + locator + "') is not visible");
browser.waitUntil(() => {
    browser.click(locator);
}, timeout, "Oups! An error occured.\nReason: element ('" + locator + "') could not be clicked");

您可以将整个内容封装到 custom-command 中，然后根据需要使用它。告别片状测试！ :)

* Selenium 是一个以用户为中心的网络自动化工具，因此所有操作都像用户一样执行（用户不能点击不可见的元素，用户不能同时点击多个元素，或者通过输入整个单词或整个段落等来填写input字段）

Answer 2

我不知道 WebdriverIO，但我认为它类似于 try-catch。将您的等待包裹在try-catch 中。如果成功，Assert.pass() 或等效项。如果超时，将引发异常，因此在您的 catch 中为超时设置 Assert.fail() 或等效项。

---

我从未使用过 ChaiJS，但我确实查看了 the documentation 并发现了一些你应该可以使用的东西。

assert.isOk(false, 'this will fail');

这是来自文档，应该与我熟悉的 Assert.Fail() 相同。有人会假设以下稍作调整将等同于Assert.Pass()，

assert.isOk(true, 'this will pass?');

如果由于某种原因这不起作用，您可以使用文档中的以下内容。

assert.isNotOk(false, 'this will pass');