Playwright Pro Generate

概要

Playwright Pro Generate は、ブラウザの相互作用を自動的にキャプチャしてテストコードを生成するスキルです。手動でテストを記述する時間を大幅に削減し、保守性の高いテストスイートを効率的に構築できます。

機能

自動コード生成

ユーザーのブラウザ操作を監視し、リアルタイムで Playwright テストコードを生成します。

// 生成されるコード例
const { test, expect } = require('@playwright/test');

test('ログイン フロー', async ({ page }) => {
  await page.goto('https://example.com');
  await page.fill('input[name="email"]', 'user@example.com');
  await page.fill('input[name="password"]', 'password123');
  await page.click('button[type="submit"]');
  await expect(page).toHaveURL('https://example.com/dashboard');
});

アクション認識

以下のブラウザアクションを自動認識します:

• クリック
• テキスト入力
• フォーム送信
• ナビゲーション
• ポップアップ・モーダル操作

セレクタ最適化

生成コードは最も堅牢なセレクタを自動選択し、以下の優先順位に従います:

1. テストID属性
2. ARIAラベル
3. CSSセレクタ
4. XPath

使用方法

基本的な開始手順

1. Playwright Pro を起動
2. 「Generate」ボタンをクリック
3. ブラウザウィンドウで操作を実行
4. 完了後、「Stop」をクリック

設定オプション

# playwright.config.js
module.exports = {
  webServer: {
    command: 'npm run start',
    port: 3000,
  },
  use: {
    baseURL: 'http://localhost:3000',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },
};

ベストプラクティス

意図的な操作

明確で意図的なユーザーフロー実行し、不要な操作は避けてください。

待機と検証

生成コード内に明示的な待機と検証ステップを追加します:

// 検証を含む例
await page.waitForSelector('button:has-text("Submit")');
await page.click('button:has-text("Submit")');
await expect(page.locator('.success-message')).toBeVisible();

セレクタの検証

生成されたセレクタは本番環境で確認し、複数ブラウザでテストしてください。

トラブルシューティング

セレクタが不安定

複数のセレクタオプションが提案される場合があります。最も信頼性の高いものを選択してください。

アクション検出漏れ

JavaScript トリガーのアクションは自動検出されない場合があります。その場合は手動で追加してください。

タイムアウトエラー

ページの遅延読み込みに対応するため、明示的な待機を追加してください:

await page.waitForLoadState('networkidle');

関連リソース

• Playwright 公式ドキュメント
• テストの継続的改善
• セレクタ戦略ガイド