PlaywrightのE2EテストをClaudeと書く

E2Eテストを書くのは手間がかかります。ページ遷移・フォーム操作・アサーションと、コード量がすぐに膨らみがちです。Claude Codeを活用すれば、その手間を大幅に削減できます。

まずPlaywrightのセットアップを任せる

プロジェクトにPlaywrightを導入する段階から、Claudeに任せましょう。以下のようにプロンプトを入力してください。

Next.js製のECサイトにPlaywrightを導入してください。
テスト対象は src/app 配下のページです。
TypeScriptを使い、設定ファイルも生成してください。

Claude Codeはplaywright.config.tsの生成からpackage.jsonへのスクリプト追加まで一括でこなしてくれます。自分でドキュメントを読み回る時間が省けるのが大きなメリットです。

※TypeScript: JavaScriptに型定義を追加した言語。型チェックによりバグを事前に発見しやすくなる。※プロンプト: AIへの指示文。Claude Codeへの指示の質がそのまま出力の質に影響する。

具体的な操作シナリオを日本語で伝える

テストコードを生成させるときは、ユーザーの操作フローを日本語でそのまま書くのがコツです。

以下のシナリオをPlaywrightのテストコードにしてください。

1. トップページを開く
2. ヘッダーの「ログイン」ボタンをクリック
3. メールアドレスに "test@example.com"、パスワードに "password123" を入力
4. 「送信」ボタンを押す
5. ダッシュボードのURLが /dashboard になっていることを確認
6. 「ようこそ」という文字が画面に表示されていることを確認

このように箇条書きで渡すと、Claude Codeはpage.getByRole()やpage.locator()を適切に使い分けた、可読性の高いテストコードを生成してくれます。

test('ログインフローが正常に動作する', async ({ page }) => {
  await page.goto('/');
  await page.getByRole('link', { name: 'ログイン' }).click();
  await page.getByLabel('メールアドレス').fill('test@example.com');
  await page.getByLabel('パスワード').fill('password123');
  await page.getByRole('button', { name: '送信' }).click();
  await expect(page).toHaveURL('/dashboard');
  await expect(page.getByText('ようこそ')).toBeVisible();
});

既存のHTMLを渡してセレクタを正確にする

「セレクタが合わない」問題は、実際のHTMLを渡すことで解決できます。ブラウザの開発者ツールでコンポーネントのHTMLをコピーし、次のように添付しましょう。

以下のHTMLをもとに、フォームのバリデーションエラーが表示されることを確認する
Playwrightのテストを書いてください。

<form>
  <input id="email" type="email" />
  <span class="error-message" data-testid="email-error">...</span>
  <button type="submit">送信</button>
</form>

HTMLの構造を把握したClaude Codeはdata-testid属性を優先して使うなど、壊れにくいセレクタを選んでくれます。