AIでWebサイトのボタンとフォームを確認する
Playwright MCPで一つの操作を確認します。テストURLと期待結果を準備し、依頼文を使って部品・入力値・完了状態を検証します。
Playwright MCPから始める
ボタン、フォーム、操作後のページ変化を確認したい場合に選びます。構造化したページ情報を渡し、アシスタントが順番に操作できます。
MCPはアシスタントとツールの接続方法で、対応アシスタントが必要です。検索語を入れる、検索する、結果を見るなど、一つのページの短い操作を選びます。
始める前に準備するもの
パスワードやキーを当サイトに送らず、自分のアシスタントとブラウザーでログイン・接続します。
- 自分で管理するテストURL。ローカルのプロジェクトは先に起動し、ブラウザーで開けるようにします。
- 操作順、テストデータ、期待結果。ログインが必要ならテストアカウントを自分のブラウザーで準備します。
- アシスタントの公式手順で接続します。これらのツールをPCで動かす環境であるNode.js 18以降が必要です。ブラウザー不足時は公式案内で準備します。
最初の依頼文をコピーする
Playwright MCPで[テストURL]を確認してください。タイトルを確かめ、[ボタン名]を押し、[項目名]に[テスト値]を入れて[期待結果]を確認します。テストデータを使い、実メッセージ送信・決済・本番データ変更の前で止めてください。各実結果、失敗時のURLと画像、未実行手順を記録してください。完了をどう確認する？
- ツール記録で指定URLを開いたことと、ページタイトル、テストアカウントを確認します。
- ページ、入力値、エラー、完了状態を期待と比較します。画像を補助証拠にし、成功という回答だけに頼らないでください。
- 失敗の再現手順と未実行項目を分けて記録します。ツールを切り替える際は同じ失敗を再現してからエラーや通信を調べます。
実例
Chrome DevTools MCPへ切り替える場面は？
再現するエラーや遅い読み込みを調べる場合に選びます。ネットワーク要求、コンソール、性能記録を確認できます。コンソールはページ実行中のエラーやメッセージが出る場所です。
両方ともページを操作できます。必要な調査情報のために切り替え、ボタンやフォーム確認だけで最初から両方を用意する必要はありません。
Node.js LTS、npm、Chromeの要件を確認します。npmはNode.jsツールを導入するコマンドです。
出典と次の作業
出典確認日：2026-10-13。依頼文は公式文書に基づくテンプレートで、実行済みの証拠ではありません。得られた記録で修正箇所を判断します。