システムリプレイスのタイミングでPlaywrightを入れた話

Playwright Lightnings #1での発表資料
https://playwrightnings.connpass.com/event/340591/

構成など参考にしていただけると🙏

Transcript

1. 株式会社Schoo / 基盤開発ユニット / バックエンドエンジニア(PL) 福嶋 淳一 システムリプレイス × Playwright導入のリアル Playwright Lightnings #1🎉 2025年6月18日
2. 今日のテーマ
3. 弊社のPlaywright導入初期 の取り組みを公開
4. 構成や取り組みが参考にな れば嬉しいです
5. CONTENTS 01. 自己紹介 02. 今取り組んでいるプロジェクト概要 / テスト自動 化の戦略 03. 04. 課題・今後の対応 Agenda Playwright導入の方針と構成
6. 自己紹介
7. 自己紹介 ・氏名 福嶋 淳一(社内では、ふくさんと呼ばれてます) ・所属 株式会社Schoo 基盤開発ユニット ・職種 バックエンドエンジニア プロジェクトでの役割は、プロジェクトリーダー ・Playwright歴 3ヶ月w(色々勉強中の毎日) ・趣味 海外旅行、グルメ、ワイン、コーヒーなどなど よろしくお願いします！
8. システムリプレイスに伴うテ スト自動化の戦略 Playwrightの採用理由
9. 今弊社では、システムリプレイスに取り組んでいます システム老朽化 メンテナンスが困難であること サイト応答性の悪化 →リプレイスを行い、「次世代プラットフォームの 構築」を目指す →ページ単位の段階的リリース方式を採用 ×
10. テスト自動化の戦略 テストピラミッドの原則に則り結合 テストもしっかり自動化
11. なぜPlaywrightなのか ・開発継続性の観点 開発元(マイクロソフト)から考えた時に開発継続性が高いと考えた ・実行速度の観点 他のテストツールと比較してより実行速度が速い傾向がありそう ・情報が見つけやすい ・テストが書きやすい 例えば、自動待機機能があり、テストコードの記述に開発者が専念できる！(別のテ スト自動化ツール使った事がある身としてはこれが一番感動。。。！) ・機能が豊富！
12. Playwright導入方針と構成
13. Playwright導入にあたって悩んだこと ・どういった構成にしようか ・どこまでテストをするべきなのか ・テストデータの準備をどうしようか。 ・会員種別のテストをどのようにやろうか
14. Playwright導入時の大方針 ① ビジネス的に優先度の高いユーザーのテストを拡充する 法人向け会員や、個人で有料課金頂いている会員向けのテストの比重を重くする。(それ 以外の会員種別のテストを実施しないわけではない。)
15. Playwright導入時の大方針 ② サービスの根幹部分 / ユーザー体験を大きく損なうものテストを重点的に実施 例) ・ページごとに既存システム・新規システムが切り替わるのでそこでの認証・認可が適切 に機能するか ・授業が表示されて、対象のページに遷移できるかなど。
16. Playwright導入時の大方針 ③ データ作成の手順が煩雑だとしても、テストデータの作成も自動化を行う テストデータ作成の自動化を行い「社内スタッフが授業を登録し、それをお客様が閲覧す る」というように、実際の利用シーンに限りなく近い形でテストを行う。
17. 構成
18. ディレクトリ構成
19. GitHub Actionsの設定 複数ブラウザ/複数会員種別のテ ストをすることで、負荷が高まりテ ストが落ちる🥹 GHA上で複数台実行を行う Playwrightはテストを並列実行し てくれる
20. 課題・今後の対応
21. 課題 ・メンテナンス工数という観点で、Playwrightに時間を割ける開発者が少ない。 → 運用工数を下げる取り組みを行う ・何をどこまでテストをするのかという点についてはまだ考える余地がありそう バックエンド層の結合テストは強化できているが、フロントエンド層の結合テストが弱い状 況。E2Eの責務を一部フロントエンド層の結合テストに移管する必要があるかも。 → テスト戦略の見直し(結合テスト / E2Eテストの棲み分けを考えるなど)
22. 運用工数を下げるための取り組み〜Playwright MCPの活用〜 GitHub Copilot × PlaywrightMCPの活用 POMの実装もできてて、比較的 メンテナンスの高いコードを自 動生成し、テスト実行の成功ま で完了していることを確認
23. 運用工数を下げるための取り組み〜Playwright MCPの活用〜
24. 運用工数を下げるための取り組み〜Playwright MCPの活用〜 テストピラミッドの原則に則り結合 テストもしっかり自動化
25. アクセシビリティテストを入れていきたい！ まずは、WCAG基準のレベルAの問題をブロックしていく！
26. アクセシビリティテストを入れていきたい！
27. まとめ(所感) ・初期導入コストは結構かかったものの、結合テスト + Playwrightの組み合わせで早期 バグ発見に繋がったケースやもあり、思ったより早い段階で効果を実感できた。 ・複数間ブラウザテスト、複数会員種別のテストの自動化・データ作成自動化などにより 手動テスト工数削減には少なからず繋がっている。 ・自動待機機能やUIモードなどの機能が豊富で、テストコードを書くことに専念できた。 ・
28. ご清聴ありがとうございまし た🙏