2026年5月19日に、「開発効率をアップする！ Claude Code 実用入門」 が発売されます（すでに先行販売で、並んでいる書店さんもあります）。
Claude Codeのメリットとして、すぐに思いつくのが 「コーディング」 。
僕は、それに加えて、 「テストの自動化」 も、大きなメリットであると考えています。
そうした理由から、この本では、CHAP7とCHAP8で、テストについて語っています。なかでもCHAP8では、「Playwright MCPを使って、ブラウザテストを実施する方法」 を説明しています。
この章で説明している方法を使うことで、よくあるSIerのお仕事である 「正しく動作するかどうかをブラウザで実際に操作して、そのスクリーンショットをExcelシートに貼り付けて、証跡として提出する」 という作業の自動化ができます！ スゴイでしょ！？
［Amazonはこちら］https://www.amazon.co.jp/o/ASIN/4839990204/mynavibooks-22/
▲Claude Codeに自動で作らせたテストケースの例
▲Clude Codeに作らせたテストケースを、スクリーンショットの証跡付きで実施した結果の例
PlaywrightとPlaywright MCP
Playwrightは、マイクロソフト社が作ったブラウザの自動操縦ツールです。ブラウザテスト（E2Eテスト）を目的としており、Node.js環境で動きます。
自動操縦できるのは、Chromium／Chrome／Firefox／WebKit（Safari系のエンジン）などの主要なブラウザです。本記事の構成では、Playwright MCPがデフォルトで利用するChrome系のブラウザを前提に解説します。
ブラウザそのものを操作するので、 ①JavaScriptを使った動的なページも操作できる、②画面キャプチャも撮れる、 のが特徴です。ですから冒頭で提示したような、「スクリーンショットを含めたPDF」を作れるわけです。
Playwrightは、元来、JavaScript（TypeScript）やPythonなどから、自動テストを実現するために生まれたライブラリです。それがPlaywright MCPというMCPツールによって、Claude Codeのような生成AIから自然言語でブラウザを操作できるようになったのです。
※MCP（Model Context Protocol）とは、Claude Codeをはじめとした生成AIから外部ツールを呼び出すための規格（https://modelcontextprotocol.io/）。
▲Claude CodeとPlaywright MCPの接続構成
DevContainer環境でPlaywrightを実行する3つの方法
さて、この書籍では一貫して、Claude Codeを 「隔離したコンテナ環境で動かす」 ことを推しています。①安全性のため、②Linux環境のツールが使えるため、というのが理由です（コンテナを強く推す理由については、別の記事でも触れました）。
DevContainer環境でPlaywrightを実行するには、主に3つの方法があります。それぞれ特徴があるのですが、ここでは、書籍でも紹介している①の方法を解説します（②と③については、改めて、別の記事で紹介予定です）。
①DevContainer環境内でPlaywrightをインストールする
いちばん素直な方法です。コンテナの中にPlaywrightとLinux版Chromeをインストールします。つまり、全部インストールします。
構成は簡単ですが、DevContainer環境は画面構成（グラフィックライブラリ）の問題から、Chromeのインストールや設定で、少し戸惑うことがあります。
▲DevContainerに全部インストール
②別のブラウザ専用コンテナを使う
Chromeだけ入れた別コンテナを立ち上げ、Playwright MCPからそこに接続します。Claude Codeに左右されないブラウザ環境を作れます。さまざまなプロジェクトで、同じブラウザ環境でテストしたいときに便利です。
自分でコンテナイメージを作ることもできますが、マイクロソフトのPlaywrightのDockerイメージ（ https://hub.docker.com/r/microsoft/playwright ）には、chromiumブラウザ一式が入っているので、これを使うのが簡単です。
▲ブラウザを別のコンテナにする
③ホストPCのChromeを使う
DevContainer内のPlaywright MCPから、ホストPC上で起動しているChromeを操作します。ふだん使っているのと同じブラウザ環境でテストできるのが特徴です。つまり、WindowsやMacOSなどOS上のブラウザで、テストできます。
※この方法をとるときは、別のテスト専用プロファイルを作るなどして、ふだん自分が使っているのとは別のブラウザプロファイルで実行するのが、セキュリティ上、望ましいです。
▲ホストPCのChromeで操作する
DevContainer環境内にPlaywrightとChromeをインストール
先ほどの図に示したように、Playwright MCPは、デフォルトでは、Chrome系のブラウザを呼び出します。
DevContainer環境で使う場合、これはLinux版のChromeブラウザに相当します。ブラウザですから、「画面」が必要です。そのため、WindowsのWSL2環境の場合は、グラフィックに依存するライブラリが必要など、正しく設定すれば動くけれども、少し調整が必要でした。
実際、書籍の執筆中は、うまく動かないことがあり、動かないときは、Claude Codeに対して、「うまく動かないから直してください」とプロンプトを入力して、Claude Codeに直させる方法を紹介しています。
しかし、本書の発刊に当たり、数日前に改めて確認したところ、Playwright MCPがアップデートされたのか、下記の方法でうまく動くようになっていました。
※以下では、WindowsのWSl2環境にて、Docker Desktopを使用。Ubuntu 24.04コンテナを想定しています。
【手順】 DevContainer環境内でPlaywrightをインストールして使う
［1］ Node.js/npmをインストールする
Playwrightは、Node.js製なので、まず、Node.jsをインストールします。
$ sudo apt update
$ sudo apt install -y nodejs npm
［2］Playwrightをインストールする
続いて、Playwright本体をインストールします。
$ sudo npm install -g @playwright/mcp@latest
［3］Chromeをインストールする
Chromeは、Playwrightを初回実行するときに自動でインストールされますが、煩雑です。またClaude Codeから実行したときに、そこで停止してうまく動かない要因にもなりがちです。
そこで、初回実行時の自動インストールを期待せず、あらかじめインストールしておきます。
$ sudo npx playwright install chrome
［4］ フォントをインストールする
スクリーンショットをとりたいのであれば、日本語フォントがないと、豆腐（文字化け）になります。そこで、日本語フォントをインストールしておきます。
$ sudo apt-get install -y fonts-noto-cjk fonts-noto-cjk-extra
［5］ Playwright MCPの設定を書く
Claude Codeの設定に、Playwright MCPの設定を記述します。「--headless」は、画面を表示しない ヘッドレスモード で起動することを示します。
$ claude mcp add playwright -- npx @playwright/mcp@latest --headless
これによって、Claude CodeのMCPの設定にPlaywright MCPが追加されます。この時点では、まだインストールされません（設定ファイルの変更のみ。具体的には、VSCodeのDevContainer環境であれば、/home/vscode/.claude.jsonに書き込まれます）。
設定が変更されたかどうかは、Claude Codeを実行したあと、「/mcp」コマンドで確認できます。
❯ /mcp
Manage MCP servers
XX servers
Local MCPs (/home/vscode/.claude.json [project: /workspaces/playwrite_test])
❯ playwright · ✔ connected
以上で、Playwright MCPが使えるようになります。Playwright MCP自体は、はじめて必要とするときに、インストールされます。
ブラウザテストしてみよう
インストールが終わったら、動作確認してみましょう。
たとえば、「UI Test Automation Playgroud（ http://uitestingplayground.com/ ）」は、ブラウザの自動テストをするのにもってこいのプレイグラウンドサイトです（ https://github.com/inflectra/ui-test-automation-playground ）。
たくさんのページがありますが、たとえば、「Sample App」（ http://uitestingplayground.com/sampleapp ）というページで試してみます。ここには、「ユーザー名」と「パスワード」を入力する欄があります。
▲Sample Appのページ（ユーザー名とパスワードを入れてログインするだけのシンプルな画面）
ユーザー名は任意で、パスワードは「pwd」をクリックするとログインできるそうです。そこで、Claude Codeに対して、次のように指示してみましょう。
Playwrightを使ってプログラミングするのなら、「どのDOMに、何を入れて」というように指示をしないといけないのですが、Claude Codeなら、 「ユーザー名に○○、パスワードに○○と入れてログイン」 とだけで指示できるのが、素晴らしいですね！
Playground MCPを使ったブラウザテストをしたいです。スクリーンキャプチャの証跡をとって。
ブラウザの画面は800×600でよろ。
サイトは、http://uitestingplayground.com/sampleapp
1. アクセスし、その画面を「01.png」としてキャプチャ
2. ユーザー名に「example」、パスワードに「mypassword」と入力してログイン。ログイン後の画面を「02.png」としてキャプチャ
3. ユーザー名に「example」、パスワードに「pwd」と入力してログイン。ログイン後の画面を「03.png」としてキャプチャ
このプロンプトによって、実際に01.png、02.png、03.pngというスクリーンショットが得られます。Claude Codeが作業中のメッセージは、たとえば、以下の通りです。
● ブラウザをリサイズしてサイトにアクセスします。
Called playwright 4 times (ctrl+o to expand)
● 01.png キャプチャ完了。次にユーザー名「example」、パスワード「mypassword」でログインを試みます。 Called playwright 4 times (ctrl+o to expand)
● 02.png キャプチャ完了。「Invalid username/password」と表示されています。次に正しいパスワード「pwd」でログインします。
Called playwright 4 times (ctrl+o to expand)
● 3つのキャプチャをすべて取得しました。 - 01.png: 初期表示「User logged out.」 - 02.png: mypasswordでログイン失敗「Invalid username/password」 - 03.png: pwdでログイン成功「Welcome, example!」
✻ Worked for 59s
▲01.png：初期表示「User logged out.」
▲02.png：mypasswordでログイン失敗「Invalid username/password」
▲03.png：pwdでログイン成功「Welcome, example!」
これを応用して、 「テストそのものをClaude Codeに考えさせる」 とか 「エラーが出たかを判定してPDFにレポートとしてまとめる」 とかは、プロンプト次第でどうにでも作れますよね！ その実例については、書籍で詳しく書いています。
CLAUDE.mdに書こう
ところでPlaywrightを使ってテストするときは、先にも示したように、
Playwrightを使って
のように、アクセスにPlaywrightを使うことを明示したり（しないときは、Claude Code内蔵のWeb読み込みツールが使われることもある）、
800x600でよろ
のように、ブラウザの画面解像度の設定が必要です。
これらは、もちろん、都度、入力するのは煩雑なので、CLAUDE.mdに対して、
Webコンテンツにアクセスするときは、Playwright MCPを使う。解像度は、800x600。
とでも書いておけば、都度の入力を省略できます。
Bot検出に注意
Playwright MCPを使い始めると、 「Bot検出（reCAPTCHA等）」 に引っかかることがあります。
たとえばClaude Codeに対して、次のような「Googleで検索する」というプロンプトを与えてみます。
Playwrightを使って、Googleにアクセス。その画面をbefore.pngとして保存。
その後、「qiita」で検索し、結果をafter.pngとして保存。ブラウザの画面は、1024×768でよろ
Googleトップは普通に表示されますが（before.png）、検索しようとした瞬間、Googleが 「あなたはロボットではありませんか？」 という、いわゆる reCAPTCHAページ を返してきます。
Claude Codeの作業ログにも、そのことが残ります。
● Googleがbot検出ページを表示しました。直接検索URLに移動してみます。
Called playwright (ctrl+o to expand)
● GoogleがreCAPTCHA(bot検出ページ)を表示してしまいました。
現状のページをafter.pngとして保存し、状況を報告します。
Listed 1 directory, called playwright (ctrl+o to expand)
▲reCAPTCHAページで引っかかった例
これは、Playwrightが起動するChromeは 、「自動化されている」と分かる素振り をしているからです。具体的には、たとえばJavaScriptから「navigator.webdriver」というプロパティを参照すると true になっていたり、ヘッドレスモードの場合は User-Agent に「HeadlessChrome」という文字列が入っていたりします。Googleなどの一部サービスは、こうした手がかりから、「Botらしきアクセス」を判定し、reCAPTCHAを挟みます。
完全に回避するのは、サービス側がそれを取り締まる立場なので難しいですが、次のような工夫をすることで、引っかかりにくくできます。
-
--headlessを外して、画面ありで起動する ヘッドレスモードのほうがBotとして検知されやすいです。GUI付きで動かせる環境なら、画面ありで動かすと引っかかりにくいです。 -
「ホストPCのChromeを使う」を選ぶ ふだん使っているChromeをそのまま操作するので、ふつうのユーザーアクセスとの区別がつきにくくなり、引っかかりにくくなります
-
--user-data-dirを指定して、Cookieやログイン状態を引き継ぐ Playwright MCPの起動オプションに加えると、毎回まっさらなブラウザではなく、認証済みのプロファイルを使えるので、「まっさらに不自然らしさ」が消えます
このあたりは「Playwright MCPの限界」ではなく「Webスクレイピング一般の悩みどころ」です。自分が管理するのではないサイトにブラウザアクセスするときは、注意してください。