コンテンツにスキップ

playwright でのリロード

はじめに

Web アプリケーションの E2E テストで利用される Playwright において、期待する要素が表示されるまでリロードを繰り返す方法を備忘録として残す。 アプリケーションの裏側で非同期処理が行われている場合、要素が表示されるまで遅延が発生することがある。Playwright では、要素の描画を待つ機能が提供されているが、この機能で対応できず、リロードが必要な場合がある。

要素の存在確認とリロード

次のコードは、指定した要素が表示されるまでリロードを繰り返す関数である。locator の引数として期待する要素を指定し、count メソッドで要素の存在を確認する。要素が存在しない場合は、waitFor メソッドで要素が表示されるまで待機し、指定した時間が経過した場合はページをリロードする。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { type Locator, type Page } from "playwright-core";

export async function reloadUntilExists(
  page: Page,
  locator: Locator,
  reloadDurationMs = 10000,
  timeoutMs = 120000
) {
  const startTime = Date.now();

  while ((await locator.count()) === 0) {
    const currentTime = Date.now();
    if (currentTime - startTime >= timeoutMs) {
      throw new Error("locator is not exists.");
    }

    try {
      await locator.waitFor({ state: "attached", timeout: reloadDurationMs });
    } catch (e) {
      await page.reload();
    }
  }
}