Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
StotybookからはじめるVRT -個人開発編-
Search
arrow2nd
March 10, 2025
Technology
1
1.3k
StotybookからはじめるVRT -個人開発編-
arrow2nd
March 10, 2025
Tweet
Share
More Decks by arrow2nd
See All by arrow2nd
読書記録サービス yondako をつくった
arrow2nd
0
48
Other Decks in Technology
See All in Technology
AI駆動で進化する開発プロセス ~クラスメソッドでの実践と成功事例~ / aidd-in-classmethod
tomoki10
1
740
製造業向けIoTソリューション提案資料.pdf
haruki_uiru
0
120
Cross Data Platforms Meetup LT 20250422
tarotaro0129
1
910
Linuxのパッケージ管理とアップデート基礎知識
go_nishimoto
1
700
勝手に!深堀り!Cloud Run worker pools / Deep dive Cloud Run worker pools
iselegant
4
620
地味にいろいろあった! 2025春のAmazon Bedrockアップデートおさらい
minorun365
PRO
2
550
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
7
63k
Databricksで完全履修!オールインワンレイクハウスは実在した!
akuwano
0
140
ドキュメント管理の理想と現実
kazuhe
3
310
AIコーディングの最前線 〜活用のコツと課題〜
pharma_x_tech
4
2.9k
白金鉱業Meetup_Vol.18_生成AIはデータサイエンティストを代替するのか?
brainpadpr
4
220
Winning at PHP in Production in 2025
beberlei
1
270
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Embracing the Ebb and Flow
colly
85
4.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
How to Think Like a Performance Engineer
csswizardry
23
1.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
590
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.2k
4 Signs Your Business is Dying
shpigford
183
22k
Optimising Largest Contentful Paint
csswizardry
37
3.2k
Statistics for Hackers
jakevdp
798
220k
Transcript
StotybookからはじめるVRT -個人開発編- arrow2nd / E2Eテスト自動化の事例4選 ~Playwright活用編~
arrow2nd といいます あろーって読むことが多いです ちょっと株式会社 で フロントエンドエンジニアをしています 自己紹介
ab つくっているサービスについe Wb StorybookのVRTを導入したのはなぜ b Playwrightを選んだ理由は Çb 実例と工夫したとこÁ `b 導入してみe
Tb さいごに 流れ
「個人開発」の話です! chot Inc. のプロダクトではありません
つくっている サービスについて
サービスについて ️ yondako.com よんだことをわすれないための 読書記録サービス コミュニティ機能などがなく、 読書状況の記録に特化
サービスについて 2024年5月 から開発をはじめて、8月にリリース 7月〜8月がピークでガッとつくった
StorybookのVRTを 導入したのはなぜ?
動機 T デザイン頑張ったので壊れてほしくな3 T 個人開発なのでかけられる時間に限りがあ) T コンポーネントや関数の単体テストだけじゃ心許ない → 時間をかけずに導入できて、かつ効果もそれなりにある テストがほしい……
それ、StorybookのVRTかも 2 既にStorybookを導入していた 2 1つのテストファイルで、全ての コンポーネントのVRTができる 2 最低限、コンポーネントの見た目は守って くれる
Playwrightを選んだ 理由は?
ツールを増やしたくなかった P Playwright はどうせ使うつもりだっ( 2 E2E テストも書いていく予& 2 今後に足掛かりにもなる P
VRT に必要な「撮影・比較・差分出力」は Playwright のみで可r 2 できるならこれでいいんじゃない?の気持ち
テストが遅くなったときも安心 4 分割実行のサポートが手厚0 ) Actionsのサンプルもある 4 テストレポートのマージ機e ) npx playwright
merge-reports https://playwright.dev/docs/test-sharding
実例と工夫したところ
撮影→比較の流れ I% index.jsonからコンポーネントの情報 を取# !% ループで各コンポーネントを撮 % 保存済みの画像と比較 https://github.com/yondako/yondako/ blob/66f545bac09f4a714601cf33f85b42c34dce4aed/.storybook/stories.spec.ts
テストの失敗を減らす工夫
詳しくは… https://github.com/yondako/yondako
導入してみて
安心してTailwindの更新ができた codemodとちょっとの手直しで移行はできたけど怖8 g 設定ファイルがCSSになっB g 一部のカラートークン名が変更されてる → どっか壊れてそう……
安心してTailwindの更新ができた
安心してTailwindの更新ができた 安心・・・
テストレポートはデプロイすべきかも Artifactに保存して、手元で確認するようにしてい2 % 確認する手間が結構つら9 % 「まぁ、大丈夫か…」で見なくなってしまう (なった) → つらくなったらWeb上で確認できる環境をつくると良さそう
None
️ https://zenn.dev/chot/articles/cbb5e8fb6711f8
さいごに
さいごに T VRTは最小限でもあると安5 Q 人間だと自分が変更した範囲の確認に留まってしまいが Q 仕組みで守ってあげることで思わぬ差分を検知できる T まずはStorybookからはじめてみませんm Q
前提のハードルがちょっとあるけど、導入しやすく、効果もあ Q 様子を見て、ページのVRTやE2Eテストと徐々に広げていくのも よさそう
宣伝です!
None
None
ありがとうございました!