要素がテキストと一致するのを待つ組み込みメソッドがありますか？

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')

は、この特定のセレクタが動作しない場合がありますが、私の避難所としてそれがテストされていないときereはそこに子セレクタです。

I've got videos covering both詳細については、こちらをご覧ください。