StorybookとPlaywrightではじめるインタラクションテスト

この発表では、株式会社enechainにおいて導入したPlaywrightを使ったインタラクションテストの事例を紹介します。

E2Eテスト自動化の事例4選 ~Playwright活用編~で発表した内容です
https://findy.connpass.com/event/346097/

Links
- TechBlog
- Playwright Components
- VS Code Plugin
- Playwright Sharding
- chromatic TurboSnap
- vite-plugin-turbosnap

Transcript

1. 0 StorybookとPlaywrightではじめる インタラクションテスト 株式会社 enechain 中山晶平 (@nakker1218) E2Eテスト自動化の事例 4選 ~Playwight活用例~
2. 1 • 株式会社enechain • 中山晶平 (Shohei Nakayama) • @nakker1218 • 札幌在住 󰪟 🏕 • ソフトウェアエンジニア ◦ Webアプリケーション ◦ フロントエンド中心 E2Eテスト自動化の事例 4選 ~Playwright活用編~
3. 2 E2Eテスト自動化の事例 4選 ~Playwright活用編~ • Agenda ◦ インタラクションテストを導入した課題感・背景 ◦ なぜPlaywrightを選定したか ◦ Playwright上でのインタラクションテストの実現 ◦ 導入して
4. 3 インタラクションテストを導入したプロダクト • enechain ◦ エネルギーのマーケットプレイスを運営 するスタートアップ ◦ 電力, 燃料, 環境価値 • eNgine ◦ 取引を管理する社内システム ◦ 複雑なドメインをカバー しながら、素早 く操作できる設計 ◦ ミスが起こると事業に与える影響大 E2Eテスト自動化の事例 4選 ~Playwright活用編~
5. 4 アプリケーションの特徴 • 複雑なドメインをカバーするための細かい要件 • ミスなく素早く操作するための高機能な操作性 ◦ ポップアップウィンドウ , ショートカットキーなど • これまでに発生したバグ ◦ ポップアップウィンドウ上でのみ機能が動かない ◦ 機能のショートカットキーが動かなくなっていた ◦ 特定の要素が選択されているときに表示されるはずの フォームが表示されない E2Eテスト自動化の事例 4選 ~Playwright活用編~
6. 5 すべての機能を手動テストで担保し続けることはコストが高い 󰗔 QAにかかる時間も増える 󰗔 リリース頻度の低下、価値提供の総量が減ることに繋がる
7. 6 󰗔 自動テストで担保する範囲を広げることが重要
8. 7 自動テストの戦略 • ユーザーが業務で行う操作が問題なく動くことを保証する ◦ コード自体には問題がなくても、業務上想定している挙動とは異なってしまうことがある ◦ 一度決まって運用に乗った業務フローの変更頻度は、 コードの変更頻度よりも低い傾向にある • 実際の操作に焦点を当てたテスト • End to Endテスト ◦ 実際のAPIに繋いでシステム全体のワークフローを検証する -> MagicPodを利用 • インタラクションテスト ◦ 各ユースケースの状態において期待通りに操作できるかを検証する -> Playwrightを利用 E2Eテスト自動化の事例 4選 ~Playwright活用編~
9. 8 E2Eテスト自動化の事例 4選 ~Playwright活用編~ • Agenda ◦ インタラクションテストを導入した課題・背景 ◦ なぜPlaywrightを選定したか ◦ Playwright上でのインタラクションテストの実現 ◦ 導入して
10. 9 なぜPlaywrightを選定したか • インタラクションテストの選択肢 ◦ Storybook Test runner, Playwright, React Testing Libraryなど • Playwrightを選んだ理由 ◦ 実際のブラウザ上でテストができること ◦ Storybookとの組み合わせでコンポーネントに対してテストができる ◦ PlaywrightのVS Code Pluginが強力 ◦ 社内の別プロダクトで導入事例があったこと E2Eテスト自動化の事例 4選 ~Playwright活用編~
11. 10 なぜPlaywrightを選定したか • 実際のブラウザ上でテストができること ◦ 先の選択肢の中だと React Testing Library以外はあればブラウザ上での実行 ◦ Storybook Test runnerは describe、test に相当するものがなく複雑なテストを書きにくかった • Storybookとの組み合わせでコンポーネントに対してテストができる ◦ Playwright Componentsも出てるがまだ experimental • PlaywrightのVS Code Pluginが強力 ◦ GUI上からコード生成や検証ができる • 社内の別プロダクトで導入事例があったこと E2Eテスト自動化の事例 4選 ~Playwright活用編~
12. 11 E2Eテスト自動化の事例 4選 ~Playwright活用編~ • Agenda ◦ インタラクションテストを導入した課題・背景 ◦ なぜPlaywrightを選定したか ◦ Playwright上でのインタラクションテストの実現 ◦ 導入して
13. 12 Storybookの整備 E2Eテスト自動化の事例 4選 ~Playwright活用編~
14. 13 PlaywrightでStorybookを読み込む E2Eテスト自動化の事例 4選 ~Playwright活用編~
15. 14 インタラクションテストの実装 E2Eテスト自動化の事例 4選 ~Playwright活用編~
16. 15 CIで検証 • GitHub Actions上でPR事に実行 E2Eテスト自動化の事例 4選 ~Playwright活用編~
17. 16 E2Eテスト自動化の事例 4選 ~Playwright活用編~ • Agenda ◦ インタラクションテストを導入した課題・背景 ◦ なぜPlaywrightを選定したか ◦ Playwright上でのインタラクションテストの実現 ◦ 導入して
18. 17 導入して • メリット ◦ 人間による QAの工数を減らせた ◦ デグレの早期発見ができた ◦ VRT導入にもつながった • デメリット ◦ CIの実行時間が伸びた ◦ モックデータの作成が大変 ◦ テストを書く・更新するコストが高い E2Eテスト自動化の事例 4選 ~Playwright活用編~
19. 18 CIの実行時間削減の工夫 • PlaywrightのSharding機能を使ってテストの分割実行をする ◦ 10分割しても全ケース実行に 5-8分程度かかっていた • 変更に関係ないコンポーネントのテストを実行しないように ◦ chromaticのTurboSnapを参考に ▪ Gitの差分とコンポーネントの Dependency Graphをもとに 変更内容に関連したコンポーネントのみ snapshotを実行する機能 ◦ gitの差分とvite-plugin-turbosnapを使って、 変更に関連したコンポーネントのテストを抽出する CLIを作成 󰗔 1-2分程度まで削減 E2Eテスト自動化の事例 4選 ~Playwright活用編~ https://www.chromatic.com/docs/turbosnap/ Before After
20. 19 導入して • メリット ◦ 人間による QAの工数を減らせた ◦ デグレの早期発見ができた ◦ VRT導入にもつながった • デメリット ◦ CIの実行時間が伸びた ◦ モックデータの作成が大変 ◦ テストを書く・更新するコストが高い E2Eテスト自動化の事例 4選 ~Playwright活用編~
21. 20 • TechBlogで今回の取組みの詳細な説明 をしています！ • もっと詳しく話したい方 : ◦ Xやカジュアル面談 でお話しましょう！ • フロントエンドエンジニア募集中です！ E2Eテスト自動化の事例 4選 ~Playwright活用編~ 宣伝