Question

我们通常通过转到某个页面来测试我们的SPA，执行保存值的操作，然后检查是否正在显示新值。由于所有内容都是异步更新，这意味着新值可能需要一些时间才能显示。因此，前一个值可以暂停一段时间，或者我们检查文本的元素可能尚不存在。

到目前为止，我们想要“检查最终使用此选择器的元素是否包含此文本”时，我们想出了什么“：

// we need to wait for the text, because the result is async updated
// - the previous result might linger around for some time, or 
// the element might not even exist, failing the `getText()` call

const selector = '.feed-item div:nth-child(2) div:nth-child(2)';
browser.waitForText(selector);
browser.waitUntil(() => browser.getText(selector) === 'Temp: 20');

这很有效，但它有点夸张，并且不包含它会感觉很奇怪，因为在所有客户端呈现的应用程序中这似乎是很自然的事情。

使用WebDriver.io是否有更好的模式，最好一次性执行此操作？我试过的所有1行变量要么在错误的元素上断言，要么由于没找到而导致失败（因为结果尚未到来）。

Answer 1

您可以尝试两件事：

添加a custom command：

browser.addCommand('waitForContent', function (selector, text) {
    browser.waitForText(selector);
    browser.waitUntil(() => browser.getText(selector) === text);
})

browser.waitForContent('.feed-item div:nth-child(2) div:nth-child(2)', 'Temp: 20')

使用a text-based selector：

browser.waitForExist('.feed-item div:nth-child(2) div:nth-child(2)*=Temp: 20')

这个特定的选择器可能不起作用，因为当那里有子选择器时我还没有测试它。

I've got videos covering both如果您对更多细节感兴趣。

是否有内置方法等待元素匹配某些文本？

1 个答案: