🐷
Playwright MCPとAIでe2eテストを効率化！実践と課題、そして未来

あつし
2025/07/03に公開
MicrosoftからPlaywright MCPが公開されました。
この記事はPlaywright MCPとAIコードエディタのCursorを使い、e2eテストの効率的な作成と管理を試行した記録です。
インターネット上にある類似の記事を斜め読みしてみると、「これ、本当にPlaywright MCP使ってる？」と感じるものが散見されましたので、より実践的で具体的な内容を記そうと思います。
…ので、これが正解でもなく、なんなら不正解かもしれませんが、何かの参考になれば幸いです。

 e2eはコストが高い私が参画しているプロダクト「たびさぽ統合予約」では、e2eテストの通過をリリース条件としています（プロダクトの説明については別稿『Geminiにプロダクトのインタビューをしてもらったら自己肯定感が上がった話』参照）。

POにテストシナリオ管理を委ね、開発チームはシナリオ通りの操作とチェック（アサーション）が通っていることを、動画付きテストレポートで提供します。


e2eテストはPlaywrightで実装しているのですが、シナリオと実装の乖離のリスクだけでなく、UI更新によるソース変更と、変更を想定したソース設計にコストがかかっています。

価値提供のスピードは緩めたくない、さらに品質管理もちゃんとやりたいとなると、e2eテストは開発リズムのボトルネックになりがちです。が、ステークホルダへの、「動いているものを見られる安心感」は大きく、欠かせない取り組みです。

 Playwright MCPが登場！さっそく使ってみたが、うまくいかない…そんな折、Playwright MCPがリリースされました。

これをAIエージェントと組み合わせれば、e2e実装コストを下げられるのでは…！と期待が膨らみ、さっそく使ってみました。なお、エディタはCursorを選びました。

（そのため、以下の内容はCursorでの操作に基づいています。）
しかし、どうもうまくいきません。Cursor設定はされているものの、AIエージェントが指示を考えすぎたり（「説明はいいから早くやれ！」と思ったり）、Playwright MCPが提供するtool（下記参照）が物足りなかったりと、期待している効果は得られませんした。

 良サンプルを発見！これなら行ける！そこで改めてインターネットを探したところ、こんなYouTubeチャンネルに遭遇しました。

Playwright MCP + Cursor IDE を使用したコード不要の BDD テスト 🚀 (驚き!)

この動画では、ExecuteAutomationが提供するMCP Serverの使用例が紹介されていました。

AIエージェントにGherkin記法で書かれたシナリオを読ませ、MCP Server Toolを使って操作させる、という段取りです。

ExecuteAutomation謹製のMCP Serverには、Playwrightのものを拡張し、よりテストしやすいtoolが用意されています。
さっそく、下記のようなシナリオ（例）を書いて、
  Scenario: Create a new inquiry
    Given I visit http://localhost:3000/contact-form
    When I click and fill in 'フリガナ' with "オオタニ"
    And I click and fill in '氏名' with "翔平"
    And I click and fill in 'メールアドレス' with "this.is.test@mail.address.com"
    And I click and fill in 'チェックイン日' with 6 months from today by "yyyy/mm/dd" and blur the input
    And I click '利用施設' and select "界 仙石原" and blur the input
    And I click '問い合わせカテゴリ' and select "食事" and blur the input
    And I click and fill in 'お問い合わせ内容' with '部屋を追加したいです' and current datetime by the format of "yyyy/mm/dd hh:mm:ss" as message text
    And I click "送信"
    Then I should see the message text in http://localhost:3000/messages
AIエージェントにはこんな指示をしました。詳細は下記で解説します。
Follow the instructions below by using MCP Server Tool configured by this IDE.

Close all browsers if they exist and clear browser session using MCP Server configured by  this IDE.
Read the attached .feature file instructions and execute all steps one by one using MCP Server configured by this IDE.
Read the attached .md file to reference the target component and lookup the signature to identify on execution.

Before the instruction above, create a folder with name of current datetime.
During the instructions above, take a screenshot on each line of instruction and output the image file having 'step-%03d' as prefix format under the created folder.  But when you see <<DO NOT TAKE SCREENSHOT>> on a line, then skip the screenshot on the line.
Finally, in the created directory, convert the image files to a movie with ffmpeg.

 実践のコツ
 指示は英語の方が楽私の要領が悪いだけかもしれませんが、AIエージェントの指示には細かい調整が必要です。何度もプロンプトを書き直しては実行し、アホな解釈と行動をしないよう調教しなければなりません。

この時、日本語入力は非常に手間がかかります。加齢のせいで指が痛くなります。カタコトでもよいので英語の方が楽です。

 AIエージェント(LLM)は絞った方がいいCursorは複数のModelを指定できます。しかし各々が指示を独自に解釈するし、Cursor側の都合でModelを変えているようなので、効率的ではありません。

例えばclaudeは言われたままに実行してくれて、私に指示の誤りを気づかせてくれる一方、gptは指示の理解と操作の確認を求めてきて面倒臭く、「その指示の結果は変わりません」と言って実行しないこともありました。このように複数のModelを設定すると、実行タイミングによって登場するModelが変わってしまい、同じ指示を繰り返すことがありました。

 実装は１行ずつ対話的にAIエージェントに上記指示を渡すと、MCP Serverが提供するtoolを使ってブラウザを起動し、指示内容を実行してくれます。

実行中は、任意のタイミングで操作を止めることができますので、操作が止まってしまった時などは、現在の画面を使って別の操作を指示したり、AIエージェントからMCP Serverへの指示内容と実行結果を確認できたりします。
＊AIエージェントがtoolを使っているときは下記の表示("Called MCP Tool"とtool名)があります。toolを利用していない場合もありますので、注意が必要です。さらに、使用するtoolのほか、"引数（下記画像ではselector,valueの部分）"も一定でない場合があります。

例えばclickの場合でも、evaluateをつかってjs実行する場合もあれば、playwright_clickを使う場合もあり、要素の指定方法も異なります。

 複雑なコンポーネントへの操作は困難例えばたび番号にXXXXと入力という指示をしたとき、AIエージェントは画面から対象の要素を頑張って探そうとします。placeholder属性値の走査や、対象のラベルの隣にあるinput要素など、見つけやすい場所にあれば見つかりますが、下記のような"匠の作り"では、期待の効果を得られません。

共通化されたUIがあるなど、コンポーネントのカスタマイズが困難なプロダクトでは絶望的です。
↑のような、ただのテキストボックスに対して、↓のような意図のわからない実装…
<div class="wjtwuxk _19s10e14">
  <div class="UIInputBox bewdyaj _1k4ormez _1k4ormek _2twyxa2 bewdyaz jmbupc5">
    
    <!-- ラベル部分 -->
    <div class="bewdyak">
      <label class="bewdyal" for="_vfc-node-1">たび番号</label>
    </div>
    
    <!-- 入力フィールド -->
    <div class="bewdyan">
      <div class="bewdyao">
        <div class="jmbupc6 bewdyap">
          <input class="jmbupc7" type="text" tabindex="0" autocomplete="off" spellcheck="false" value="" id="_vfc-node-1" />
          <div class="jmbupc8"></div>
        </div>
      </div>
    </div>
  </div>
  <!-- その他の装飾/エラーメッセージ領域？ -->
  <div class="wjtwuxl _19s10e15"></div>
</div>

 操作対象とlocatorの対照表を用意すると安定する例えばThen 請求金額に999999を入力のように指示をしたとき、請求金額の入力ボックスの特定方法が一定でない場合があります。

これは、前述のような、複雑なコンポーネントである場合のほか、類似や同名のコンポーネントがある場合に起こり、処理の遅延や操作の失敗を招きます。
指示内容を具体的にするなどの工夫も考えましたが、そうすると説明が冗長になりコストが上がります。

そこで下記のような対照表を作り（markdownなら、ヒトにもAIにもやさしい）、指示に含めました（先述の英文指示参照）。

これにより、AIエージェントは適宜この対照表を元にMCP Serverに指示を渡してくれるので、安定します。
＊多少いい加減な指定でも良さそう。xpathだと、うまくいかないかも・・・・

 動画は撮ってくれないが、スクショは撮ってくれるPlaywrightには、実行中の操作を録画してくれる機能がありますが、Playwright MCP Serverには、まだこの機能はありません。

しかしながら、ステークホルダへのe2e訴求に動画は欠かせません。

代わりに、スクリーンショットなら撮ってくれますので、「操作の都度、スクショ撮って。テストが終わったら結合して動画作って。」と指示をすることで、一連のスクショから動画を生成してくれます（先述の英文指示参照）。

 さいごに・・・何か書かないと締まらないので、Geminiに要約してもらいました：

Playwright MCPとAIコードエディタCursorでe2eテストの効率化を試みるも、AIエージェントの指示解釈やツール不足で最初は難航しました。

その後、ExecuteAutomationのMCP Serverを発見し、強化されたツールと英語での指示、ロケーター対照表の活用でテスト実行を安定化。

複雑なコンポーネント操作の課題は残るものの、対話的な実行とスクリーンショットからの動画生成で、e2eテストの効率化に希望を見出しました。