Playwright x GitHub Actionsで実現する「レビューしやすい」E2Eテストレポート

「ソフトウェアテスト自動化カンファレンス2025」での登壇資料です。
https://testautomationresearch.connpass.com/event/361747/

Transcript

1. 1 Playwright x GitHub Actionsで 実現する「レビューしやすい」 E2Eテストレポート ロリポップ‧ムームードメイン事業部 ⻄⽥貴之 2025.12.06
2. 2 ⾃⼰紹介 ロリポップ‧ムームードメイン事業部 事業開発チーム 2020年 中途⼊社 ⻄⽥ 貴之 Nishida Takayuki • Webアプリケーションエンジニア • 主に新規事業開発を担当 • エンジニア組織におけるAI活⽤の推進や 開発⽣産性向上への取り組みも⾏っている。 • X : @kinosuke01
3. 3 アジェンダ 1. はじめに：本セッションのゴール 2. 背景 3. 現状と理想像 4. 課題と対応：任意のE2Eテストを実⾏したい 5. 課題と対応：スクショつきのテスト結果がほしい 6. まとめ
4. はじめに 4 Playwright と Github Actions によるE2Eテストの レポート共有事例をお伝えすることで、 E2E⾃動テスト導⼊のヒントにつなげることを ⽬指します。 このセッションのゴール
5. 背景 5
6. 背景 • GMOペパボのロリポップ‧ムームードメイン事業部は、 コンパネの操作でサーバー等のインフラをセットアップして提供する プロダクトが多い。 • 例）ロリポップ！レンタルサーバー • これらは個別のユニットテストだけではカバーできないので、 E2Eテストで品質担保する必要がある。 • 20年以上運⽤されてきたプロダクトもあるが、 E2Eテストが⼿動のままなので、これを⾃動化したい 🔥 E2Eテストを⾃動化したい
7. 背景 • Playwrightとは • Microsoft社製のE2Eテストツール。 • 実装したテストコードに従い、ブラウザを⾃動操作‧動作検証してくれる。 • 実⾏結果をブラウザ画⾯のスクリーンショットつきで、レポートしてくれる。 • このPlaywrightを、 事業部の主要なプロダクトに導⼊開始した。 解決策としてPlaywrightを導⼊開始 スクリーンショットつきの テスト結果のレポート例
8. 現状と理想像 8
9. 現状と理想像 1. 開発者は、PRを作る。 2. PRのコードを検証環境にデプロイする (ここは既に⾃動化されている)。 3. 開発者は、検証環境で必要なE2Eテストを⼿動で⾏いスクリーンショットを撮る。 4. 開発者は、E2Eテスト結果とエビデンス(スクリーンショット)をコメントする。 5. レビュアーは、コードレビューに加え、 E2Eテスト結果から本番環境に反映して問題ないかをチェックする。 6. 問題なければ承認＆マージ。 現状の開発フローは、⼿動のE2Eテストとスクリーンショットが必要
10. 現状と理想像 1. 開発者は、PRを作る。 2. PRのコードを検証環境にデプロイする (ここは既に⾃動化されている)。 3. 開発者は、任意のE2Eテスト実⾏をコメントで指⽰する。 4. GitHub Actions で Playwright が起動。 コードに含まれるテストケースをもとに、E2Eテストが⾃動実⾏。 結果がスクリーンショット付きでコメントされる。 5. レビュアーは、コードレビューに加え、 E2Eテスト結果から本番環境に反映して問題ないかをチェックする。 6. 問題なければ承認＆マージ。 理想は、⼿動のE2Eテストとスクリーンショット登録を⾃動化
11. 現状と理想像 1. 開発者は、PRを作る。 2. PRのコードを検証環境にデプロイする (ここは既に⾃動化されている)。 3. 開発者は、任意のE2Eテスト実⾏をコメントで指⽰する。 4. GitHub Actions で Playwright が起動。 コードに含まれるテストケースをもとに、E2Eテストが⾃動実⾏。 結果がスクリーンショット付きでコメントされる。 5. レビュアーは、コードレビューに加え、 E2Eテスト結果から本番環境に反映して問題ないかをチェックする。 6. 問題なければ承認＆マージ。 理想は、⼿動のE2Eテストとスクリーンショット登録を⾃動化 現状のフローと変わらない “レビューしやすい”テスト結果のレポート
12. 課題と対応 任意のE2Eテストを実⾏したい 12
13. 課題と対応：任意のE2Eテストを実⾏したい • 課題 • E2E⾃動テストは時間もかかり不安定なので、PR作成やpushと同時に全部動かすという ことはしたくない。なので、任意のE2EテストをPRの中で発動させる必要がある。 • 対応 • Playwrightのタグ機能を使って、 特定のタグに紐づいたテストのみ実⾏できるようにする。 • PRのコメントで、スラッシュコマンドと実⾏対象のタグを受け取る。 • これにより任意のテストだけの実⾏を実現する。 Playwrightのタグと、スラッシュコマンドで対応
14. 課題と対応：任意のE2Eテストを実⾏したい PRに、このようにコメントすると Playwrightのタグと、スラッシュコマンドで対応 /pw-test signup npx playwright test --grep "@signup" 巡り巡って、これがGithub Actionsで実⾏される。 これは簡単にできる。
15. 課題と対応 スクショつきのテスト結果がほしい 15
16. 課題と対応：スクショつきのテスト結果がほしい • 課題 • 現状、⼿動のE2Eテストの結果は、スクリーンショットつきでPRコメントしている。 • これと同じことをやりたいが、GitHub API は画像登録に対応していない 🔥 • どこかにホストされている画像を、Markdownの中で表⽰させることはできるが、 GitHub上に画像を登録するAPIはなさそう。 スクリーンショット登録は簡単ではない 「ここにドラッグアンドドロップで画像 登録する」と同等のことがAPIではで きない
17. 課題と対応：スクショつきのテスト結果がほしい • 対応案 • S3等のオブジェクトストレージを準備して、スクリーンショットをホストする。 • ホストされた画像URLを、PRコメント欄に登録する。 • 評価 • 管理対象のインフラを増やしたくないので、できれば避けたい。 • GitHub 上で完結できる⽅が望ましい。 対応案１： オブジェクトストレージにホストする
18. 課題と対応：スクショつきのテスト結果がほしい • 対応案 • S3等のオブジェクトストレージを準備して、スクリーンショットをホストする。 • ホストされた画像URLを、PRコメント欄に登録する。 • 評価 • 管理対象のインフラを増やしたくないので、できれば避けたい。 • GitHub 上で完結できる⽅が望ましい。 対応案１： オブジェクトストレージにホストする 却 下
19. 課題と対応：スクショつきのテスト結果がほしい • Playwrightはテスト結果として、 htmlとスクリーンショットのセットをレポート出⼒する。 • これを、GitHub Actions の中で、任意のリポジトリにプッシュして、 GitHub Pages で公開する。 • 社内で利⽤している GitHub Enterprise には GitHub Pages のページにデフォルトでアクセス制御ついているので安⼼。 • Github Pages へのリンクをPRコメントに投稿する。 対応案２： GitHub Pages使う
20. 課題と対応：スクショつきのテスト結果がほしい 対応案２： GitHub Pages 使うケースはうまく動いた GitHub Actions上で、 レポートとスクリーンショットを 任意のリポジトリにプッシュ ビルドとデプロイされて、 レポートがGithub Pagesで確認できる
21. 課題と対応：スクショつきのテスト結果がほしい • GitHub Pages は静的サイトをビルドしてデプロイしている。 • 対象ファイルが増えれば増えるほど、時間がかかってしまう。 • レポートが増えてくると、反映されるまで相当の時間がかかりそう。 対応案２： GitHub Pages 使うのは問題もある
22. 課題と対応：スクショつきのテスト結果がほしい • GitHub Pages は静的サイトをビルドしてデプロイしている。 • 対象ファイルが増えれば増えるほど、時間がかかってしまう。 • レポートが増えてくると、反映されるまで相当の時間がかかりそう。 対応案２： GitHub Pages 使うのは問題もある 却 下
23. 課題と対応：スクショつきのテスト結果がほしい • Playwrightのテスト結果を、 Markdownとスクリーンショットのセットで出⼒する。 • これを、GitHub Actions の中で、任意のリポジトリにプッシュする。 • プッシュしたMarkdownファイルのGitHubのURLを、PRコメントに投稿する。 • Markdownファイルは、GitHub上でプレビュー表⽰されるので、 GitHub Pages のようなビルドを考慮する必要がない。 対応案３： スクショつきのMarkdownを使う
24. 課題と対応：スクショつきのテスト結果がほしい • Playwright標準のレポーターはMarkdownに⾮対応。 • サードパーティ製のMarkdownに対応したカスタムレポーターはあるけど、 スクリーンショットを表⽰してくれなさそう... • 要件を満たすMarkdownレポーターがない 🔥 対応案３： ただ、PlaywrightにはMarkdownのレポーターがない
25. 課題と対応：スクショつきのテスト結果がほしい • 仕⽅がないので、Playwrightのカスタムレポーターを作って、 今回の要件に合うMarkdownファイルを出⼒できるようにした。 • こんな感じの構造で出⼒している。 対応案３： Markdownのカスタムレポーターを作った - playwright-md-report - index.md - screenshots - xxx.png - xxx.png
26. 課題と対応：スクショつきのテスト結果がほしい • 出⼒された index.md をエディタでプレビューするとこんな感じ。 対応案３： Markdownのカスタムレポーターを作った
27. 課題と対応：スクショつきのテスト結果がほしい • Markdownカスタムレポーターはnpmとして公開し、 複数のプロダクトへの導⼊ができるようにした。 対応案３： Markdownのカスタムレポーターを作った
28. 課題と対応：スクショつきのテスト結果がほしい • GitHub Actions でやることは結構ある。 • チェックアウト、コメントからタグの抽出、環境セットアップ、Playwrightテスト実⾏、 テスト結果の読み込み、Markdownレポートのpush、テスト結果のコメント投稿。 • プロダクトごとに実装するのは⼤変なので、カスタムアクションとして切り出し。 • InnerSourceとして事業部内に展開。 対応案３： 複数プロダクトで導⼊できるようカスタムアクション化
29. 課題と対応：スクショつきのテスト結果がほしい こんな感じになった 1. `/pw-test xxx` とコメント 2. xxxタグのE2Eテストが実⾏ 3. 結果がコメントされる 4. 結果コメント欄にある View Reportをクリックすると 対応案３： 全体の挙動確認
30. 課題と対応：スクショつきのテスト結果がほしい ５．ViewReportをクリックすると   Markdown形式のレポートが   GitHub上でプレビュー表⽰。   スクショ付き。 対応案３： 全体の挙動確認 理想とする体験を 実現することができた 👏👏
31. 課題と対応：スクショつきのテスト結果がほしい • 複数のプロダクトへの導⼊を進めている。 現在
32. まとめ 32
33. まとめ 33 • 背景：E2Eテストを⾃動化したい • 現状と理想像： • PR内におけるテスト実⾏とテスト結果登録を⾃動化したい。 • テスト結果はスクショ付きで「レビューしやすい」を維持。 • 課題と対応：任意のE2Eテストを実⾏したい • スラッシュコマンドとタグで解決。 • 課題と対応：スクショつきのテスト結果がほしい • GitHubの制約。 • スクショ付きのMarkdownレポートをプッシュすることで解決。 アジェンダの答え合わせ
34. 34 まとめ ⾃動化しても「レビューしやすい」テスト結果は維持。 Markdown対応等「ないものは作る」ことで実現。 現開発フローを踏まえつつ、テスト⾃動化を進めて、 サービスを⽀えていきましょう。 以上になります。ありがとうございました！