Claude Code×ChromeでUIテストを自動化する方法｜手順と指示例

「AIに実装させたあと、画面を開いて確認するのは結局人の仕事になっている」という悩みは、AI駆動開発を始めるとすぐにぶつかります。この記事では、Claude CodeとClaude in Chromeを連携して、画面の確認（UIテスト）までAIに任せる方法を、スエキチシステムのサイトのお問い合わせフォームを例に紹介します。

連携の基本的な機能は、Zennの記事「「Claude in Chrome」と「Claude Code」の連携を試してみた」が分かりやすくまとめています。本記事はそれを参考に、UIテストとして毎回回せる形にするまでに絞って解説します。

Claude in Chromeとは？Claude Codeと連携すると何ができるのか？

Claude in Chromeは、Claudeがブラウザを見て、クリック・入力・スクロールなどの操作ができるChromeの拡張機能です。Claude Codeと連携すると、ターミナルから指示するだけで、Claudeがローカルの開発サーバーを開いて動作を確認し、問題があればそのままコードを直せます。

UIテストで使う主な機能は次のとおりです。

もうひとつの特徴は、普段使っているChromeのログイン状態をそのまま使えることです。社内システムや管理画面のように、ログインが必要な画面でも、テスト用の認証情報をスクリプトに書かずに確認できます。

PlaywrightなどのE2Eテストと何が違うのか？

違いは、決まった手順を正確に繰り返すか、画面を見て判断しながら進めるかです。どちらかを選ぶのではなく、役割を分けて使います。

スエキチシステムでは、実装したらまずClaude in Chromeで確認し、何度も確認することになった画面だけPlaywrightのテストにするという使い分けをしています。最初からすべての画面にテストコードを書くより、手間をかけずに確認の抜けを減らせます。

Claude CodeとClaude in Chromeを連携する方法は？

連携は、拡張機能を入れて、Claude Codeを --chrome 付きで起動するだけです。公式ドキュメント（Use Claude Code with Chrome）に沿って進めます。

事前に必要なもの

• Google Chrome または Microsoft Edge（Brave・ArcなどのChromium系ブラウザも可）
• Chrome ウェブストアの「Claude」拡張機能（バージョン1.0.36以降）
• Claude Code
• Pro・Max・Team・Enterprise のいずれかのプラン

Claude Codeには「/login」でサインインしておきます。APIキーでの認証や、WSLからの利用ではChrome連携が有効になりません。

手順

1. Chromeに拡張機能をインストールし、Claude Codeと同じアカウント・同じ組織でサインインする
2. ターミナルで、Chrome連携を有効にしてClaude Codeを起動する
3. 初回だけ表示される説明の画面で Enter を押す
4. 「/chrome」を実行し、「Status: Enabled」「Extension: Installed」と表示されることを確認する

claude --chrome

毎回 --chrome を付けたくない場合は、「/chrome」から「Enabled by default」を選びます。ただし、ブラウザ操作の道具が常に読み込まれるため、その分コンテキスト（AIが一度に扱える情報量）を消費します。普段はオフにして、テストするときだけ --chrome で起動するのがおすすめです。

UIテストを自動化する指示の書き方は？

テストの指示は、「開くURL」「操作」「期待する結果」「やってはいけないこと」の4つを書くと安定します。「フォームを確認して」だけでは、Claudeがどこまで操作してよいか分からず、確認の範囲が毎回変わってしまいます。

このサイトのお問い合わせフォーム（/contact）を例にします。このフォームは「入力 → 確認画面 → 送信」の3段階で、「確認画面へ」を押したときに入力チェックが走ります。

localhost:3000/contact を開いて、お問い合わせフォームの入力チェックをテストしてください。
 
## 操作と期待する結果
1. 何も入力せずに「確認画面へ」を押す
   → 会社名・担当者名・電話番号・メールアドレス・お問い合わせ種別・お問い合わせ内容の6項目にエラーが出る
2. メールアドレスに「test@example」と入れて「確認画面へ」を押す
   → 「正しいメールアドレス形式で入力してください」と出る
3. 電話番号に「092-abc」と入れて「確認画面へ」を押す
   → 「電話番号は数字とハイフン等で入力してください」と出る
4. 「個人」を選ぶ
   → 会社名の欄が「屋号（任意）」に変わり、空でもエラーにならない
5. 全項目を正しく入れて「確認画面へ」を押す
   → 「入力内容の確認」が表示され、入力した値がそのまま並んでいる
 
## やってはいけないこと
- 「送信する」ボタンは押さない
- テストの値は example.com のアドレスなど、架空のものだけを使う
 
## 報告
- 各手順の結果を「OK / NG」の表で報告する
- NGがあれば、原因になっているコードの場所と修正案を書く
- テスト中にコンソールエラーが出ていたら、あわせて報告する

ポイントは、送信や削除など取り消せない操作を「やってはいけないこと」として明記することです。お問い合わせフォームの送信は、実際にメールが飛んだりデータが登録されたりします。確認画面まで進めれば入力チェックのテストとしては十分です。

表示崩れの確認は、画面幅を指定して撮影させます。

localhost:3000/blog の記事一覧と、いちばん新しい記事のページを次の3つの幅で確認してください。
- 1280px（PC）
- 768px（タブレット）
- 375px（スマホ）
 
確認すること：
- 横スクロールが出ていないか
- 文字や画像が枠からはみ出していないか
- 目次や表が読める状態で表示されているか
 
問題があれば、どの幅のどの要素かを書き、CSSを修正してください。修正後は同じ確認をもう一度行ってください。

「修正後は同じ確認をもう一度」と書いておくと、直した結果をClaude自身が画面で確かめるところまで進みます。CSSの崩れはビルドや型チェックでは見つからないため、ここを任せられるのが大きな利点です。

テストを毎回同じ手順で回すには？

決まったテストは、Claude Codeのスキルとしてリポジトリに置いておくと、毎回同じ指示を書かずに済みます。スキルは .claude/skills/スキル名/SKILL.md に置いた指示書で、「/ui-test」のように呼び出せます。

---
name: ui-test
description: 開発サーバーで主要な画面のUIテストを行う。画面やフォームを変更したあとに使う。
---
 
1. 開発サーバーが起動していなければ `npm run dev` で起動する
2. 次の画面を開き、ページを開いたときのコンソールエラーを確認する
   - / （トップ）
   - /contact （お問い合わせ）
   - /blog （記事一覧）
3. /contact で入力チェックのテストを行う（手順は docs/ui-test-contact.md）
4. 1280px と 375px の幅で表示崩れがないかを確認する
5. 結果を「画面・確認項目・OK/NG」の表で報告する
 
禁止事項：「送信する」など、データを送る・消すボタンは押さない

さらに、プロジェクトの指示ファイル（CLAUDE.md）に「画面を変更したら、エラースキャンのあとに /ui-test を実行する」と書いておけば、実装 → Lint・型チェック・ビルド → 画面テストの流れが毎回そろいます。指示ファイルの考え方は「AI駆動開発とは？品質を落とさずに開発を速くする進め方」で紹介しています。

自動化でつまずきやすい点は？

いちばん多いのは、ブラウザとの接続が切れていて、テストが始まらないことです。実際にこの記事を書きながらテストを回そうとしたときも、Chromeの拡張機能が動いていない状態だったため、Claude Codeから次のエラーが返ってきました。

Browser extension is not connected. Please ensure the Claude browser extension is installed and running

公式ドキュメントで案内されている主な原因と対処は次のとおりです。

ほかにも、運用で気をつけている点があります。

• GIFや画面の撮影には、画面に映っているものがすべて残る：ログイン中の管理画面を記録すると、アカウント情報や顧客データが写り込みます。共有する前に必ず中身を確認します
• 本番環境ではテストしない：テストは開発サーバーか検証環境だけで行い、URLを指示に明記します
• 結果は人が最後に見る：Claudeが「OK」と報告しても、重要な画面は撮影された画像を人が確認します

まとめ

• Claude Codeを claude --chrome で起動すると、画面の確認・フォームの入力チェック・コンソールエラーの確認をAIに任せられる
• テストの指示は「開くURL」「操作」「期待する結果」「やってはいけないこと」の4つを書き、取り消せない操作は禁止しておく
• 繰り返すテストはスキルにして、実装・エラースキャン・画面テストを毎回同じ流れで回す

スエキチシステムでは、こうしたAIを使った開発とテストの進め方で、品質を保ちながら開発の手間を減らしています。開発体制へのAI導入や、テストの自動化でお困りの方は、AI導入支援からお気軽にご相談ください。