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.2k
StotybookからはじめるVRT -個人開発編-
arrow2nd
March 10, 2025
Tweet
Share
More Decks by arrow2nd
See All by arrow2nd
読書記録サービス yondako をつくった
arrow2nd
0
46
Other Decks in Technology
See All in Technology
白金鉱業Meetup_Vol.18_AIエージェント時代のUI/UX設計
brainpadpr
1
210
Perl歴約10年のエンジニアがフルスタックTypeScriptに出会ってみた
papix
1
160
彩の国で始めよう。おっさんエンジニアから共有したい、当たり前のことを当たり前にする技術
otsuki
0
160
地味にいろいろあった! 2025春のAmazon Bedrockアップデートおさらい
minorun365
PRO
1
480
Aspire をカスタマイズしよう & Aspire 9.2
nenonaninu
0
180
Goの組織でバックエンドTypeScriptを採用してどうだったか / How was adopting backend TypeScript in a Golang company
kaminashi
12
8.6k
Running JavaScript within Ruby
hmsk
3
380
Dataverseの検索列について
miyakemito
1
110
Bazel for Ruby (RubyKaigi 2025)
p0deje
0
120
JPOUG Tech Talk #12 UNDO Tablespace Reintroduction
nori_shinoda
2
160
4/17/25 - CIJUG - Java Meets AI: Build LLM-Powered Apps with LangChain4j (part 2)
edeandrea
PRO
0
130
ガバクラのAWS長期継続割引 ~次の4/1に慌てないために~
hamijay_cloud
1
450
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Facilitating Awesome Meetings
lara
54
6.3k
Speed Design
sergeychernyshev
29
900
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.6k
Fireside Chat
paigeccino
37
3.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
4 Signs Your Business is Dying
shpigford
183
22k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Music & Morning Musume
bryan
47
6.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
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
ありがとうございました!