JaSST nano vol.49 発表資料 「Let’s play Playwright with AI!」

Let’s play Playwright with AI!

アジェンダ • テスト自動化の現状は？ • なぜPlaywrightか？ • AIを活用したテストコード作成 • 現在までの道のり • 自動化テストのメリット • 次の一歩へ

テスト自動化の現状は？ • 開発ライフサイクルで重要 • 未経験でも取り組みやすくなっている • スキルアップ、キャリア形成に貢献

なぜPlaywrightか？ • Microsoft開発のE2Eテストフレームワーク • 対応ブラウザ：Chromium, Firefox, WebKit • 対応言語：JavaScript, TypeScript, Python, C# • 使いやすさ：コードジェネレーター機能などあり

AIを活用したテストコード作成（概要） • AIエージェントによる作業効率化 • コード生成スピード向上 • 再利用性向上

AIエージェント活用の具体例 • VSCode + Copilot Chat + AIエージェント • モデル：Claude Sonnet 3.7, GPT-4o • プロンプトに詳細なテスト内容記載 • Instructionsファイルで指示内容共有化 • DOM構造確認（Playwright MCP）活用 ⇒ テストコードやPOMの作成、その後の修正

現在までの道のり ステップ① データ作成の自動化 • Playwrightでテスト用データを自動作成 • コードジェネレーター活用 ⇒ コマンドラインからデータ指定可能

ステップ② CSVを用いた大量データ投入 • 画面操作不要、CSVで登録 • パラメータライズドテストへ ⇒ エンジニアとの協力で実用化

ステップ③ POM・Fixture活用 • UI変更への耐性向上（POM） • 共通処理の簡略化（Fixture） ⇒ CIによる運用開始後、テスト拡充の促進

ステップ④ APIによるflakyテスト解消 • APIを使った前処理・後処理 • 高速化、安定化 ⇒ 実際のflakyテストがゼロに！

自動化テストのメリット • 開発者との協働促進 • テストコードを通じたコミュニケーションの発展 ⇒ 「早く行きたいなら1人で行け、遠くへ行きたければみんなで行け」

次の一歩へ • 難しさを超えて好奇心から挑戦を • 楽しめるテーマを見つける重要性 • 良書の積極的な探索を推奨

自己紹介 • 長友優治（テスト業務20年以上） • Yahoo! JAPANの１人目のQA • 株式会社Veriserveでさまざまな会社のQAのお手伝い • 株式会社メルペイで決済システムのQA • クラスメソッド株式会社でEC基盤、CRM基盤のQA • 現在：M2X株式会社でQA • 参考リンク： https://note.com/m2xsoftware/n/n6f23b152d2fb https://note.com/m2xsoftware/n/n03a07209c136

• https://note.com/m2xsoftware/n/n6f23b152d2fb
• https://note.com/m2xsoftware/n/n03a07209c136

以下は公開用発表者ノート

テスト自動化いかがですか？ ・最近はいろいろ自動化のためのツールなどたくさんありますので、QAの方々 も取り組まれている方も多いと思います。 ・テストフレームワークも扱いやすくなっているので、使っている事例もよく みます。 → AIエージェントやMCPというものが出てきてより入りやすくなっているの で、ぜひまだの方も一歩を踏み出していただけたらと思います。

テスト自動化は開発ライフサイクルに不可欠 テスト自動化が楽しめると ● ● スキルの向上 キャリアの発展 ⇒ 開発ライフサイクルにおけるQAへの新たな機会をもたらしてくれるかも？

Playwrightで自動化してみませんか？ Playwrightはいろいろ使いやすいので、はじめての方も試してみるのによいと 思います。 新卒のエンジニアの方とエンジニアではない方に、ハンズオンでご案内したり したところ、興味を持ってくださる方が結構います。 ⇒コードジェネレーターなども揃っていて、ブラウザを使って行う定型作業の 自動化なども可能

Playwrightとは Microsoftが開発しているE2Eテストフレームワーク - Chromium、Firefox、WebKitの主要ブラウザエンジンをサポート JavaScript、TypeScript、Python、C#などさまざまな言語でテストコード が作成可能

これまでの楽しみ方（私の場合）その⑤ ● AIエージェントを使ったテストコードなどの作成 ⇒AIエージェントを使って、テストコードやPage Object Modelを作成 ⇒AIエージェントと一緒にテストコードなどの修正やブラッシュアップ ☆エンジニアの方からサンプルを使いながら教わりました。モデルとかのアド バイスもいただき、テストコード作成があっという間に！

これまでの楽しみ方（私の場合）その⑤-詳細1 0. AIエージェントを使った方法をエンジニアから教わる（Cursor使用） 1. VSCode+Copilot Chat+AIエージェントでテストコードとPOMを作成 ・AIエージェントはClaude 3.5 SonnetやGPT-4oを使用 ・プロンプトに作成してほしいテストの内容を詳しく記載 ・共通で指示する内容をInstructionsファイルに記載してGitで管理 ・レビューして手直しorAIエージェントに修正依頼 2. PR作成、レビューしてもらってApprove後、マージ

これまでの楽しみ方（私の場合）その⑤-詳細2 ・Playwright MCPを使って実際にDOM構造を確認してもらってから作成しても らっている ・指示ファイルやプロンプトを修正していくとともに、既存のファイルを参照 してもらうなどもしている ⇒自分以外の人でも指示ファイルにある内容は共有される ⇒別機能で同じようなシナリオのものはかなり良い感じのものを作ってくれる

これまでの楽しみ方（私の場合）その⑤-詳細3 生成AIでこれまでにもテストコードを書いてもらうこともありました。 これをこうしたいやこうするにはなどを尋ねながら作ってもらったり、こうしたいや エラーを提示して修正案もらったりと今までもいい感じに作ってくれていました。 AIエージェント使って最初のやりとりする回数が減ったり、指示がある程度簡単にも なってきた感じがします。修正も依頼するようになったのでその分は増えたかもしれ ませんが。 ・あらためてPlaywrightのコードジェネレーターは優秀だなぁと思います

これまでの楽しみ方（私の場合）その① ● データ作成：テストのためのデータ作成で自動化を行う Playwrightを使用して特定のデータや指定したデータを作成 ⇒最初はコードジェネレーターを使い特定のデータを作れるように ⇒次の段階では実行時にコマンドライン上で指定した内容を使ってデータ を作れるように

これまでの楽しみ方（私の場合）その② ● データ投入：大量データを登録するためのスクリプト作成 Playwrightを使用して画面操作での登録の手間をはぶく ⇒import機能が未実装の部分で、画面操作でしかできないデータ登録を人手をかけない ようにCSVファイルから読み取って登録可能に ⇒Playwrightのパラメータライズドテストへ ☆エンジニアさんが困っていたので、こんな感じでやれますよとご案内したら、私が作った ものに修正を加えて使ってくださいました。エンジニアさん曰く、headedモードで動かして お昼食べたけど結構楽しかったそうです。

これまでの楽しみ方（私の場合）その③ ● Page Object ModelやFixtureなどを使ってテストを増殖 ⇒POMを使うことでUIの変更に強くなる、再利用性が高まる ⇒Fixtureの拡張で、共通処理やデータ準備をfixtureにまとめられ、また テストファイル内容がシンプルになる ☆私が作った拙いテストコードをCIで動かせるようにエンジニアさんがしてく ださったので、その後エンジニアさんとテストを増やしていきました。

これまでの楽しみ方（私の場合）その④ ● APIを使った前処理や後処理を行いflakyテストの解消 ⇒PlaywrightではAPIテストも行えるので、API操作も可能 ⇒画面操作による前処理、後処理からAPIを使用するやり方への変更によ り、高速で安定したことでflakyが解消 ☆エンジニアの方にAPIでできたらいいのにとお話してたら、あるときにエン ジニアの方が作られたテストをレビューしていてびっくり！まねして修正した らflakyがゼロに！

自動化テストを楽しむメリット ・開発者とのコミュニケーションが促進される ・テストしてほしいとテストしますの関係ではなくなる ⇒テストコードを介してお互いがレビューアーとレビューイーに ⇒テストが落ちる、flakyなどの対応を通じた協働 ◎「早く行きたいなら1人で行け、遠くへ行きたければみんなで行け」 ・今はできていないテストもいずれできるように。例えばPlaywrightとaxeでアクセシビリ ティのテストしてみようとか。（WCAGのどのレベルを満たしてるか確認するなど）

自動テストが回りだす瞬間へ 開発者：どんなテストしたらいいのかわらん QA：こんなテストしたいからテストコード作ってみた 開発者：こんなことまでテストしてくれててありがたい（^_^） QA：flakyなテストを減らしたいし、こうできたらコード書くのが楽になるのに 開発者：こうしてみたらうまくいくかも QA：こんなやり方が！まねしてみたらできたうれしい（^_^）

偏愛QAの楽しみ方 開発者：ここ開発が難しかったからテストしっかりしないと（QAの〇〇さん だったらこんなテストしてくれそうだな）だからこんな確認しておこう。 QA：こんなことしてしまったけど、ちゃんと対応されててすごい！バグ見つけ るより、エンジニアさんの凄さに感動。凄いなぁって思うことがこれまでも何 度もありました。ほんとにありがたいです。 ☆最近ロケーターの選択で困っていたら、コードの方を見直してくださっても らったりもします。ありがたいです。

自己紹介 長友優治（テスト関係のお仕事20年以上） ・Yahoo! JAPAN の一人目のQAとしてテストし始めました 現在M2Xという会社でQAしてます。 https://note.com/m2xsoftware/n/n6f23b152d2fb https://note.com/m2xsoftware/n/n03a07209c136

• https://note.com/m2xsoftware/n/n6f23b152d2fb
• https://note.com/m2xsoftware/n/n03a07209c136