ブラウザ操作を録画してAIにPlaywrightテストを書かせる方法【2026年最新】

「E2Eテストを書きたいけど、Playwrightの書き方を覚えるのが面倒…」

「テストコードの保守に時間を取られすぎる」

そんな悩みを持つエンジニアに今週爆発的に広まっているのが、ブラウザ操作を録画してAIにテストを書かせるという手法です。

はてなブックマーク 312ブックマーク（今週最高クラス）を集めたこのアプローチは、テスト自動化の参入障壁を大幅に下げます。録画さえすれば、Playwright の書き方を細かく覚える必要はありません。

この記事でわかること：

• ブラウザ録画 → AI テスト生成のワークフロー全体像
• Playwright Codegen の使い方（録画ツール）
• Claude Code に渡すプロンプトのコツ
• 生成されたテストをそのまま使えるレベルに仕上げる方法
• よくある失敗パターンと対策

この手法が注目される理由

テスト自動化はエンジニアの永遠の課題です。「書くのが面倒」「書いても壊れやすい」「保守コストが高い」——こうした問題から、テストを書かないチームは後を絶ちません。

ところが 2026年のAIコーディング環境はこの状況を変えつつあります。

必要なもの

• Node.js 18 以上
• Playwright（テストフレームワーク）
• Claude Code または Cursor / GitHub Copilot（AIエディタ）

Step 1：Playwright Codegen でブラウザ操作を録画する

Playwright には Codegen という標準機能が内蔵されています。GUI でブラウザを操作すると、その操作が自動的にコードに変換されます。

インストール

npm init playwright@latest

セットアップ中にブラウザのインストールを求められたら Yes を選択してください。

録画の起動

npx playwright codegen https://example.com

このコマンドを実行すると、2 つのウィンドウが開きます。

• 左側: 実際のブラウザウィンドウ（ここで操作する）
• 右側: リアルタイムでコードが生成されるウィンドウ

録画の例

たとえばログインフォームを操作してみましょう。

1. メールアドレス入力欄をクリック
2. user@example.com と入力
3. パスワード欄に入力
4. 「ログイン」ボタンをクリック

すると Codegen は自動的に以下のようなコードを生成します。

import { test, expect } from '@playwright/test';
 
test('test', async ({ page }) => {
  await page.goto('https://example.com/login');
  await page.getByLabel('メールアドレス').fill('user@example.com');
  await page.getByLabel('パスワード').fill('password123');
  await page.getByRole('button', { name: 'ログイン' }).click();
});

ポイント: Codegen はセレクタを自動的に選んでくれますが、id や class に依存しにくい getByRole や getByLabel を優先的に使います。これは保守性の高いテストの書き方として推奨されているアプローチです。

録画結果をファイルに保存する

npx playwright codegen --output=tests/login.spec.ts https://example.com/login

--output オプションを使うと、生成コードをそのままファイルに保存できます。

Step 2：録画コードを AI に渡してテストを強化する

録画した生コードは「操作を記録しただけ」の状態です。ここからが AI の出番です。

Claude Code（またはお使いのAIエディタ）に以下のプロンプトを渡します。

基本プロンプト

以下は Playwright Codegen で録画したログイン操作のコードです。
このコードを元に、本番品質のテストスイートを作成してください。

要件：
1. 正常系（ログイン成功）のテスト
2. 異常系のテスト（間違ったパスワード、未登録メール）
3. ログイン後のリダイレクト先を確認するアサーション
4. テストの説明コメントを日本語で追加
5. テストデータは fixtures として分離する

--- 録画コード ---
[Codegen で生成されたコードをここに貼り付け]

AI が生成するテストの例

このプロンプトに対し、Claude Code は以下のような強化版テストを生成します。

import { test, expect } from '@playwright/test';
 
// テストデータ
const validUser = {
  email: 'user@example.com',
  password: 'correctPassword',
};
 
const invalidUser = {
  email: 'notregistered@example.com',
  password: 'wrongPassword',
};
 
test.describe('ログイン機能', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/login');
  });
 
  test('正常系：正しい認証情報でログインできる', async ({ page }) => {
    await page.getByLabel('メールアドレス').fill(validUser.email);
    await page.getByLabel('パスワード').fill(validUser.password);
    await page.getByRole('button', { name: 'ログイン' }).click();
 
    // ダッシュボードへリダイレクトされることを確認
    await expect(page).toHaveURL('/dashboard');
    await expect(page.getByText('ようこそ')).toBeVisible();
  });
 
  test('異常系：誤ったパスワードでエラーメッセージが表示される', async ({ page }) => {
    await page.getByLabel('メールアドレス').fill(validUser.email);
    await page.getByLabel('パスワード').fill('wrongPassword');
    await page.getByRole('button', { name: 'ログイン' }).click();
 
    // エラーメッセージの表示を確認
    await expect(page.getByRole('alert')).toBeVisible();
    await expect(page.getByRole('alert')).toContainText('メールアドレスまたはパスワードが間違っています');
 
    // ログインページに留まっていることを確認
    await expect(page).toHaveURL('/login');
  });
 
  test('異常系：未登録メールアドレスでエラーになる', async ({ page }) => {
    await page.getByLabel('メールアドレス').fill(invalidUser.email);
    await page.getByLabel('パスワード').fill(invalidUser.password);
    await page.getByRole('button', { name: 'ログイン' }).click();
 
    await expect(page.getByRole('alert')).toBeVisible();
  });
 
  test('バリデーション：空のフォームで送信できない', async ({ page }) => {
    await page.getByRole('button', { name: 'ログイン' }).click();
 
    // HTML5 バリデーションまたはカスタムバリデーションを確認
    await expect(page.getByLabel('メールアドレス')).toBeFocused();
  });
});

録画コードが数行だったものが、しっかりしたテストスイートに変わりました。

Step 3：スクリーンショット付きで録画して AI の精度を上げる

より複雑な画面のテストを書くとき、テキストだけでは AI が画面の構造を把握しにくいことがあります。そこで スクリーンショットも一緒に渡すのが有効です。

スクリーンショット付きプロンプトの例

Claude Code では画像をそのまま貼り付けてプロンプトを書けます。

[ダッシュボード画面のスクリーンショット]

この画面のスクリーンショットと、以下の Codegen コードを元に
テストを作成してください。特に：
- 表示されているデータの件数アサーション
- フィルタ操作のテスト
- ページネーションのテスト

--- 録画コード ---
[コードをここに貼り付け]

視覚情報があることで、AI はより文脈に沿ったアサーションを追加できます。

Step 4：テストを実行して確認する

生成されたテストを実行しましょう。

# すべてのテストを実行
npx playwright test
 
# 特定のファイルを実行
npx playwright test tests/login.spec.ts
 
# UI モードで実行（デバッグしやすい）
npx playwright test --ui

UI モードでは、各テストのステップを視覚的に確認でき、失敗箇所を特定しやすくなります。

テスト失敗時の AI 活用

テストが失敗した場合も AI に助けてもらいます。

npx playwright test 2>&1 | claude "このエラーを解析して修正案を提示して"

または Claude Code のターミナルでエラーメッセージをそのまま貼り付けて「このテストが失敗している原因と修正方法を教えて」と聞くだけでOKです。

実践：EC サイトの購入フローをテストする

より実践的な例として、EC サイトの購入フロー全体をテストしてみましょう。

1. 購入フローを Codegen で録画

npx playwright codegen --output=tests/purchase.spec.ts https://yourshop.com

商品詳細ページ → カートに追加 → 住所入力 → 支払い → 完了画面の一連の操作を録画します。

2. AI に渡すプロンプト

以下は EC サイトの購入フロー録画コードです。
このフローの品質を高めるテストを作成してください。

特に以下の観点でテストを追加してください：
1. 各ステップでの画面遷移確認
2. 合計金額の計算が正しいことの検証
3. 在庫切れ商品への対応
4. フォームバリデーション（必須項目、郵便番号形式など）
5. 支払い完了後の注文確認メールの送信確認（モックを使用）

--- 録画コード ---
[ここに録画コードを貼り付け]

3. Page Object Model パターンへの変換

テストが増えてきたら、保守性を高めるために Page Object Model（POM）パターンへの変換も AI に依頼できます。

このテストコードを Page Object Model パターンにリファクタリングしてください。
各ページクラスを別ファイルに分けて、tests/pages/ ディレクトリに保存する構成にしてください。

よくある失敗パターンと対策

失敗1：セレクタが class や id に依存している

AI が page.locator('.btn-primary') のような壊れやすいセレクタを生成することがあります。

対策プロンプト

セレクタは data-testid、aria ロール、ラベルテキストを優先して使ってください。
class や id への依存は避けてください。

失敗2：非同期処理を待たずにアサーションしている

ページの読み込みが遅い場合、テストが不安定になります。

対策プロンプト

非同期処理（API コール、アニメーション完了）を適切に待機する
waitFor や expect(...).toBeVisible() を使ってください。
タイムアウトが発生しやすい箇所には適切な timeout 設定を追加してください。

失敗3：テストデータがハードコードされている

テストデータは fixtures ファイルに分離し、環境変数から読み込めるようにしてください。
本番 URL やパスワードがテストコードにハードコードされないようにしてください。

発展：Claude Code の MCP と組み合わせる

Claude Code と Playwright MCP（Model Context Protocol）を組み合わせると、さらに強力なワークフローが実現します。

MCP を使うと、Claude Code が直接ブラウザを操作しながらテストを書くことができます。

# Playwright MCP のインストール（Claude Code の設定）
# ~/.claude/config.json に追加
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

設定後は Claude Code に直接「このログインフォームのテストを書いて」と指示するだけで、Claude が実際にブラウザを開いて動作確認しながらテストを生成してくれます。

まとめ

ブラウザ録画 × AI のテスト自動化ワークフローをまとめます。

1. npx playwright codegen <URL> でブラウザ操作を録画
2. 録画コードと要件を Claude Code に渡してテストを強化
3. 必要に応じてスクリーンショットも添付してコンテキストを追加
4. npx playwright test --ui で視覚的に確認しながら調整

「テストを書く時間がない」「Playwright の書き方がわからない」という理由でテスト自動化を諦めていた方も、このワークフローなら今日から始められます。

まずは小さなページの操作を録画して、AI に渡してみることをお勧めします。

関連記事：Claude Code を最大限に活用するベストプラクティス