E2Eテストの自動生成
Playwrightを使ったE2Eテストをユーザーシナリオから自動生成します。
シナリオからテスト生成
AIへの指示
以下のユーザーシナリオに対するPlaywrightテストを生成してください。 【シナリオ: ユーザー登録からログインまで】 1. トップページにアクセス 2. 「新規登録」ボタンをクリック 3. メールアドレスとパスワードを入力 4. 「登録」ボタンをクリック 5. 登録完了メッセージが表示される 6. 自動的にダッシュボードにリダイレクト 【URL】 - トップ: / - 登録: /register - ダッシュボード: /dashboard
生成されるテスト
import { test, expect } from '@playwright/test';
test('ユーザー登録からログインまでの流れ', async ({ page }) => {
// 1. トップページにアクセス
await page.goto('/');
// 2. 新規登録ボタンをクリック
await page.getByRole('link', { name: '新規登録' }).click();
await expect(page).toHaveURL('/register');
// 3. フォーム入力
await page.getByLabel('メールアドレス').fill('test@example.com');
await page.getByLabel('パスワード').fill('password123');
// 4. 登録ボタンをクリック
await page.getByRole('button', { name: '登録' }).click();
// 5. 完了メッセージを確認
await expect(page.getByText('登録が完了しました')).toBeVisible();
// 6. ダッシュボードにリダイレクト
await expect(page).toHaveURL('/dashboard');
});
Page Object Model
保守性の高いテスト構造
このテストをPage Object Modelパターンにリファクタリングしてください。 - LoginPage - DashboardPage 各ページクラスにはセレクタとアクションをカプセル化してください。
CI連携
GitHub Actions設定
- name: Run Playwright tests
run: npx playwright test
- name: Upload test results
uses: actions/upload-artifact@v3
with:
name: playwright-report
path: playwright-report/
まとめ
- ✓シナリオベース - ユーザー操作を記述してテスト生成
- ✓Page Object - 保守性を高める構造化
- ✓CI統合 - 自動実行でリグレッション防止