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.9k
StotybookからはじめるVRT -個人開発編-
arrow2nd
March 10, 2025
Tweet
Share
More Decks by arrow2nd
See All by arrow2nd
読書記録サービス yondako をつくった
arrow2nd
0
69
Other Decks in Technology
See All in Technology
コンテキストエンジニアリング入門〜AI Coding Agent作りで学ぶ文脈設計〜
kworkdev
PRO
0
310
【Kaigi on Rails 事後勉強会LT】MeはどうしてGirlsに? 私とRubyを繋いだRail(s)
joyfrommasara
0
230
能登半島災害現場エンジニアクロストーク 【JAWS FESTA 2025 in 金沢】
ditccsugii
0
520
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
160
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
3
420
Performance Insights 廃止から Database Insights 利用へ/transition-from-performance-insights-to-database-insights
emiki
0
240
そのWAFのブロック、どう活かす? サービスを守るための実践的多層防御と思考法 / WAF blocks defense decision
kaminashi
0
180
エンタメとAIのための3Dパラレルワールド構築(GPU UNITE 2025 特別講演)
pfn
PRO
0
220
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
0
480
Where will it converge?
ibknadedeji
0
210
from Sakichi Toyoda to Agile
kawaguti
PRO
1
120
CoRL 2025 Survey
harukiabe
0
160
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Rails Girls Zürich Keynote
gr2m
95
14k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Done Done
chrislema
185
16k
We Have a Design System, Now What?
morganepeng
53
7.8k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Automating Front-end Workflow
addyosmani
1371
200k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Being A Developer After 40
akosma
91
590k
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
ありがとうございました!