webapp-testing

Web アプリケーションのテスト

このスキルは、Playwright 自動化を使用してローカルの Web アプリケーションを包括的にテストおよびデバッグすることを可能にします。

可能であれば、Playwright MCP サーバーを使用して作業を進めてください。MCP サーバーが利用できない場合は、Playwright がインストールされたローカルの Node.js 環境でコードを実行できます。

このスキルを使用する場面

次のような場合にこのスキルを使用します。

• 実際のブラウザーでフロントエンド機能をテストする
• UI の動作とインタラクションを検証する
• Web アプリケーションの問題をデバッグする
• ドキュメントまたはデバッグ用のスクリーンショットを撮影する
• ブラウザーコンソールのログを確認する
• フォームの送信とユーザーフローを検証する
• ビューポート間でのレスポンシブデザインを確認する

前提条件

• システムに Node.js がインストールされていること
• ローカルで実行中の Web アプリケーション（またはアクセス可能な URL）
• Playwright がインストールされていない場合は自動的にインストールされます

主な機能

1. ブラウザー自動化

• URL に移動する
• ボタンやリンクをクリックする
• フォームフィールドに入力する
• ドロップダウンを選択する
• ダイアログとアラートを処理する

2. 検証

• 要素の存在をアサートする
• テキストコンテンツを検証する
• 要素の表示状態を確認する
• URL を検証する
• レスポンシブな動作をテストする

3. デバッグ

• スクリーンショットを撮影する
• コンソールログを確認する
• ネットワークリクエストを検査する
• 失敗したテストをデバッグする

使用例

例 1: 基本的なナビゲーションテスト

// Navigate to a page and verify title
await page.goto("http://localhost:3000");
const title = await page.title();
console.log("Page title:", title);

例 2: フォームの操作

// Fill out and submit a form
await page.fill("#username", "testuser");
await page.fill("#password", "password123");
await page.click('button[type="submit"]');
await page.waitForURL("**/dashboard");

例 3: スクリーンショットの撮影

// Capture a screenshot for debugging
await page.screenshot({ path: "debug.png", fullPage: true });

ガイドライン

1. 常にアプリが実行中であることを確認する - テストを実行する前に、ローカルサーバーにアクセスできることを確認してください
2. 明示的な待機を使用する - 操作する前に、要素またはナビゲーションが完了するのを待ってください
3. 失敗時にスクリーンショットを撮影する - 問題のデバッグに役立てるためスクリーンショットを撮ってください
4. リソースをクリーンアップする - 完了したら常にブラウザーを閉じてください
5. タイムアウトを適切に処理する - 遅い操作には妥当なタイムアウトを設定してください
6. 段階的にテストする - 複雑なフローよりも前に、まず単純なインタラクションから始めてください
7. セレクターを賢く使用する - CSS クラスよりも data-testid またはロールベースのセレクターを優先してください

一般的なパターン

パターン: 要素を待機する

await page.waitForSelector("#element-id", { state: "visible" });

パターン: 要素が存在するか確認する

const exists = (await page.locator("#element-id").count()) > 0;

パターン: コンソールログを取得する

page.on("console", (msg) => console.log("Browser log:", msg.text()));

パターン: エラーを処理する

try {
  await page.click("#button");
} catch (error) {
  await page.screenshot({ path: "error.png" });
  throw error;
}

制限事項

• Node.js 環境が必要です
• ネイティブモバイルアプリはテストできません（代わりに React Native Testing Library を使用してください）
• 複雑な認証フローで問題が発生する場合があります
• 一部のモダンなフレームワークでは特定の設定が必要になる場合があります

ヘルパー関数

要素の待機、スクリーンショットの撮影、エラーの処理といった一般的なタスクを簡素化するためのヘルパー関数がいくつか test-helper.js で利用できます。これらの関数をテストにインポートして使用することで、可読性と保守性を向上させることができます。