webapp-testing

Web Application Testing

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

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

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

• 実際のブラウザーでフロントエンドの機能をテストする
• 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 を使用してください）
• 複雑な認証フローでは問題が発生する場合があります
• 最新のフレームワークの中には、固有の設定が必要なものがあります