Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

生成AI時代の自動E2Eテスト運用とPlaywright実践知_引持力哉

 生成AI時代の自動E2Eテスト運用とPlaywright実践知_引持力哉

Avatar for LegalOn Technologies, Inc

LegalOn Technologies, Inc PRO

December 05, 2025
Tweet

More Decks by LegalOn Technologies, Inc

Other Decks in Technology

Transcript

  1. 2 本資料は貴社の便宜のためのみに提供されるものであり、複写、引用または第三者の閲覧に共される際は株式会社 LegalOn Technologiesの了承を得てください。また、当該資料の利用により直接または間接に生じた損害や損失等について、株式会社 LegalOn Technologiesは一切の責任を負いません。 ©LegalOn Technologies, Inc. all

    rights reserved. - 引持 力哉(ひきもち りきや) - QA Automation - テックブログ ◦ 「QAプロセスAI支援ツールキット」 ◦ データ移行のテストに私たちはどう向き合ったか ◦ mablからPlaywrightに移行しました - ソフトウェアテスト自動化カンファレンス ◦ 2019、2020、2022 自己紹介 @rmochioo

  2. 7 本資料は貴社の便宜のためのみに提供されるものであり、複写、引用または第三者の閲覧に共される際は株式会社 LegalOn Technologiesの了承を得てください。また、当該資料の利用により直接または間接に生じた損害や損失等について、株式会社 LegalOn Technologiesは一切の責任を負いません。 ©LegalOn Technologies, Inc. all

    rights reserved. 人が行うことはプロンプトの作成 と、精査、レビュー がメインに変わった。 現在 プロセス 内容 テスト設計 プロンプトを元に 生成AIが仕様書を読みこんでシナリオを出力、 人間は精査 テスト実装 プロンプトを元に テストコードをAIが生成、人間はレビュー テスト実行 CI/CDパイプラインまたは、ローカルでの実行 テストメンテナンス プロンプトを元に 生成AIが修正箇所を特定し、自動で修復、 人間はレビュー
  3. 13 本資料は貴社の便宜のためのみに提供されるものであり、複写、引用または第三者の閲覧に共される際は株式会社 LegalOn Technologiesの了承を得てください。また、当該資料の利用により直接または間接に生じた損害や損失等について、株式会社 LegalOn Technologiesは一切の責任を負いません。 ©LegalOn Technologies, Inc. all

    rights reserved. 「/◯◯」と実行すると、AI Agent に特定の指示を送れる “AI 操作用ショートカット” 。これを自作できる。 例えば、/maintenanceなどを実行すると、対応する Markdown ファイルが読み 込まれ、その内容が AI Agent によって実行される。 カスタムスラッシュコマンドの活用( Claude Code / Cursor)
  4. 14 本資料は貴社の便宜のためのみに提供されるものであり、複写、引用または第三者の閲覧に共される際は株式会社 LegalOn Technologiesの了承を得てください。また、当該資料の利用により直接または間接に生じた損害や損失等について、株式会社 LegalOn Technologiesは一切の責任を負いません。 ©LegalOn Technologies, Inc. all

    rights reserved. markdown ファイルにはAI Agentに行ってもらいたい内容を記載しておく。 これにより、ユーザーはコマンドを叩くだけ で必要な作業 を実現できる。 カスタムスラッシュコマンドの活用( Claude Code / Cursor) maintenance.md
  5. 18 本資料は貴社の便宜のためのみに提供されるものであり、複写、引用または第三者の閲覧に共される際は株式会社 LegalOn Technologiesの了承を得てください。また、当該資料の利用により直接または間接に生じた損害や損失等について、株式会社 LegalOn Technologiesは一切の責任を負いません。 ©LegalOn Technologies, Inc. all

    rights reserved. https://playwright.dev/docs/test-reporters#html-reporter PLAYWRIGHT_HTML_OPEN=never これにより、テスト失敗時に Ctrl+C で中断する手間を省き、HTML レポートが自 動で開くことも防げる。 結果として、ユーザーの作業負担を軽減できる。 環境変数( PLAYWRIGHT_HTML_OPEN=never)の利用
  6. 26 本資料は貴社の便宜のためのみに提供されるものであり、複写、引用または第三者の閲覧に共される際は株式会社 LegalOn Technologiesの了承を得てください。また、当該資料の利用により直接または間接に生じた損害や損失等について、株式会社 LegalOn Technologiesは一切の責任を負いません。 ©LegalOn Technologies, Inc. all

    rights reserved. 曖昧な表現を避け、誰が実装しても同じ結果になる ようなシナリオ設計をする。 テストシナリオの詳細化 # シナリオ 詳細化したシナリオ 1 検索ページに遷移する。 /searchに遷移する。 2 「テスト」で検索する。 検索ボックスに「テスト」を入力し、「検索」ボタンをクリックする。 3 検索結果にテストが表示されることを確 認する。 検索結果のタイトルに「テスト」が表示されることを確認する。 4 1件のみヒットしていることを確認する。 ページネーションが「 1/1-1」と表示されていることを確認する。 検索機能のテストの例
  7. 28 本資料は貴社の便宜のためのみに提供されるものであり、複写、引用または第三者の閲覧に共される際は株式会社 LegalOn Technologiesの了承を得てください。また、当該資料の利用により直接または間接に生じた損害や損失等について、株式会社 LegalOn Technologiesは一切の責任を負いません。 ©LegalOn Technologies, Inc. all

    rights reserved. Linter では検知しづらい 実装におけるルールを記載してAIに与える。 • テストコードではPage Object に実装された Locator を利用する。 • テストデータに依存するロケータは Page Object に実装しない。 • 後処理を前準備として利用する。 • etc 実装ガイドラインの利用
  8. 30 本資料は貴社の便宜のためのみに提供されるものであり、複写、引用または第三者の閲覧に共される際は株式会社 LegalOn Technologiesの了承を得てください。また、当該資料の利用により直接または間接に生じた損害や損失等について、株式会社 LegalOn Technologiesは一切の責任を負いません。 ©LegalOn Technologies, Inc. all

    rights reserved. AIにとってわかりやすいテストコードを意識する。 • test.step() の活用と手順の詳細化 • Page Object と実際のページとの対応付け • コンテキストとの距離を近づける AI から高品質な出力を得る(テストメンテナンス)
  9. 32 本資料は貴社の便宜のためのみに提供されるものであり、複写、引用または第三者の閲覧に共される際は株式会社 LegalOn Technologiesの了承を得てください。また、当該資料の利用により直接または間接に生じた損害や損失等について、株式会社 LegalOn Technologiesは一切の責任を負いません。 ©LegalOn Technologies, Inc. all

    rights reserved. test.step()とは Playwrightにおけるテストを論理的なステップに分割するための機能。 - テストレポートの可読性向上 - テストの構造化 - 🆕 AIに与えるコンテキストとして利用 https://playwright.dev/docs/api/class-test#test-step test.step()の活用と手順の詳細化
  10. 33 本資料は貴社の便宜のためのみに提供されるものであり、複写、引用または第三者の閲覧に共される際は株式会社 LegalOn Technologiesの了承を得てください。また、当該資料の利用により直接または間接に生じた損害や損失等について、株式会社 LegalOn Technologiesは一切の責任を負いません。 ©LegalOn Technologies, Inc. all

    rights reserved. stepを「テストシナリオの詳細化」で紹介したように詳しく記載することで、AIにとっ てもメンテナンスしやすいテストコードになる。 test.step()の活用と手順の詳細化 # step 詳細化した step 1 検索ページに遷移する。 /searchに遷移する。 2 「テスト」で検索する。 検索ボックスに「テスト」を入力し、「検索」ボタンをクリックする。 3 検索結果にテストが表示されることを確 認する。 検索結果のタイトルに「テスト」が表示されることを確認する。 4 1件のみヒットしていることを確認する。 ページネーションが「 1/1-1」と表示されていることを確認する。
  11. 37 本資料は貴社の便宜のためのみに提供されるものであり、複写、引用または第三者の閲覧に共される際は株式会社 LegalOn Technologiesの了承を得てください。また、当該資料の利用により直接または間接に生じた損害や損失等について、株式会社 LegalOn Technologiesは一切の責任を負いません。 ©LegalOn Technologies, Inc. all

    rights reserved. テストメンテナンス時に、テスト失敗時に生成される error-context.md を利用す る。 失敗時のページのsnapshotが保存されており、実際のテストコードと比較して修 正ができる。 テスト実行の一連の流れでメンテナンスまで行えるので速い。 複雑な場合はPlaywright MCPや Healer を利用する。 error-context.md の利用
  12. 38 本資料は貴社の便宜のためのみに提供されるものであり、複写、引用または第三者の閲覧に共される際は株式会社 LegalOn Technologiesの了承を得てください。また、当該資料の利用により直接または間接に生じた損害や損失等について、株式会社 LegalOn Technologiesは一切の責任を負いません。 ©LegalOn Technologies, Inc. all

    rights reserved. 現時点では、最初のページのスナップショットしか出力されない。 別タブへの遷移等が含まれるテストの場合は、全てのページのスナップショットを 出力させるカスタマイズを行う必要がある。 error-context.md の利用(注意)
  13. 39 本資料は貴社の便宜のためのみに提供されるものであり、複写、引用または第三者の閲覧に共される際は株式会社 LegalOn Technologiesの了承を得てください。また、当該資料の利用により直接または間接に生じた損害や損失等について、株式会社 LegalOn Technologiesは一切の責任を負いません。 ©LegalOn Technologies, Inc. all

    rights reserved. 新規実装 • テストシナリオの詳細化 • 実装ガイドラインの利用 テストメンテナンス • test.step() の活用と手順の詳細化 • Page Object と実際のページとの対応付け • error-context.md の利用 AI から高品質な出力を得る
  14. 44 本資料は貴社の便宜のためのみに提供されるものであり、複写、引用または第三者の閲覧に共される際は株式会社 LegalOn Technologiesの了承を得てください。また、当該資料の利用により直接または間接に生じた損害や損失等について、株式会社 LegalOn Technologiesは一切の責任を負いません。 ©LegalOn Technologies, Inc. all

    rights reserved. https://playwright.dev/docs/test-fixtures テストで使う環境(page や browser など)を用意し、テスト後の片付けまで行っ てくれる仕組み。 ここをカスタマイズすれば、テスト実行の際に便利なものを仕込んでおくことがで きる。 [1] Test Fixturesの活用
  15. 46 本資料は貴社の便宜のためのみに提供されるものであり、複写、引用または第三者の閲覧に共される際は株式会社 LegalOn Technologiesの了承を得てください。また、当該資料の利用により直接または間接に生じた損害や損失等について、株式会社 LegalOn Technologiesは一切の責任を負いません。 ©LegalOn Technologies, Inc. all

    rights reserved. https://playwright.dev/docs/locators 可能な限り、page.getByRole()を利用する。 テスト実装時にアクセシビリティ上の不備があった場合に気づくことができる。 - 日本語のページなのにラベリングが英語になっている。 - ラベリングが重複していて、識別できない。 - etc [2] 推奨される Locatorsの利用
  16. 50 本資料は貴社の便宜のためのみに提供されるものであり、複写、引用または第三者の閲覧に共される際は株式会社 LegalOn Technologiesの了承を得てください。また、当該資料の利用により直接または間接に生じた損害や損失等について、株式会社 LegalOn Technologiesは一切の責任を負いません。 ©LegalOn Technologies, Inc. all

    rights reserved. https://playwright.dev/docs/api/class-locator#locator-wait-for 待ちを入れたい場合は、まずはwaitFor()の利用で実現できないかを考える。 要素の状態に対して待ちを入れられるので、 waitForTimeout()の固定時間の待ちと比較してテストの安定性と効率が上がる。 [6] 可能な限り waitFor()を利用する
  17. 51 本資料は貴社の便宜のためのみに提供されるものであり、複写、引用または第三者の閲覧に共される際は株式会社 LegalOn Technologiesの了承を得てください。また、当該資料の利用により直接または間接に生じた損害や損失等について、株式会社 LegalOn Technologiesは一切の責任を負いません。 ©LegalOn Technologies, Inc. all

    rights reserved. スケルトンスクリーンの表示から非表示になるまでを一つの関数として用意する ことでテストの安定化を図っている。 [7] カスタマイズした waitを利用する async waitForLoading(): Promise<void> { await skeleton.waitFor({ state: 'visible' }); await skeleton.waitFor({ state: 'hidden' }); }
  18. 52 本資料は貴社の便宜のためのみに提供されるものであり、複写、引用または第三者の閲覧に共される際は株式会社 LegalOn Technologiesの了承を得てください。また、当該資料の利用により直接または間接に生じた損害や損失等について、株式会社 LegalOn Technologiesは一切の責任を負いません。 ©LegalOn Technologies, Inc. all

    rights reserved. timeoutを極端に長く設定してしまうと、UIの要素変更によりテストが失敗する場 合に実行時間が無駄に伸びてしまうため注意する。 例えばclick({ timeout: 30_000 })とすると、要素に変更が加わって特定できな かっただけで30秒も待ってしまう。 スパッと終わらせてやるのも重要。 [8] 必要最低限の timeoutを設定する
  19. 53 本資料は貴社の便宜のためのみに提供されるものであり、複写、引用または第三者の閲覧に共される際は株式会社 LegalOn Technologiesの了承を得てください。また、当該資料の利用により直接または間接に生じた損害や損失等について、株式会社 LegalOn Technologiesは一切の責任を負いません。 ©LegalOn Technologies, Inc. all

    rights reserved. テスト対象の画面に直接アクセスし、前提となる不要なステップ(画面遷移や初 期操作)をスキップする。 - テスト実行時間の短縮 - (ステップを踏まないことによる)テストの安定化 ※ 不要となるステップは別のテストで担保されている前提。 [9] 直遷移の活用
  20. 54 本資料は貴社の便宜のためのみに提供されるものであり、複写、引用または第三者の閲覧に共される際は株式会社 LegalOn Technologiesの了承を得てください。また、当該資料の利用により直接または間接に生じた損害や損失等について、株式会社 LegalOn Technologiesは一切の責任を負いません。 ©LegalOn Technologies, Inc. all

    rights reserved. 状況に応じて、UI の更新をページリロードで確認するのではなく、対応するバッ クエンド API のレスポンスを待つことで、状態反映の完了待ちを行っている。 例として、ファイルアップロード後の一覧画面への反映など、非同期で反映される 更新系操作などはこれを利用している。 [10] APIからの応答を待つ
  21. 55 本資料は貴社の便宜のためのみに提供されるものであり、複写、引用または第三者の閲覧に共される際は株式会社 LegalOn Technologiesの了承を得てください。また、当該資料の利用により直接または間接に生じた損害や損失等について、株式会社 LegalOn Technologiesは一切の責任を負いません。 ©LegalOn Technologies, Inc. all

    rights reserved. “検証したいこと”以外のアサーションは行わない。 - テストケース名(検証したいこと)とアサーションのズレを防ぐため。 - 失敗時に何のテストなのかが判断しづらくなるため。 [11] 不必要なアサーションを行わない
  22. 57 本資料は貴社の便宜のためのみに提供されるものであり、複写、引用または第三者の閲覧に共される際は株式会社 LegalOn Technologiesの了承を得てください。また、当該資料の利用により直接または間接に生じた損害や損失等について、株式会社 LegalOn Technologiesは一切の責任を負いません。 ©LegalOn Technologies, Inc. all

    rights reserved. ダウンロードのテストを行う場合、ダウンロード先をtest-resultsディレクトリ配下に設 定することで、次回テスト時にPlaywright側でクリーンアップされるため便利である。 [13] ダウンロード先フォルダとして、 test-results の利用
  23. 59 本資料は貴社の便宜のためのみに提供されるものであり、複写、引用または第三者の閲覧に共される際は株式会社 LegalOn Technologiesの了承を得てください。また、当該資料の利用により直接または間接に生じた損害や損失等について、株式会社 LegalOn Technologiesは一切の責任を負いません。 ©LegalOn Technologies, Inc. all

    rights reserved. https://playwright.dev/docs/test-annotations#tag-tests 各サービスを跨いだリグレッションテストを実施したい場合は、tagを利用して各サー ビスにおける重要度の高いテストをまとめて実行している。 [14] 状況に応じたテストの実行戦略
  24. 60 本資料は貴社の便宜のためのみに提供されるものであり、複写、引用または第三者の閲覧に共される際は株式会社 LegalOn Technologiesの了承を得てください。また、当該資料の利用により直接または間接に生じた損害や損失等について、株式会社 LegalOn Technologiesは一切の責任を負いません。 ©LegalOn Technologies, Inc. all

    rights reserved. https://playwright.dev/docs/test-timeouts#global-timeout Kubernetesなどのインフラ側のタイムアウトにより、テスト実行中にコンテナごと停止 してしまった場合はテストレポートが出力されない。 globalTimeoutにてテスト全体のタイムアウト時間を設定することで、それを回避す る。 [15] globalTimeoutの設定 globalTimeout < インフラ側のタイムアウト
  25. 62 本資料は貴社の便宜のためのみに提供されるものであり、複写、引用または第三者の閲覧に共される際は株式会社 LegalOn Technologiesの了承を得てください。また、当該資料の利用により直接または間接に生じた損害や損失等について、株式会社 LegalOn Technologiesは一切の責任を負いません。 ©LegalOn Technologies, Inc. all

    rights reserved. アプリケーションの多言語化に伴い、CSVで切り替えられるような仕組みを導入して いる。これにより共通のPageObjectを利用できる。 [17] 多言語対応 email: page.getByRole('textbox', { name: t({ key: 'email' }) }); password: page.getByRole('textbox', { name: t({ key: 'password' }) }); email,Email password,Password email,メールアドレス password,パスワード en-US.csv ja-JP.csv