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

by arrow2nd

Slide 1

Slide 1 text

StotybookからはじめるVRT -個人開発編- arrow2nd / E2Eテスト自動化の事例4選 ~Playwright活用編~

Slide 2

Slide 2 text

arrow2nd といいますあろーって読むことが多いですちょっと株式会社でフロントエンドエンジニアをしています自己紹介

Slide 3

Slide 3 text

ab つくっているサービスについe Wb StorybookのVRTを導入したのはなぜ b Playwrightを選んだ理由は Çb 実例と工夫したとこÁ `b 導入してみe Tb さいごに流れ

Slide 4

Slide 4 text

「個人開発」の話です！ chot Inc. のプロダクトではありません

Slide 5

Slide 5 text

つくっているサービスについて

Slide 6

Slide 6 text

サービスについて ️ yondako.com よんだことをわすれないための読書記録サービスコミュニティ機能などがなく、読書状況の記録に特化

Slide 7

Slide 7 text

サービスについて 2024年5月から開発をはじめて、8月にリリース 7月〜8月がピークでガッとつくった

Slide 8

Slide 8 text

StorybookのVRTを導入したのはなぜ？

Slide 9

Slide 9 text

動機 T デザイン頑張ったので壊れてほしくな3 T 個人開発なのでかけられる時間に限りがあ) T コンポーネントや関数の単体テストだけじゃ心許ない → 時間をかけずに導入できて、かつ効果もそれなりにあるテストがほしい……

Slide 10

Slide 10 text

それ、StorybookのVRTかも 2 既にStorybookを導入していた 2 1つのテストファイルで、全ての  コンポーネントのVRTができる 2 最低限、コンポーネントの見た目は守ってくれる

Slide 11

Slide 11 text

Playwrightを選んだ理由は？

Slide 12

Slide 12 text

ツールを増やしたくなかった P Playwright はどうせ使うつもりだっ( 2 E2E テストも書いていく予& 2 今後に足掛かりにもなる P VRT に必要な「撮影・比較・差分出力」は Playwright のみで可r 2 できるならこれでいいんじゃない？の気持ち

Slide 13

Slide 13 text

テストが遅くなったときも安心 4 分割実行のサポートが手厚0 ) Actionsのサンプルもある 4 テストレポートのマージ機e ) npx playwright merge-reports https://playwright.dev/docs/test-sharding

Slide 14

Slide 14 text

実例と工夫したところ

Slide 15

Slide 15 text

撮影→比較の流れ I% index.jsonからコンポーネントの情報を取# !% ループで各コンポーネントを撮 % 保存済みの画像と比較 https://github.com/yondako/yondako/ blob/66f545bac09f4a714601cf33f85b42c34dce4aed/.storybook/stories.spec.ts

Slide 16

Slide 16 text

テストの失敗を減らす工夫

Slide 17

Slide 17 text

詳しくは… https://github.com/yondako/yondako

Slide 18

Slide 18 text

導入してみて

Slide 19

Slide 19 text

安心してTailwindの更新ができた codemodとちょっとの手直しで移行はできたけど怖8 g 設定ファイルがCSSになっB g 一部のカラートークン名が変更されてる → どっか壊れてそう……

Slide 20

Slide 20 text

安心してTailwindの更新ができた

Slide 21

Slide 21 text

安心してTailwindの更新ができた安心・・・

Slide 22

Slide 22 text

テストレポートはデプロイすべきかも Artifactに保存して、手元で確認するようにしてい2 % 確認する手間が結構つら9 % 「まぁ、大丈夫か…」で見なくなってしまう (なった) → つらくなったらWeb上で確認できる環境をつくると良さそう

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

️ https://zenn.dev/chot/articles/cbb5e8fb6711f8

Slide 25

Slide 25 text

さいごに

Slide 26

Slide 26 text

さいごに T VRTは最小限でもあると安5 Q 人間だと自分が変更した範囲の確認に留まってしまいが Q 仕組みで守ってあげることで思わぬ差分を検知できる T まずはStorybookからはじめてみませんm Q 前提のハードルがちょっとあるけど、導入しやすく、効果もあ Q 様子を見て、ページのVRTやE2Eテストと徐々に広げていくのもよさそう