Playwrightでselect要素の変更を待つ

テスト対象のページでselect要素が以下のような動作をしているときに、どうやって3を待てばいいのか途方に暮れました。

動作	画面
1. 空の<select>が表示される
2. <option>が追加される
3. optionが選択される

※1,2はあまり関係ないです

解決した方法

以下のコメントを参考にpage.waiForFunction()を使って解決しました。
[Question] Can I watch for changes in a specific element? · Issue #4051 · microsoft/playwright

await page.waitForFunction(() => {
  const select = <HTMLInputElement>document.getElementById('select');
  return select.value === "inu";
});

経緯

今回は、プルダウンから「うさぎ」を選択してボタンを押す操作をしたかったので以下のような処理を書いてました。

await page.locator('#select').selectOption({ label: 'うさぎ' });
await page.locator('button').click();

が、テスト対象の画面の動作と合わせると以下のような感じになってました。

// 画面の動作： 1. 空の`<select>`が表示される
// 画面の動作： 2. `<option>`が追加される
await page.locator('#select').selectOption({ label: 'うさぎ' });
// 画面の動作： 3. optionが選択される (いぬが選択される)
await page.locator('button').click();
// うさぎではなくいぬが登録された

なので、3. optionが選択される まで待ってからselectOptionする必要がありました。

最終的には以下でうまくいきました。

await page.waitForFunction(() => {
    const select = <HTMLInputElement>document.getElementById('select')
    return select.value === "inu";
});
await page.locator('#select').selectOption('usagi')
await page.locator('button').click();
// usagiが登録された

余談ですが、Trace Viewer | Playwrightめっちゃ便利です。お供です。

環境

$ node -v
v14.4.0

$ npx playwright --version
Version 1.25.0