レベル4: E2Eブラウザテスト

Playwright とヘッドレスブラウザによるエンドツーエンドテスト。

レベル4がテストするもの

レベル4のテストは実際のブラウザ（またはヘッドレスブラウザ）で実行され、ページロードからインタラクションを経て最終状態に至るまでの完全なユーザーフローを検証します。シミュレートされた環境では見逃すランタイムエラー、ナビゲーションの問題、インタラクションのバグをキャッチします。

典型的な対象：

• 完全なユーザーワークフロー（ログイン、フォーム送信、ナビゲーション）

• クライアントサイドルーティング

• API連携（モックまたは実際のエンドポイント）

• コンソールエラーの検出

• ページ間のインタラクション

• 動的コンテンツの読み込み

ツール

例: Playwright E2E

// e2e/navigation.spec.ts
import { test, expect } from "@playwright/test";

test("navigates from home to docs", async ({ page }) => {
  await page.goto("/");
  await page.locator('a[href="/docs"]').click();
  await expect(page).toHaveURL("/docs");
  await expect(page.locator("h1")).toHaveText("Documentation");
});

test("no console errors on page load", async ({ page }) => {
  const errors: string[] = [];
  page.on("console", (msg) => {
    if (msg.type() === "error") errors.push(msg.text());
  });
  await page.goto("/");
  expect(errors).toHaveLength(0);
});

例: ヘッドレスブラウザによるクイックチェック

フルテストスイートを使わない迅速な検証には、/headless-browser（英語版のスキルドキュメント: /headless-browser）でスクリーンショットを撮影しエラーをチェックします。実体のスクリプトは $HOME/.claude/skills/headless-browser/scripts/headless-check.js にあります。

スクリーンショット付きのクイックヘルスチェック（--screenshot は値が必須です。viewport か full を指定します -- 値なしのフラグは無視されます）：

node $HOME/.claude/skills/headless-browser/scripts/headless-check.js \
  --url http://localhost:3000 --screenshot viewport

コンソールエラーのチェック。--console-errors というフラグは存在しません -- JSON出力には常に hasErrors、console、pageErrors が含まれます。リソースのブロックはデフォルトで有効なので、正確なエラー検出には --no-block-resources を指定してください。ネットワークエラーは別の関心事です -- hasErrors はページエラーとコンソールエラーのみを反映するため、失敗したリクエストを検出するには出力の networkErrors.totalFailed／failedRequests を確認してください：

node $HOME/.claude/skills/headless-browser/scripts/headless-check.js \
  --url http://localhost:3000 --no-block-resources

コンソールエラーモニタリング

本番プロジェクトからの強力なパターン：E2Eテスト中にコンソール出力を監視して予期しないエラーをキャッチします：

// e2e/fixtures.ts
import { test as base } from "@playwright/test";

export const test = base.extend({
  page: async ({ page }, use) => {
    const errors: string[] = [];
    page.on("console", (msg) => {
      if (msg.type() === "error") {
        errors.push(msg.text());
      }
    });
    await use(page);
    if (errors.length > 0) {
      throw new Error(
        `Console errors detected:\n${errors.join("\n")}`
      );
    }
  },
});

ブラインドスポット

レベル4は「要素が存在してインタラクション可能である」ことを確認します。「要素が正しく見える」ことを確認するには、レベル5にエスカレーションしてください。

レベル4を使用するタイミング