長年続く手動E2Eテストを自動化で救いたい

「10年以上続くプロダクトの苦労と知恵 ～運用と技術の本音、3社がぶっちゃけます～」におけるLT資料です。
https://replus.connpass.com/event/366589/

Transcript

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