はじめに
Playwright MCPが出てきて、GitHub Copilotなどに読ませて、ブラウザ操作等を行えると聞いて、これは、自動テストツールにできるのでは？と思い、やってみました。
調べてみるとすでに実施されている方がいたので、以下を参考に作成しています。感謝！
構成
非常に単純な作りです。agentからtoolsを呼び出して、終了するまで続ける形。
できたもの
ユーザーがクエリとして、操作内容を記載すると、それに対応するスクリーンショットを取得して、画面上に出してくれます。
ためしに以下のクエリで試してみました。
https://google.co.jpにアクセスしてスクリーンショットを取得、
Googleと入力してスクリーンショットを取得、
Enterキーで検索してスクリーンショットを取得してください。
3アクション程度でも10秒くらいかかります。ほとんどはAIリクエスト時間ですね。
POSTでのフォーム送信などができるのか、
Mdn Web docsさんのサンプルフォームを利用して確かめてみます。
シナリオは以下です。
1.https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.htmlにアクセスしてスクリーンショットを取得。
2.Nameに「テスト」を入力。
3.E-mailに「sample@example.com」を入力
4.Messageに「test1」を入力してスクリーンショットを取得。
5.Send your messageのボタンを押してスクリーンショットを取得
なお、このサイトでは、POSTが許可されていないので405エラーが表示されます
うまくいっています。なお、gpt-4.1-miniだと、正しく項目の場所を選べず、
E-mailに「テストsample@example.com」と書いてしまうようです。
gpt-4.1でもリクエストを操作ごとに区切らないと間違えるようです。
ポイント
キャプチャをシステムメッセージに組み込めなかったので、ユーザクエリに必ず「スクリーンショットを取得」と書いて、何とかしています。
また、gpt-4.1-nanoだとスクリーンショット取得を飛ばしたりするので、gpt-4.1-mini以上が必須、正しく操作させるためにはgpt-4.1以上が必要そうです。（gemini-2.0-flashでも試してみましたが、gpt-4.1-miniと同様の結果になっています。）
キャプチャがリクエストトークン数を圧迫するので、スクリーンショットを取得した後はキャプチャデータをリクエストから削除して、トークン数増加を抑えています。
（とはいえ、数アクションが限界で、10アクションくらいになるとレスポンスが数十秒帰ってこないので、もっとトークン数を減らさないと実用には足らないように思います。）
ソースコード
ソースコードはこちらです。