⚡
Claude Code × Playwright MCPで手軽にE2Eテスト環境を構築した話

mittan
2025/12/08に公開
はじめまして！株式会社アップルワールド プロダクト開発部 開発戦略グループの松岡です。
この記事は アップルワールド Advent Calendar 2025 の8日目の記事です。

 はじめにClaude Code と Playwright MCP を組み合わせたE2Eテストの話題は、以前から気になっていました。いつか試してみたいと思いつつ、なかなか機会がなかったのですが、ついにその時がやってきました。
今回の状況はこんな感じです。
社内の決済基盤システムの検収作業を担当することに
テスト仕様書（Excelファイル）は渡されている
機能テスト: 123件（シート1に記載）
業務フローテスト: 199件（シート2に記載）

ただし、現在も開発が行われておりテスト仕様書がアップデートされる予定である
ソースコードは外部管理で、アクセスできない
他にも重要な確認事項があり、テスト工数をできるだけ省きたい
要するに「時間が非常に限定されている中で、テスト環境とテスト仕様書だけがある状態で、効率よく検収を進めたい」という、 なかなか詰んでいる状況 でした。
結果として、Claude Code + Playwright MCP で手軽にE2Eテスト環境を構築でき、手動テストの効率化に成功しました。Claude Codeがファイル構成を生成してくれる時間は10分ほどで、準備を含めても30分程度で環境が整いました。同じような状況の方の参考になれば幸いです。

 この記事で得られることClaude Code + Playwright MCP でE2Eテスト環境を構築する流れ
2段階認証があるシステムへの対処法
AIツールを活用したテスト効率化の実感

 前提条件作業用ディレクトリを作成後、Claude Code（CLI）が使える状態
Node.js 18 以上 がインストール済み（私はmiseでバージョン管理していますが今回は割愛）
初期構成は以下の通りです。テスト仕様書のみ配置してます。
project_e2e/
└── testcase.xlsx    # テストケース（エクセル形式）
                     # - シート1: 機能毎テストケース（123件）
                     # - シート2: 業務フローシナリオ（199件）

 使用したツール

ツール
用途


Claude Code（CLI）
Playwright MCPの実行・テスト実行

Playwright MCP
ブラウザ操作の自動化

MCP（Model Context Protocol） とは、AIアシスタントが外部ツールと連携するための標準プロトコルです。MCPサーバーを追加することで、Claude Codeがブラウザ操作やデータベース接続など、さまざまな外部機能を利用できるようになります。
今回使用した Playwright MCP は、Claude CodeからPlaywright（ブラウザ自動操作ツール）を直接操作できるようにするMCPサーバーです。Microsoft公式の @playwright/mcp パッケージを使用しました。

 やったこと
 Step 1: 環境構築Playwright MCP をインストールします。
$ claude mcp add playwright npx @playwright/mcp@latest
次に、確認します。
$ claude mcp list

# → playwright: npx @playwright/mcp@latest - ✓ Connected
インストールが完了したので、MCP経由でスクリーンショット取得を試してみます。Claude Codeを起動して以下のプロンプトを実行します。
> https://appleworld.co.jp/ にアクセスしてファーストビューのスクショをとって。
MCP経由でスクリーンショットが取得できました。Playwright MCPが正しく動作していることを確認できたので、これで準備完了です。

 Step 2: テスト用ファイルの作成テスト環境を構築するため、Claude Codeにプロンプトを渡してみました。テストケースはExcel形式で管理されていたので、それをJSON化して扱いやすくすることと、繰り返し実行できるようスラッシュコマンドを用意してもらうことを依頼しました。
> e2eテスト実行環境を構築してください。
- Excelのテストケース（testcase.xlsx）を読み込んでテストケースをJSON化してください
  - シート1: 機能毎テストケース（123件）
  - シート2: 業務フローシナリオ（199件）
- 実行用のプロンプトをClaude Code用のカスタムスラッシュコマンドとして用意してください
  - /e2e-minimum: ログイン確認と基本画面遷移（5件）
  - /e2e-function-test: 機能テスト全件実行（123件）
  - /e2e-workflow: 業務フローテスト全件実行（199件）

# テスト環境ログイン情報
URL: https://example.com/login
ID: [ログインID]
パスワード: [パスワード]
※2段階認証コードがメールで送付されます。テスト実行時に手動で入力してください。
Claude Codeが10分ほどで以下のファイル構成を生成してくれました（一部省略）。
project_e2e/
├── testcase.xlsx                    # テストケース仕様書（元ファイル）
├── package.json                     # npm設定
├── scripts/
│   └── extract_testcases.ts         # xlsx → JSON変換スクリプト
├── testcases/                       # 抽出されたテストケース（JSON）
├── results/                         # テスト結果・スクリーンショット出力先
└── .claude/
    └── commands/                    # スラッシュコマンド定義
        ├── e2e-minimum.md
        ├── e2e-function-test.md
        └── e2e-workflow.md
※ 私の環境ではTypeScriptを使う設定にしているため、スクリプトが .ts で生成されています。生成されるファイル構成はユーザーの設定によって変わります。

 ポイント1: テスト仕様書の自動抽出テスト仕様書はアップデート予定のため、手元で更新をかけるスクリプト（scripts/extract_testcases.ts）を用意してもらいました。Excel更新後にnpm run extractを実行すれば、最新のテストケースをJSON形式で再抽出できます。

 ポイント2: Playwright MCPの特徴Playwright MCPを使う大きなメリットは、従来のPlaywrightのようなテストコード（.spec.ts）を書く必要がないことです。
通常のPlaywrightでは、JavaScriptやTypeScriptでセレクタを指定してクリックやテキスト入力のコードを細かく書いていく必要がありました。
// 従来のPlaywrightの例
await page.goto('https://example.com/login');
await page.fill('#username', 'testuser');
await page.fill('#password', 'password');
await page.click('button[type="submit"]');
しかしPlaywright MCPでは、.claude/commands/配下にプロンプトファイル（.md）を用意するだけで、Claude Codeが自然言語からブラウザ操作を解釈・実行してくれます。「ログイン画面でIDとパスワードを入力してログインする」という指示だけで、適切な要素を見つけて操作してくれるため、コード量が大幅に削減できます。

 スラッシュコマンドの中身.claude/commands/e2e-minimum.md の中身は以下のようなプロンプトになっています。
# E2Eミニマムテスト

testcases/function_test.json からミニマムテストケース（5件）を読み込み、
Playwright MCPを使用してテストを実行してください。

## テスト手順
1. ログイン画面にアクセス
2. ログインIDとパスワードを入力してログイン
3. 2段階認証画面で待機（手動入力を待つ）
4. 各テストケースに従って画面遷移と確認を実施
5. 各ステップでスクリーンショットを取得

## 出力
- 結果をMarkdown形式で results/ ディレクトリに出力
- スクリーンショットは results/screenshots/ に保存
自然言語で書かれたプロンプトを、Claude Codeが解釈してテストを実行してくれるわけです。

 Step 3: テスト実行Claude Codeを起動して、スラッシュコマンドでテストを実行しました。
# ミニマムテスト（動作確認用・5件）
/e2e-minimum

# 機能テスト（123件）
/e2e-function-test

# 業務フローテスト（199件）
/e2e-workflow
例えば /e2e-minimum を実行すると、以下のような流れでテストが進みます。
Claude CodeがPlaywright MCPでブラウザを起動し、ログインページにアクセス
ログインIDとパスワードを自動入力してログイン
2段階認証画面で待機 → メールで届いたワンタイムパスワードをClaude Codeに伝える
認証完了後、テストケースに沿って画面遷移を自動実行
各画面でスクリーンショットを取得し、結果を results/ ディレクトリに出力
Claude Codeがブラウザを自動操作し、テストケースに沿って画面遷移や入力処理を進めてくれました。テスト結果はMarkdown形式で自動生成され、スクリーンショット付きで確認できるようになっています。

 実行結果のサンプル実際に出力されたテスト結果ファイル（results/e2e-minimum_YYYYMMDD_HHMMSS.md）の一部を紹介します。
# E2Eテスト結果 - ミニマム実行

## 実行情報
- 実行日時: 2025-12-01 13:21:00
- 実行者: Claude Code
- テスト種別: ミニマムテスト

## テスト結果サマリー
- 総テスト数: 5件
- 成功: 5件
- 失敗: 0件
- 成功率: 100%

## 詳細結果

| No | テスト項目 | 結果 | 備考 |
|----|------------|------|------|
| 1 | ログイン確認 | OK | 2段階認証を使用してログイン成功 |
| 2 | マスタ管理A - 画面表示 | OK | 一覧画面表示確認 |
| 3 | マスタ管理B - 画面表示 | OK | 検索画面・一覧画面表示確認 |
| 4 | 情報管理 - 画面表示 | OK | 一覧画面表示確認 |
| 5 | ログアウト確認 | OK | ログイン画面に正常に戻ることを確認 |

## スクリーンショット一覧
- results/screenshots/minimum_01_login.png
- results/screenshots/minimum_02_master_a.png
- results/screenshots/minimum_03_master_b.png
- results/screenshots/minimum_04_info.png
- results/screenshots/minimum_05_logout.png
このように、各テストの結果が見やすく整理されます。後から見返したときに「どこで何が起きたか」を追跡しやすいのがポイントです。

 工夫した点
 2段階認証の扱い今回のシステムはログイン後にメールでワンタイムパスワードが届く2段階認証でした。
メールで届くワンタイムパスワードの自動取得は、今回は見送りました。一般的にはテスト環境で2FAを無効化する方法がありますが、今回は外部管理のシステムで設定変更ができないため、半自動対応としました。
具体的には
ログインID/パスワードの入力まではClaude Codeが自動実行
ワンタイムパスワード画面で待機
メールで届いたワンタイムパスワードをClaude Codeに伝える
Claude Codeがパスワードを入力して認証を完了
その後の操作は再び自動実行
完全自動化ではありませんが、ワンタイムパスワードを伝えるだけで認証が完了するので、手間はほとんどかかりません。

 完全自動化ではなく「効率化」今回の目的は、合計322件（機能テスト123件 + 業務フローテスト199件）のテストケースを効率よく検収することでした。
すべてを自動化するのではなく、以下の部分をAIに任せることで工数を削減しました。
ログイン処理（毎回同じ操作）
画面遷移（メニュー操作など）
入力フォームへの値入力
最終的なチェック（画面表示の確認、データの整合性）は目視で行いますが、そこに至るまでの「作業」を自動化できたのは大きかったです。

 まとめClaude Code + Playwright MCPを使って、E2Eテスト環境を手軽に構築できました。完全自動化ではなく「手動テストの効率化」という使い方でしたが、これが意外とちょうどよかったです。
ソースコードにアクセスできない、環境もいじれない、という制約がある中でも、以下のメリットを実感できました。

繰り返し作業の削減: ログイン、画面遷移、入力作業をAIに任せられる

テスト環境の素早い構築: プロンプトベースでテスト環境が整う

柔軟な対応: テスト仕様書の更新にも素早く追従できる
「全部自動化しなきゃ」と気負わず、面倒なところだけ任せる、くらいの気持ちで使うのが良さそうです。
今回は検収作業での活用でしたが、可能性はまだまだありそうです。

 今後試してみたいこと他のテストケース用のプロンプトを整備
自社開発プロジェクトでCIに組み込む実験
ツール	用途
Claude Code（CLI）	Playwright MCPの実行・テスト実行
Playwright MCP	ブラウザ操作の自動化
アップルワールド Tech BlogPublication
『旅する人と、それを支えるすべての人が一歩先の未来へ踏み出す後押しをします。』をミッションに、アップルワールドのプロダクト開発に関わる人が書いた記事が集まる Publication です。
はじめに

この記事で得られること

前提条件

使用したツール

やったこと

Step 1: 環境構築

Step 2: テスト用ファイルの作成

ポイント1: テスト仕様書の自動抽出

ポイント2: Playwright MCPの特徴

スラッシュコマンドの中身

Step 3: テスト実行

実行結果のサンプル

工夫した点

2段階認証の扱い

完全自動化ではなく「効率化」

まとめ

今後試してみたいこと

Discussion
