YouTube video by Playwright

はじめに みなさんはE2Eテストをご存じでしょうか？EndtoEndテストの略称であり、ブラウザ上でのシステム全体の動作を確認するためのテスト手法です。E2Eテストを自動化するためのツールとして、PlayWrightが注目されています。PlayWrightは、Webブラウザの操作を自動化するためのライブラリです。E2Eテストに限った話ではありませんが、テストの保守という観点では下記が課題になりがちです。 E2Eテストの文化を馴染めせるために、PlayWrightの使い方をチームで習得する必要がある。 デプロイによって画面の挙動が変更された際にも、テストを持続的に更新していく必要がある。(テストコードを腐らせない) 「自然言語でブラウザを自動操作して証跡を残すワークフロー」が実現できれば、上記課題の解決の一助になるかと考えます。ということで、本日は生成AIを活用して、自然言語でブラウザ操作してみます。 実現したいこと 自然言語でPlayWrightを操作する CICDパイプラインを構成する前提で、AWS Lambda等のサーバレス環境で実行できる環境を作成する。 対象読者 小規模のプロダクトを扱っていてE2Eテストを未導入だが、今後導入を検討している方 最近見聞きするMCP(ModelContextProtocol)を使ってみたい方 生成AIとMCP運用をAWS環境にまとめることで、請求一本化したい方 構成図 Lambda上にすべてのリソースを立てます。Lambda内に立てたMCPサーバーからPlayWrightの使い方を習得したMCPクライアントはBedrockのモデルを用いてタスクを完遂します。今回はPlayWrightを動かすので、Lambda内にインストールしたブラウザを用いてタスクを実行します。また今回は事後処理として、MCPクライアントによる処理が完了したあとに指定のフォルダ配下の画像ファイルをS3にアップロードする処理を加えています。 MCPについて Model Context Protocolの略称であり、生成AIが各種APIやツールを理解できるようにするための規格です。AIエージェントがツールを理解することで、AIエージェント自身で作業を実行できる点がMCPの魅力だと思ってます。誰かにメールを送る作業を今までは人間がメールアプリを開いて操作していましたが、MCPサーバーとAIエージェントがあれば、自然言語の指示を入れるだけでAIエージェントが完遂してくれるようなイメージです。MCPサーバーがどんどん普及して、あらゆる定型作業が減ると嬉しいですね。 より丁寧に解説している記事が大変勉強になりますので、紹介させていただきます。MCPの基礎とUbieにおける活用事例 /ubie-mcやさしいMCP入門 Amazon StrandsAgentsについて BedrockではもともとAIエージェント開発機能が具備されていましたが、さらに簡潔に作成できるようにしたSDKです。2025年4月に登場しており、まだまだ文献が少ないですが今後利用が拡大していくと予想しています。MCPサーバーとの接続にも対応しており、Streamable HTTP トランスポート方式のMCPサーバーとの接続も可能です。今回はLambda内にローカルのMCPサーバーをホストしていますが、外部にMCPサーバーを立ててHTTPエンドポイント経由で接続したいケースのときには役に立ってくれると思います。Strands Agents SDK 対応可能なMCPサーバー一覧 著名なサービスにおけるMCPサーバーの作り方をまとめたGithubリポジトリがあります。今回はmicrosoftが提供するplaywright/MCPを選択しましたが、ぜひ読者の皆様のご要望に合うMCPサーバーがないか探してみてください。modelcontextprotocol/servers コールバック処理について "モデルの出力を整理中なのか","Toolの選定中なのか","ライフサイクルのイベントが変更になったのか"等のAIエージェントの現在の状況に応じて、実行したい関数を任意に設定できます。例えば「モデルの出力は一部のみをロギングしたい」等の要望がある際に、カスタムコールバックハンドラを設定することで対応が可能になります。Callbacks Handler #################################################### # おまけ　カスタムコールバックハンドラーを定義する #################################################### # タスク終了時に実行したいコールバックハンドラーを定義 class OriginalHandler: def __call__(self, **kwargs): try: # 1チャンクごとに data が来る if "data" in kwargs: logger.info(kwargs["data"].rstrip("\n")) # 動作終了時に(最終チャンク)hogehogeを実行したい if kwargs.get("complete"): logger.info(">>") ########### ここで任意の処理を実行する ########### except Exception as e: # コールバック例外で処理が止まらないようにする logger.exception("Callback error: %s", e) # 標準で用意されているPrintingハンドラとカスタムハンドラ を合成 # これをAgent呼び出しする際の引数として設定する。Agent(callback_handler=handler) handler = CompositeCallbackHandler( PrintingCallbackHandler(), OriginalHandler() ) …