微妙な違いも見逃すな！ビジュアルリグレッションテスト！ by 大橋佑太

PHPを書きながらフロントエンドも書いている！という人も多いのではないでしょうか？わたしも最近そんな感じでバックエンドはLaravel、フロントエンドはNuxt.jsを使って開発をしています。

APIはPHPに任せてフロントをNuxt.jsで実装しているとかなり責務が分かれていい感じだなと思っているのですが、その分Nuxt.js側でのCSSの変更などによるデグレが気になるようになりました。そこで最近取り入れているのがAtomicDesignとビジュアルリグレッションテストです。AtomicDesignの採用によりコンポーネント単位で実装するようになるので、そのコンポーネント単位で見た目のテストができ意図しない変更に気付きやすくなります。

このセッションでは、わたしがStorybook、REG-SUIT、CodeBuild、Github Enterpriseを組み合わせて構築したビジュアルリグレッションテスト環境の技術要素や運用状況についてご紹介します。

Track ID: Track2-5-B
Discord Channel: #track2-5-b-visual-regression-test