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.8k
StotybookからはじめるVRT -個人開発編-
arrow2nd
March 10, 2025
Tweet
Share
More Decks by arrow2nd
See All by arrow2nd
読書記録サービス yondako をつくった
arrow2nd
0
65
Other Decks in Technology
See All in Technology
スプリントレトロスペクティブはチーム観察の宝庫? 〜チームの衝突レベルに合わせたアプローチ仮説!〜
electricsatie
1
140
絶対に失敗できないキャンペーンページの高速かつ安全な開発、WINTICKET × microCMS の開発事例
microcms
0
360
つくって納得、つかって実感! 大規模言語モデルことはじめ
recruitengineers
PRO
32
12k
PRDの正しい使い方 ~AI時代にも効く思考・対話・成長ツールとして~
techtekt
PRO
0
270
DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす
hacusk
1
140
AIエージェントの活用に重要な「MCP (Model Context Protocol)」とは何か
masayamoriofficial
0
240
Browser
recruitengineers
PRO
7
2.1k
TypeScript入門
recruitengineers
PRO
33
11k
ヘブンバーンズレッドのレンダリングパイプライン刷新
gree_tech
PRO
0
430
Bye-Bye Query Spaghetti: Write Queries You'll Actually Understand Using Pipelined SQL Syntax
tobiaslampertlotum
0
120
新規案件の立ち上げ専門チームから見たAI駆動開発の始め方
shuyakinjo
0
630
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
2
1.6k
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
The Invisible Side of Design
smashingmag
301
51k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Being A Developer After 40
akosma
90
590k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Designing Experiences People Love
moore
142
24k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
Documentation Writing (for coders)
carmenintech
73
5k
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
ありがとうございました!