storycap-testrun と reg-actions でお手軽 Visual Regression Test

自己紹介

ygkn ygkn.icon

フロントエンドカンファレンス北海道の懇親会でゆめみでアクセシビリティを広めるためにやっていることを喋ってた人

こんなことはありませんか？

UIライブラリ、Reset CSS などの依存パッケージを更新した！

いろいろな箇所で使われているコンポーネントを更新した！

どこかでスタイル崩れを起こしてないか不安…

全部のコンポーネントのスクリーンショットを撮って差分比較できればなぁ…

それ、できます！

スクリーンショットを撮って差分比較するテスト = Visual Regression Test

Visual = 視覚的な

Regression Test = 回帰テスト

前にテストしたソフトウェアが変更後もまだ動作するかどうかを、（中略）確認する作業のこと

https://www.youtube.com/watch?v=_yBl_mhOO2k

Storybook で VRT をやる

メリット

Storyがあればできる！

デメリット

Storyがないとできない

storycap-testrun

Storybook test runner 上でStoryのスクリーンショットを撮る

reg-actions

GitHub Actions 上でスクリーンショットの差分を検出する