StotybookからはじめるVRT -個人開発編-

Transcript

1. StotybookからはじめるVRT -個人開発編- arrow2nd / E2Eテスト自動化の事例4選 ~Playwright活用編~
2. arrow2nd といいます あろーって読むことが多いです ちょっと株式会社 で フロントエンドエンジニアをしています 自己紹介
3. ab つくっているサービスについe Wb StorybookのVRTを導入したのはなぜ b Playwrightを選んだ理由は Çb 実例と工夫したとこÁ `b 導入してみe Tb さいごに 流れ
4. 「個人開発」の話です！ chot Inc. のプロダクトではありません
5. つくっている サービスについて
6. サービスについて ️ yondako.com よんだことをわすれないための 読書記録サービス コミュニティ機能などがなく、 読書状況の記録に特化
7. サービスについて 2024年5月 から開発をはじめて、8月にリリース 7月〜8月がピークでガッとつくった
8. StorybookのVRTを 導入したのはなぜ？
9. 動機 T デザイン頑張ったので壊れてほしくな3 T 個人開発なのでかけられる時間に限りがあ) T コンポーネントや関数の単体テストだけじゃ心許ない → 時間をかけずに導入できて、かつ効果もそれなりにある テストがほしい……
10. それ、StorybookのVRTかも 2 既にStorybookを導入していた 2 1つのテストファイルで、全ての
 コンポーネントのVRTができる 2 最低限、コンポーネントの見た目は守って くれる
11. Playwrightを選んだ 理由は？
12. ツールを増やしたくなかった P Playwright はどうせ使うつもりだっ( 2 E2E テストも書いていく予& 2 今後に足掛かりにもなる P VRT に必要な「撮影・比較・差分出力」は Playwright のみで可r 2 できるならこれでいいんじゃない？の気持ち
13. テストが遅くなったときも安心 4 分割実行のサポートが手厚0 ) Actionsのサンプルもある 4 テストレポートのマージ機e ) npx playwright merge-reports https://playwright.dev/docs/test-sharding
14. 実例と工夫したところ
15. 撮影→比較の流れ I% index.jsonからコンポーネントの情報 を取# !% ループで各コンポーネントを撮 % 保存済みの画像と比較 https://github.com/yondako/yondako/ blob/66f545bac09f4a714601cf33f85b42c34dce4aed/.storybook/stories.spec.ts
16. テストの失敗を減らす工夫
17. 詳しくは… https://github.com/yondako/yondako
18. 導入してみて
19. 安心してTailwindの更新ができた codemodとちょっとの手直しで移行はできたけど怖8 g 設定ファイルがCSSになっB g 一部のカラートークン名が変更されてる → どっか壊れてそう……
20. 安心してTailwindの更新ができた
21. 安心してTailwindの更新ができた 安心・・・
22. テストレポートはデプロイすべきかも Artifactに保存して、手元で確認するようにしてい2 % 確認する手間が結構つら9 % 「まぁ、大丈夫か…」で見なくなってしまう (なった) → つらくなったらWeb上で確認できる環境をつくると良さそう
24. ️ https://zenn.dev/chot/articles/cbb5e8fb6711f8
25. さいごに
26. さいごに T VRTは最小限でもあると安5 Q 人間だと自分が変更した範囲の確認に留まってしまいが Q 仕組みで守ってあげることで思わぬ差分を検知できる T まずはStorybookからはじめてみませんm Q 前提のハードルがちょっとあるけど、導入しやすく、効果もあ„ Q 様子を見て、ページのVRTやE2Eテストと徐々に広げていくのも よさそう
27. 宣伝です！
30. ありがとうございました！