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
66
Other Decks in Technology
See All in Technology
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
160
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
800
Rustから学ぶ 非同期処理の仕組み
skanehira
1
130
Agile PBL at New Grads Trainings
kawaguti
PRO
1
420
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
21
10k
KotlinConf 2025_イベントレポート
sony
1
130
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
110
BPaaSにおける人と協働する前提のAIエージェント-AWS登壇資料
kentarofujii
0
140
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
540
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
230
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
bitkey
PRO
1
130
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
150
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Unsuck your backbone
ammeep
671
58k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building an army of robots
kneath
306
46k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Gamification - CAS2011
davidbonilla
81
5.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
How GitHub (no longer) Works
holman
315
140k
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
ありがとうございました!