【QA】Playwright MCPはまるでQA専属のプログラマー【E2E自動テスト】

はじめに

自動テストの需要の高まりや社会情勢等により、近年、自動テストツールの料金が軒並み値上げされている気がする。
節約のために、OSS系のツール(Playwright、selenium)に乗り換えたくなってくるが、QAエンジニアにとって、コードベースの自動テストは敷居が高かったり、学習コストが高いので、なかなか踏み込みにくいのも現状だ。

こんな中で、
昨今流行りの「Playwright MCP」が、QAエンジニアととても相性が良さそうだったので、ちょっと紹介したい。

E2Eテストコードを生成してみる

やったこと

Playwright MCP × Gemini CLIを用いて、ステップ・バイ・ステップで、静的なPlaywrightコードを生成した。
ほぼすべてAIに書いてもらい、人間は10文字くらいしかコードを書いていない。

• 環境
  • Windows 11
  • VSCode
  • TypeScript
  • Gemini CLI（gemini-2.5-pro）
• テスト対象
  • 有志による自動テスト練習サイト「Hotel Planisphere」
    https://hotel-example-site.takeyaqa.dev/ja/

3種類のアプローチ

「AI×E2E自動テストツール」を考えたとき、思いつくのは次の3パターンだろう。

1. 自然言語で書いた指示を、実行のたびにAIが解釈し、動的にコードを生成
2. 自然言語で書いた指示をもとに、AIに静的なコードを生成してもらう
   1. 一括生成 → 必要な箇所を修正
   2. ステップバイステップで指示＆生成 → 必要な箇所を修正

AIが発達した世界で目指すのは「1」であるが、ハルシネーションを考えると、実際のQA現場でAIを信じ切るのは怖いと思う。
現実的には、操作の再現性が保証される「2」だろう。

事前に、「2-1(一括生成)」を試したところ、予想よりも良い感じのコードを出してくれたが、実行してみると、初っ端から要素認識できずにエラー落ちしたほか、存在しないURLが期待値になっていたりと、精度が微妙だった。
そのため、本ブログでは「2-2(ステップバイステップ)」を紹介する。

ステップ・バイ・ステップで指示し、生成してもらう

今回、生成するシナリオは、こんな感じのものである。

1. URLにアクセス
2. ログイン
3. 宿泊予約ページに遷移し、条件を指定
4. 予約確定

操作単位で指示を出すことができる

まず、前提として、Playwright MCPでは1ステップずつ分割して指示を出すことができた。
指示と指示の間でブラウザが勝手に終了したり、セッションが切れることもないので、実際の画面を見ながら、少しずつ指示を出すことができる。

最初に出した指示はこんな感じだ。

Playwright MCPによって開かれたブラウザウィンドウは、目的のURLに遷移した後も残存している。
そのため、続けて指示を出せる。

指示の曖昧さを吸収してUI操作してくれる

ログイン画面への遷移を指示すると、ちゃんと遷移してくれた。
「Hotel Planisphere」は、ウィンドウ幅が小さいとハンバーガーメニューからログイン導線を探す必要があるが、その情報を補完して8行目を記述してくれた。

指示ミスがあっても解釈してくれる

ログイン画面では、「メールアドレス」と「パスワード」を入力する必要があるが、敢えて「ID」と表現したところ、ID→メアドと解釈してくれたようである。

アサーションの方法も考えてくれる

ログイン完了したことを確認するため、「マイページ」が開かれていることを確認してもらった。
このとき、「見出し」とは一言も言っていないが、「見出しに対してアサーションすればよいだろう」と判断してくれたようだ。

記憶も辿ってくれる

ログインユーザーが正しいことを確認するため、先ほど入力したIDと一致していることを確認してもらった。
こんなハイコンテクストな指示でも、ちゃんと解釈してくれるようだ。

異常操作をしたら、すぐに修正できる

宿泊予約画面に遷移してもらった後(割愛)、予約条件を入力してもらった。
ここで、AIがミスを犯す。
宿泊日は「YYYY/MM/DD」形式だが、「YYYY-MM-DD」で入力してしまい、バリデーションエラーになったようだ。
そんなときは、ブラウザを直接操作して初期値に戻した後、「コードの破棄」を命じると、問題の箇所だけ消去してくれた。

ハイコンテクストな修正指示を理解してくれる

QA目線で言えば、宿泊日はカレンダーなので、テキスト入力ではなくUI操作で日付指定してほしいものだ。
そのため、カレンダーがちゃんと開かれるように指示したら・・・「3日後」という条件も含めて進めてくれた。

ほぼ動くコードを生成してくれる

こんな感じで、

【人】画面を見ながら操作を指示
【AI】指示を解釈し操作、コード生成
【人】操作内容を見て、正確性を判断。
　　　NGなら修正を指示
【AI】修正指示を理解し、対象コードを破棄
【AI】再度操作し、コードを生成

というサイクルを繰り返しすと、ほぼ動くコードを生成してくれた。
一部、要素認識の一意性が甘く、修正が必要な箇所はあったが、それもPlaywright本来の機能(Pick locator)を用いて簡単に修正できた。
結果的に、人間はほぼコードを書いていない。

Playwright MCPの良いところ

コードをほぼ書かなくても実装できた

自然言語で指示するだけで、Playwrightコードを生成できてしまった。
一部のコードは間違ったものだったが、軽微なミスであり、すぐに修正できてしまうレベルだった。
今回は、Playwrightの機能を使って直したが、おそらく「～～の条件では一意性がないがから条件を追加して」等と指示すれば、自然言語での指示でも修正できてしまいそう。

暗黙的なアサーションを提案・追加してくれる

画面遷移した後にURLに対するアサーションが自動で追加されたのは、ありがたかった。
おそらく、「URL確認をwaitForUrlにして」等と事前指示を与えれば、遷移先確認と待機を両立したコードにしてくれそう。

また、アサーション対象のUIを自動で判別してくれた。
Playwright自身のコードジェネレータでポチポチした場合と比べ、どれほど変化に強い要素を選択しているかは分からないが、「どの要素を対象にアサーションすべきか」をイチイチ考えなくていいのは、非常に楽だった。

可読性・再利用性を意識したコードにしてくれそう

ここには書いていないが、test.stepやtest.describeといった、可読性を高める仕組みも、指示をすれば活用してくれた。
例えば、ログイン処理のコードを生成した時点で、「ここまでのログイン関連の処理をテストステップで囲って」等と指示した感じである。

また、同じUIに対してパターンデータを繰り返し注入するときにも、ループを指示すれば、いい感じのコードを書いてくれた。

QAの強力な武器になりうる

Playwright MCPを使えば、自然言語でPlaywrightコードを生成できる上、保守もできてしまいそうな勢いだった。
まるで、QA一人ひとりについてくれる、専属の自動テストプログラマーのようだった。

学習コストを大幅に低減できそうであり、言語の細かい構文を覚える必要もなく、コードを見て「ここおかしいかも」と分かれば良さそう。

また、本記事では触れないが、「サイトにアクセスして〇〇のテストケースを考えて」とか指示すると、テストケースを考え、実行結果のレポートまで生成してくれたりする。

Playwright MCP、いろいろ遊べそうなので、QAの方々はぜひ触ってみてほしい。
Gemini CLIでよければ、お金もかからないので。