Webアプリの開発が進むにつれ、手動での動作確認には限界がやってきます。そこで役立つのがE2EテストツールのPlaywrightですが、最初の環境構築やテストコードの作成を面倒に感じて後回しにしている方も多いのではないでしょうか？
そんな時に頼りになるのが、ターミナル上で動くAIエージェント「Claude Code」です。ブラウザ版のAIとは違い、あなたのプロジェクトを直接読み込んで設定からテスト実行まで代行してくれる、最新ツールの活用術を解説します。
Claude CodeとPlaywrightを組み合わせるメリット
E2Eテストを導入する際、最も大きな壁となるのが「準備の手間」と「メンテナンスのしんどさ」です。Claude Codeを使えば、AIがあなたの隣で手を動かすエンジニアのように、これらの作業をすべて引き受けてくれます。
この章では、なぜこの二つのツールを組み合わせるのが賢い選択なのかを整理しました。AIが「環境そのもの」を理解しているからこそ生まれる、圧倒的なスピード感と正確さの理由を解き明かします。
ターミナルでAIが自走するエンジニアリングエージェントの強み
これまでのAIチャットでは、コードの修正案をもらっても、それを自分でファイルにコピペし、コマンドを叩いて確認する必要がありました。Claude Codeは、あなたが使っているターミナルの中で直接動く「エージェント」です。
「Playwrightを導入して、ログイン画面のテストを書いて」と一言指示するだけで、AIは必要なパッケージを入れ、設定ファイルを作り、実際にブラウザを動かすコードまで一気に書き上げます。
人間はAIが作業を進める様子を画面で見守るだけで、退屈なセットアップ作業から解放されるのです。
もちろん、AIにすべての権限を渡すのが怖いと感じることもあるでしょう。
しかし、Claude Codeはファイルを書き換えたりコマンドを実行したりする前に、必ず「これを行ってもいいですか？」と確認を求めてきます。
この適度な距離感があるからこそ、安全に、かつ爆発的なスピードでテスト環境を整えることができます。
ローカルファイルを直接スキャンして最適な設定を提案できる
ブラウザ版のAIは、あなたが貼り付けた断片的なコードしか見ることができません。一方でClaude Codeは、プロジェクト全体のディレクトリ構造や、使用しているライブラリ、設定ファイルを丸ごと読み取ることができます。
例えば、あなたのプロジェクトが「TypeScript」を使っているのか、それとも「JavaScript」なのかをAIが勝手に判断し、それに合わせたテストコードを生成します。
パスの設定や、ベースとなるURLの指定も、既存の環境変数や設定ファイルからAIが推測してくれるため、人間が細かい指示を出す必要はありません。
個人で開発している小規模なサイトでも、チームで動かしている大規模なサービスでも、その規模に合わせた最適な設定をAIがその場で導き出します。
「自分の環境では動かない」といった、AIの提案によくあるミスマッチを最小限に抑えられるのが、ローカルスキャン機能の大きな利点です。
ブラウザ操作とテストコード生成の親和性が高い理由
Playwrightはブラウザの動きをシミュレートするツールですが、そのコードを書くには「どのボタンをクリックするか」というセレクタの指定が重要になります。Claude Codeは、実際のHTML構造を解析して、壊れにくいセレクタを選び出すのが得意です。
AIは単に画面上の文字を見るだけでなく、背後にあるDOM構造（プログラムから見たHTMLの仕組み）を深く理解します。
これにより、「ログインボタン」という名前の要素が複数あっても、どの要素が本物かを正確に特定し、テストコードに反映させることができます。
従来の手法とClaude Codeの比較
| 比較項目 | 従来の手作業・AIチャット | Claude Codeでの導入 |
| 環境構築 | 公式ドキュメントを見ながら手動設定 | AIがコマンドを一括実行 |
| コード作成 | ブラウザとAIをコピペで往復 | ファイルを直接編集 |
| 依存関係 | 自分でライブラリを管理 | AIが自動でインストール |
| エラー修正 | ログをコピーしてAIに相談 | AIがログを読んで自力修正 |
Playwrightの導入と初期設定をClaude Codeに任せる
Playwrightをプロジェクトに導入する際、最初の一歩でつまずいてしまうのはもったいないことです。Claude Codeに指示を出せば、わずか数分で「いつでもテストが回せる状態」まで持っていくことができます。
ここでは、環境構築をAIに丸投げする際の具体的な流れを解説します。あなたが最初に行うべきコマンドや、AIに伝えておくべき情報のポイントを整理しました。
依存ライブラリのインストールから代行してもらう
まずは、ターミナルでClaude Codeを起動し、「このプロジェクトにPlaywrightを導入して」と伝えましょう。AIは即座に、お使いのパッケージマネージャー（npmやyarnなど）を特定し、必要なインストールコマンドを提案します。
Playwright本体だけでなく、テストを実行するために必要なブラウザのバイナリ（ChromiumやFirefoxなど）のダウンロードまで、AIが自律的に進めてくれます。
これまでは「あれ、コマンドは何だったかな？」と検索していた時間が、すべて不要になるのです。
注意点として、プロジェクトによってはライブラリのバージョン競合が起きる心配もあります。
しかし、Claude Codeならエラーが出た瞬間に「このライブラリと相性が悪いようです。別のバージョンを試しますか？」と代案を出してくれます。
この柔軟な対応こそが、単なる自動化ツールとは違う、エージェント型AIの頼もしいところです。
プロジェクトに合わせた設定ファイルの自動生成
インストールが終わると、次は「playwright.config.ts（設定ファイル）」の作成です。AIはあなたのプロジェクトが動いているポート番号や、テストのレポートをどこに出力すべきかを判断し、最適な中身を書き込みます。
例えば、すでにプロジェクトにGitHub Actionsなどの自動化ツールが入っていれば、AIはそれを察知して、CI環境（自動実行環境）でも動くような設定を盛り込んでくれます。
「自分たちのチームではどのようなブラウザでテストしたいか」という要望を伝えるだけで、複雑な設定ファイルが完成します。
設定をカスタマイズする時のポイント
- テスト対象のURL（localhostなど）を正しく伝える
- 使用したいブラウザ（Chrome, Safariなど）を絞り込む
- スクリーンショットを撮るタイミングを指定する
このように、自分たちの好みを一言添えるだけで、AIはそれを設定に反映します。
一度土台ができてしまえば、後はそれを微調整するだけで済むため、最初から完璧を目指して人間が苦労する必要はありません。
既存のディレクトリ構造に馴染むフォルダ構成の作成
テストコードをどこに置くかというルールも、AIに相談してみましょう。既存のプロジェクトの慣習を読み取り、違和感のない場所にテスト用フォルダを作成してくれます。
「うちのプロジェクトは __tests__ フォルダにまとめているから、そこに入れて」と伝えれば、AIはその指示に従って整理整頓を行います。
フォルダ構成が綺麗に保たれることで、後から他のメンバーがコードを見た時も、どこに何があるか迷わずに済みます。
もし、特に決まったルールがない場合でも、AIが「一般的にはこのように配置するのがベストです」と提案してくれます。
プロの作法を学びながら、プロジェクトを清潔な状態に保てるのは、初心者にとっても嬉しいポイントです。
実際のコードに基づいたE2Eテストを自作する手順
環境が整ったら、いよいよテストコードを自作していきます。Claude Codeの真骨頂は、あなたの書いたUIコードを「読んで」テストを書ける点にあります。
この章では、AIにどのような指示を出せば、質の高いテストコードを生成してくれるのかを具体的に見ていきましょう。コピペを一切使わずに、あなたのプロジェクト専用のテストを組み立てる進め方を紹介します。
自然言語でテストシナリオを指示するコツ
AIに指示を出すときは、「ユーザーがどのような操作をして、何を確認したいか」を物語のように伝えてください。
例えば、「ログイン画面で、間違ったパスワードを入れた時に『エラーです』という赤い文字が出ることを確認して」といった具合です。
具体的な操作の流れを伝えることで、AIはそれをPlaywrightのコード（ await page.click() など）へ忠実に翻訳します。
大規模な組織で開発している場合、自分では把握しきれない機能も多いかもしれません。
そんな時は「この画面でできる主要な操作をテストにして」と、AIに提案させるのも一つの手です。
AIがコードを読み込み、「プロフィールの編集」「パスワードのリセット」など、テストすべき項目をリストアップしてくれるでしょう。
AIにプロジェクトのDOM構造やコンポーネントを解析させる
Claude Codeは、あなたがReactやVueなどで書いたコンポーネントのソースコードを直接読み取ります。これにより、開発者が意図した「ID」や「クラス名」を正確に使ってテストを組むことができます。
ブラウザを立ち上げて一つずつ要素を調べる手間が省けるため、作成スピードが劇的に上がります。
また、AIは「この要素は非同期で読み込まれるから、待機処理が必要だな」といった、テストが落ちやすいポイントも先回りして考慮してくれます。
ただし、複雑すぎる構造のサイトだと、AIがセレクタを特定するのに迷うこともあります。
そのような時は、「この要素には data-testid という属性を付けて、それを基準にテストして」と伝えてみましょう。
AIはコードに属性を付け加える作業まで代行してくれるため、テストのしやすい「保守性の高いコード」へと進化させることができます。
特定のブラウザやデバイスを指定したテストの書き分け
最近のWebアプリは、パソコンだけでなくスマホやタブレットでどう見えるかも重要です。Claude Codeを使えば、デバイスごとの挙動を確認するテストも簡単に作成できます。
「iPhone 14の画面サイズで、メニューボタンが正しく表示されるか確認して」と指示すれば、エミュレーション（疑似操作）の設定を含んだテストを書いてくれます。
異なる環境での動作確認は手動だと非常に手間がかかりますが、AIなら一度の指示で複数のパターンを網羅できます。
デバイス別テストの具体例
- パソコン版Chromeでの通常操作
- iPhone環境でのタッチ操作と表示確認
- ダークモード設定時の文字の読みやすさ
こうした細かな要望にも、AIは嫌な顔一つせず対応してくれます。
あらゆるユーザーの環境を想定したテストを揃えることで、リリース前の安心感は格段に高まるはずです。
テスト実行とデバッグのループをAIで自動化する
テストコードは、書いて終わりではありません。実際に動かしてみて、想定通りに動くことを確認して初めて価値が出ます。Claude Codeは、この「動かして直す」というループを自律的に繰り返すことができます。
この章では、テストが落ちたときの絶望感を、AIと一緒に解決する方法を解説します。人間がログを読み解く苦労をAIに任せて、スムーズにテストを完成させる手順を確認しましょう。
テストコマンドを実行してエラーログをAIに読ませる
テストを動かしてエラーが出たら、そのままClaude Codeに「エラーを直して」と頼んでみましょう。AIはターミナルに表示されたエラーログを瞬時に読み取り、何が原因でテストが止まったのかを特定します。
「ボタンが見つからない」「タイムアウトした」「期待していた文字と違う」など、原因はさまざまです。
AIは単にログを見るだけでなく、実際のコードと見比べて「あ、ここに待機処理が足りないな」と解決策を考え始めます。
これまでならエラーログをGoogleで検索していた時間を、AIが直接解決策を考える時間に変えることができます。
人間はAIが提示する修正内容を確認し、「それでOK、直して」と答えるだけでデバッグが完了します。
原因特定からコード修正までを自律的に行うステップ
AIが原因を特定したら、次は実際のコードを書き換える番です。Claude Codeは、修正が必要なファイルを開き、ピンポイントでコードを直して保存します。
修正が終わると、AIは「もう一度テストを回しますか？」と聞いてきます。
「はい」と答えれば、修正が正しかったかをその場で再確認してくれます。
- テストを実行し、エラーが発生する
- AIがログとソースコードを照合する
- AIが修正案を提示し、ファイルを書き換える
- 再度テストを実行し、成功を確認する
この「自律的なデバッグ」が、開発効率を飛躍的に高めます。
人間はデバッグのストレスから解放され、より創造的な開発作業に集中できるようになるのです。
既存の機能を壊していないかを確認する回帰テストの運用
新しいテストを追加したときに、古いテストが動かなくなってしまうことがあります。これを「デグレード（先祖返り）」と呼びます。
Claude Codeに「今回追加したテストだけでなく、全件のテストを通して」と指示することで、システム全体の安全性を確認できます。
AIは大量のテストを黙々と実行し、一箇所でもおかしな点があればすぐに報告してくれます。
開発が進むにつれて、テストの数は増えていきます。
そのすべてを手動で管理するのは大変ですが、AIという「24時間働く番人」がいれば、常にシステムが正しい状態にあることを保証できます。
「修正した場所とは関係ないところが壊れている」という、気づきにくいミスもAIなら見逃しません。
自作したテストコードを長く使い続けるメンテナンス術
Webアプリは日々進化します。機能が変われば、当然テストコードも古くなり、そのままではエラーになってしまいます。テストを「使い捨て」にせず、資産として長く使い続けるためには、継続的なメンテナンスが必要です。
ここでは、AIを使ってテストコードを最新の状態に保つためのコツを紹介します。UIが変わっても慌てず、最小限の工数でテストを追従させるための具体的なアクションをまとめました。
UIの変更をAIに検知させてテストを追従させる
ボタンのデザインや配置、あるいは文言が変わっただけで、E2Eテストは止まってしまいます。そんなときは、Claude Codeに最新のUIコードを読み込ませて、「今の画面に合わせてテストを直して」と指示しましょう。
AIは「以前は『購入』ボタンだったのが、『カートに入れる』に変わったんだな」と変更点を理解し、テストコード内のセレクタを自動で書き換えます。
人間が一つずつコードを修正して回る必要はありません。
開発のスピードが速いプロジェクトほど、このメンテナンス自動化の恩恵は大きくなります。
UIの変更を恐れずに、どんどんアプリを改善していく攻めの姿勢が持てるようになります。
重複したテストコードを整理してDRY原則を保つ
テストが増えてくると、似たような操作（ログイン処理など）が複数のファイルに散らばってしまいます。これを放置すると、ログインの仕様が変わったときに、すべてのテストファイルを直さなければならず大変です。
Claude Codeに「共通化できる処理を探して、一つの部品にまとめて」と依頼してみましょう。
AIは「共通のヘルパー関数」を作成し、各テストファイルからそれを呼び出すように整理してくれます。
コードの世界には「DRY（Don’t Repeat Yourself：同じことを繰り返さない）」という原則がありますが、これはテストコードでも同じです。
整理整頓されたテストコードは読みやすく、将来の修正も楽になります。
AIに定期的な「大掃除」を任せることで、テストコードがスパゲッティ状態になるのを防げます。
テストデータの管理やモック（Mock）の作成を効率化する
テストを動かすためには、本物のデータベースを汚さないための「テスト用の偽データ」が必要になることがあります。このデータ作成も、AIの得意分野です。
「テスト用のユーザー情報を10人分作って」「サーバーからの返答を疑似的に再現して（モック）」といった要望を伝えましょう。
AIはテストに必要なデータの形を理解し、Playwrightの機能を使って通信を乗っ取るコードを生成します。
メンテナンスで意識したい3つのポイント
- UI変更時はAIに「差分」を教える
- 共通処理は積極的に関数化させる
- 複雑なデータ作成はAIに任せる
これらを意識するだけで、E2Eテストは「面倒な作業」から「頼もしい武器」へと変わります。
AIにメンテナンスを任せれば、テストが重荷になることはありません。
安全に導入するために！コストとセキュリティの管理
Claude Codeは非常に強力なツールですが、APIを介して動く有料のサービスであるため、使いかたを誤ると想定外の出費を招く心配があります。また、ソースコードを扱う以上、セキュリティへの配慮も欠かせません。
この章では、AIエージェントを現場に導入する際に守るべきルールや、賢い節約術について解説します。安心して長く使い続けるための「ガードレール」を正しく設定しましょう。
解析範囲を絞ってAPIトークンの消費を抑える設定
Claude Codeとのやり取りは、やり取りした文字数（トークン）に応じて料金が発生します。大規模なプロジェクトで「全ファイルを毎回読んで」と指示すると、あっという間に料金が膨らんでしまいます。
「今日は src/pages/login ディレクトリだけを見て」といった具合に、AIの視界を制限してあげることが節約のコツです。
範囲を絞ることで、AIの思考もシャープになり、回答の精度が上がるというメリットもあります。
お金をかけてAIに無駄な計算をさせるのはもったいないことです。
必要な情報だけをピンポイントで与える「引き算の指示」を心がけましょう。
これは単なる節約術ではなく、AIを賢く使いこなすためのエンジニアリングスキルでもあります。
.claudeignoreで機密情報をスキャン対象から外す
あなたのプロジェクトには、パスワードやAPIキーなどの機密情報が含まれているかもしれません。これらをうっかりAIに送信してしまわないよう、除外設定を徹底しましょう。
プロジェクトのルートに .claudeignore というファイルを作り、AIに見てほしくないディレクトリやファイルを指定します。
これはGitの .gitignore と同じ考え方です。
除外すべきファイルの例
- 環境変数ファイル（.env）
- 秘密鍵や証明書
- 巨大な画像や動画データ
- ライブラリ本体（node_modules）
「見せる必要のないものは見せない」のがセキュリティの鉄則です。
適切にガードレールを敷くことで、社外秘のプロジェクトであっても、安全にAIの知能を借りることが可能になります。
実行前に必ずコマンドの確認を行う運用ルール
Claude Codeは、あなたの代わりにファイルを消したり、プログラムを実行したりできます。便利ですが、AIの勘違いによって大切なファイルを壊されてしまうリスクもゼロではありません。
幸い、Claude Codeはデフォルトで、コマンドを実行する前に「これを実行してもいいですか？」と人間に許可を求めます。
この確認を「はいはい」と適当に流さず、一目通す習慣をつけてください。
「なぜこのファイルを消す必要があるのか？」と疑問に思ったら、その場でAIに質問してみましょう。
AIとの対話を疎かにしないことが、思わぬ事故を防ぐ最大の防御策になります。
AIはあなたの部下であり、最終的な判断を下すのは「上司」であるあなた自身であることを忘れないでください。
他のAIツールと使い分けて効率をさらに上げる
世の中にはGitHub CopilotやCursorなど、優れたAIツールが他にもたくさんあります。Claude Codeはこれらを置き換えるものではなく、状況に合わせて使い分けることで真価を発揮します。
最後の章では、複数のAIツールをどのように組み合わせるのが最強のワークフローなのかを考えます。2026年現在のエンジニアにとって、最適解と言える使い分けの基準を見ていきましょう。
行単位の補完ツールとCLIエージェントの役割分担
GitHub Copilotのような「エディタ内補完ツール」は、あなたがコードを書いている横で、サッと続きを提案してくれるリズムの良さが魅力です。一行や数行のコードを素早く書きたい時には最適です。
一方で、今回紹介したClaude Codeのような「CLIエージェント」は、プロジェクト全体を見渡した大規模な修正や、テストの自動実行に向いています。
例えるなら、Copilotは「高性能なペン」であり、Claude Codeは「自走する助手」です。
コードをガリガリ書いているときはCopilotを、テスト環境を一気に作りたい時や、複雑なエラーを解決したい時はClaude Codeを、という風に切り替えましょう。
二つのツールを使い分けることで、ミクロな視点とマクロな視点の両方から開発を加速させることができます。
ブラウザ版ClaudeとClaude Codeを使い分ける判断基準
「ブラウザ版のClaudeがあるなら、それでいいのでは？」と思うかもしれません。ブラウザ版の強みは、長いドキュメントをじっくり読み込ませて議論したり、UIのデザイン案を一緒に練ったりといった、コード以外の「思考の深掘り」にあります。
使い分けの判断基準はシンプルです。
- Claude Code：今すぐファイルを直してほしい、テストを回してほしい
- ブラウザ版Claude：新しい機能のアイデア出しをしたい、仕様書を書いてほしい
実際の作業に直結するタスクはターミナルのClaude Codeへ、じっくり考えを整理したいフェーズはブラウザ版へ。
このように棲み分けをすることで、脳の疲れを最小限に抑えつつ、最高のアウトプットを出すことができます。
チーム開発におけるAIツールの統合ワークフロー
チームで開発している場合、自分一人がAIを使いこなすだけでなく、その成果をどう共有するかが重要になります。Claude Codeが生成したテストコードは、必ず人間がレビュー（確認）した上で、チームの共有ブランチへプッシュしましょう。
AIが書いたコミットメッセージは、そのまま使うのではなく、自分たちのチームの規約に合わせて微調整するのも良い方法です。
AIはあなたの作業を加速させますが、チームの文化や「こだわり」を守るのは人間の役割です。
理想的なワークフロー
- ブラウザ版でテスト戦略を練る
- Claude CodeでPlaywrightを設定・実装する
- Copilotで細かなテストケースを微調整する
- 人間がレビューし、プロジェクトに反映する
この流れを作ることで、品質を落とさずに、開発スピードだけを劇的に上げることが可能になります。
まとめ：AIを味方につけてテストの苦痛から解放されよう
PlaywrightによるE2Eテストの導入は、以前はエンジニアにとって重い腰を上げる必要があるタスクでした。しかし、Claude Codeという強力なエージェントの登場により、そのハードルは驚くほど低くなっています。
要点を振り返ります。
- 設定は丸投げ：複雑なPlaywrightの環境構築はAIに任せて数分で終わらせる。
- 自走するテスト：実際のコードをAIに読ませてテストを自作し、修正まで自動で行う。
- 賢く管理：コストとセキュリティに配慮しつつ、他のAIツールと使い分ける。
テストがある安心感は、あなたの開発をより自由に、より大胆に変えてくれるはずです。
まずは今日、あなたのプロジェクトの中で「一番壊れたら困る画面」のテストを1つだけ、Claude Codeに作らせてみることから始めてみてください。
