PlaywrightとClaude Codeでやってみよう、手軽に始めるテスト自動実行 - エムスリーテックブログ

エムスリーテックブログ

エムスリー(m3)のエンジニア・開発メンバーによる技術ブログです

PlaywrightとClaude Codeでやってみよう、手軽に始めるテスト自動実行

【QAチーム ブログリレー6日目】の記事です。

はじめに

こんにちは。エンジニアリンググループ QA (QualityAssurance) チームの中塚です。 2週間ほど前からバジルの水耕栽培にチャレンジしていて、少しずつ大きくなる双葉を見守るのが毎朝の楽しみです。肥料を溶かした水だけで本当にあんなに大きく育つのか?自由研究の気分で楽しく観察しています。

画像はAI(Gemini)により生成されたイメージです。このブログ記事の内容から生成してもらいました。バジルの鉢植えもあってかわいい!

さて、私は普段コンシューマ向けサービス全般のQAの設計、実施、計画、その他諸々の活動をしています。
その中で、時々このような手動でやるには辛いテストが必要になることがあります。

  • サービスの各ページにアクセスし、契約期間内ならアクセスできるが契約期間外ならアクセスできないことを確認したい。ページのリストは無く事前調査が必要で、おそらく数十ページを繰り返しアクセスして比較する
  • 特定のキーワードを検出し、警告するようなチェックシステムをテストしたい。外部LLMによるチェックなのでキーワードリストはないが、精度を見ておきたいのでさまざまなキーワードを試して動作確認したい。

このように、同じような操作を何回も繰り返したり、ページの調査やキーワードリストの準備といった事前調査などを含む地道な作業が必要になるテストを自動生成・自動実行できないか試したところ、PlaywrightとClaude Codeを使い手軽にテストコード生成〜実施〜レポート出力までが実現できたので、その実践例をご紹介します。

Claude CodeとPlaywrightについて

弊社ではClaude Codeが無制限で利用可能となっていて、普段の業務からテストまたはコーディング業務などに活用しています。Claude Codeに自然言語で依頼すると、人間が指定しなくてもタスク実行のためにClaude Codeが適切なツールを選定して使用してくれます。また、plan modeを利用すると、実行前に対話したり、向こうから質問してもらい精度を上げてから実行できます。

PlaywrightはWebアプリケーション向けのE2Eテストフレームワークで、テストランナー、アサーション、分離機能、並列処理、自動待機(Auto-wait)機能など豊富なツール群が備わっており、実現したいテストをシンプルに書くことができます。
エムスリーでは多くのプロジェクトでE2EテストがPlaywrightで書かれています。また、Playwright MCPをインストールしておくことで必要に応じてブラウザを起動し操作したり内容を確認してくれます。

今回の例では必須ではありませんが、PlaywrightにはPlaywright Test Agentが付属しており、導入しておくとこのようなタスクを効率よく実行してくれます。

  • Planner : アプリケーションを探索し、マークダウン形式のテスト計画を自動作成
  • Generator : マークダウン計画から実行可能なPlaywright Testコードを生成
  • Healer : 失敗したテストを自動検査・修復し、パスするまで調整

計画も含めAIに任せられる仕組みがありますが、今回のケースでは計画を人間が作り、設計、実装、実行、レポート出力をAIに任せる使い方をしました。

前準備

Playwright MCP、Claude Codeをインストールし、Playwright(+ Playwright Test Agent)を入れたリポジトリを用意します。

テスト計画を書く

まずは自然言語でやりたいことを簡潔に書きます。

例:アクセス制御テスト

# やりたいこと
アクセス可能/不可能の比較テストをしたい。
契約期間内の組織は専用LPにアクセスできるが
契約期間外の組織は専用LPのどのページにもアクセスできないことを確認したい。

契約期間内の組織のLP:https://example.com/active
契約期間切れした組織のLP:https://example.com/expired

先に契約期間内の組織LPを探索し、存在する画面のリストを作成した後に
URL末尾のIDを契約期間切れした組織のIDに書き換え、それぞれにアクセスできないことを確認してほしい。

また、テスト結果レビューのため、確認したURLのリストと結果を一覧で残してほしい。

実装 → 実行 → レポート

このようなテスト計画をざっくり書いたら、Claude Codeに計画を読み込んでもらいます。
plan modeで実行するとテスト計画に盛り込めていなかった詳細をAIが質問してくれるので、対話形式でより細かく作り込むことができます。
今回の例では、このような事項が対話を通じて追加されました。

  • クローリングを行うが、何階層まで行うか
  • 「アクセスできない」の基準(HTTPステータスコードが4xxエラー、特定のエラーが表示されるなど)
  • 除外すべきURLの種類
  • テスト実施結果レポートに含めたい情報
  • テストの失敗条件(契約切れ1つでも失敗したら失敗とみなすなど)
  • 記事コンテンツなど同じ種類のページを全てテストするか
  • テスト実行中の進捗表示の必要有無

etc...

これらをインプットすると実装前に実装計画が出ます。確認し、疑問や修正点があれば指摘し、問題なければ実装を進めてもらいます。
AIはテスト計画を読んで

  • ページクローリング機能
  • URL書き換えロジック
  • ステータスチェック
  • 結果レポート生成

といった機能を持ったテストコードを生成してくれました。

実装が終わったら、生成されたテストコードを実行します。コンソールからコマンドを入力して自分で実行してもいいですし、Claude Codeに依頼して実行してもらうこともできます。 実行後、このように結果をレポートしてくれます。

# アクセス制御テストレポート

**実行日時:** 2026/4/19 18:53:04

## 組織情報

- **契約期間内組織:** active
- **契約期間切れ組織:** expired

## サマリー

| 指標 | 値 |
|------|----|
| 発見ページ数 | 42 |
| 契約期間内アクセス成功 | 41 |
| 契約期間切れアクセス拒否 | 42 |
| テスト成功 | 41 |
| テスト失敗 | 1 |

## 詳細結果

| ページパス | 契約期間内 | 契約期間切れ | テスト結果 |
|-----------|----------|------------|----------|
| /active | ✓ (200) | ✗ (404) | ✅ PASS |
| | | *理由: 404 Not Found* | |
| /active/about | ✓ (200) | ✗ (404) | ✅ PASS |
| | | *理由: 404 Not Found* | |
(以下略)

内容を確認し、更に確認したいことがあればインプットして追加で実装・実行することも可能です。
また、レポートの形式変更や内容の整理のリクエストなどもできるので、レビューする上で助かりました。

良かった点

時間が大幅に短縮され、手を離せた

もし手動で実行していたら繰り返しの操作と確認の作業が数十回必要となっていましたが、これらを自動実行に任せ、また、実行・出力のタスクも10〜20分程度で完了しました。
短時間で済んだほか、タスク終了までの待機時間中に他の作業を進めることができました。

気軽に使えた

ラフな計画から対話を通じて精度を高め、集中力を他の仕事に振り分けながら実行できたのは嬉しいことでした。私は複数PJを兼任していて、仕様やタスク内容を思い出すなどの他の仕事からのスイッチングのコストが負担になる場合がありますが、AIのアシスタントでこれを軽減できるのでありがたいです。
曖昧な甘い部分をAIが補完してくれるので、作り込んでから渡さなくてもタスクが発生した時点でまず軽い相談から最初の一歩を踏み出せます。

使いやすい

生成や実行が早く、気軽に生成して気軽に使い捨てできるので、自動化できそうだなと思ったらまずはやってみるといった使い方ができます。
今回の例だとクローリング、アクセスしてステータスコードをチェック、とシンプルな手順でしたが、テスト内容によってはいざコードは生成されたが実行してみるとロケーターが不安定、操作内容やUIが複雑でPlaywrightの操作がうまくいかないなどのトラブルもありえます。
そういう時は実装を切り上げ、一部の実施のみ手動で実行するなどの方針転換も容易です。どこまでを自動化するかを相談しながら進めることもできます。

わかりやすいレポートが出せる

テストの内容と実施結果がレポートとして出力されます。
最初に出されたものを元に失敗したものについて質問して切り分けを進めてもいいですし、フォーマットが気に入らなければ再生成の指示を出せば指示通りのフォーマットにしてくれます。
また、レポートのレビュー中に実施結果の不足や追加確認の必要が分かれば追加で指示を出し、更なるテスト実装・実行も可能です。

今後の展開

現在の使い方としては、単発のテストのタスクを簡易に自動化するという使い方をしています。
このため使い回す仕組みがなく、タスクごとにテストに必要なテストコードを都度生成していますが、同じプロダクトでタスク実行の機会を重ねれば、ログインやメイン機能などよく使うテスト手順を共通化し、テストコードを育ててより複雑なテスト手順に対応することも考えられます。
または、同プロダクトにはすでにPlaywrightで書かれたE2Eテストがあるので、こちらからコードを借用する使い方もできるかもしれません。
ただし、複雑な手順はコードも複雑になるほか、手動で実施すべき操作とかけ離れた手順で実装されるリスクもあり、意味のあるテストであるかはしっかりレビューする必要があります。このレビューの精緻化、効率化も課題となるでしょう。

おわりに

PlaywrightとClaude Codeを使うことで、テストを手軽に自動化できました。
手軽に試せてすぐに成果物が出るので、「まずはやってみるか!」の気持ちで軽く相談することから始めてみても良さそうです。自動化をやってみたいけどハードルの高さを感じていた方も、まずは試してみてはいかがでしょうか。


We're Hiring!

エムスリーQAチームでは一緒に働く仲間を募集しています。ご興味のある方は、ぜひ採用ページをご覧ください!

jobs.m3.com