Playwright Selectbox Waiting

PlaywrightでE2Eの自動テストを書いていた時に少しハマってしまったのでメモ。

このようなHTML要素に対して操作を行う。

1
2
3
4
5
6
7


<form name="なんらかの新規作成画面">
  <select name="なんらかのセレクトボックス" id="selectBox">
    <option value="option1">選択肢A</option>
    <option value="option2">選択肢B</option>
    <option value="option3">選択肢C</option>
  </select>
</form>

画面遷移後すぐにSelectBoxのOptionを選択したかったが、Optionの描画が完了しない状態でアクセスしてしまうとうまく選択できない。

1
2
3
4


const form = page.getByRole('form', { name: 'なんらかの新規作成画面' });
await form
  .getByRole('combobox', { name: 'なんらかのセレクトボックス' })
  .selectOption({ label: '選択肢B' }); // <- 選択できない

簡単な解決策として「一定時間待つ」というものがあるが、これはアンチパターン。

1

await page.waitForTimeout(1000);

チリツモでテストの実行時間が遅くなるし、一定時間待ったところで準備が整っている保証はされないのでFlakyなテストになってしまう。

対策として .selectOption() する前に「セレクトボックスをクリック」してあげることでうまく動く。

1
2
3
4
5


const form = page.getByRole('form', { name: 'なんらかの新規作成画面' });
await form.getByRole('combobox', { name: 'なんらかのセレクトボックス' }).click(); // 追加
await form
  .getByRole('combobox', { name: 'なんらかのセレクトボックス' })
  .selectOption({ label: '選択肢B' });

Auto-waiting | Playwrightのドキュメントによると、 .click() は操作が可能な状態になるまで待ってから動作してくれるらしい。

尚、 .selectOption では visible と enable しか確認してくれない模様。