コンテンツにスキップ

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();
    }
  }
}