Playwright のテストが「Test timeout of 30000ms exceeded」で失敗する

要約

Test timeout of 30000ms exceeded は、Playwright が各テストに割り当てる既定 30 秒の上限を、テスト本体やフックの処理が超えたときに出ます。

多くは「待っている要素がいつまでも現れない」ことが根本原因です。
まずはタイムアウトを延ばす前に、なぜ待ち続けているのかを切り分けます。

よくある原因

1. 要素が出現しない: セレクタが間違っている、または描画が遅く、click などの自動待機が 30 秒を消費する。
2. 遷移・通信が遅い: ページ遷移や API 応答が遅く、テスト全体が上限を超える。
3. フックの時間も加算: beforeEach やフィクスチャの準備時間もテストのタイムアウトに含まれる。
4. 延長していない: 本質的に重い E2E テストにタイムアウト延長を設定していない。

解決策

1. 待ち方を直す（最優先）

固定の waitForTimeout ではなく、自動リトライするアサーションで待ちます。

await expect(page.getByRole("button", { name: "保存" })).toBeVisible();
await page.getByRole("button", { name: "保存" }).click();

2. 全体のタイムアウトを上げる

恒常的に時間がかかるなら設定で底上げします。

// playwright.config.ts
export default defineConfig({
  timeout: 60_000,
});

3. 個別テストだけ延長する

特定の重いテストだけ延ばすこともできます。

test("重い処理", async ({ page }) => {
  test.setTimeout(120_000);
  // ...
});

外部要因で一部だけ遅い場合は、toBeVisible({ timeout }) のように局所的な待機で対処してください。