こんにちは、デジタルトランスフォーメーション(DX)事業本部のエンジニアの中嶋(@nyamadorim)です。もともと Rails のサーバサイド開発をメインに担当していましたが、今期はフロントエンド開発に取り組んでいます。 この記事では、「おうちの語り部*1」というプロダクトにビジュアルリグレッションテストを導入して、CSS の改善サイクルが回り始めた話を紹介します。 ビジュアルリグレッションテストとは ビジュアルリグレッションテスト導入の動機 テストツールの選定 reg-suit 他のテストツール reg-suit によるテスト環境の構築 reg-suit によるビジュアルリグレッションテストのフロー reg-suit の利用イメージ 差分が見つかれば、Pull Request に通知 どのページ/コンポーネントが変わったかを見る ピクセル単位で差分を確認する 差分がなければ ✨✨ R
![reg-suit によるビジュアルリグレッションテストで Rails アプリの CSS 改善サイクルが回り始めた話 - Speee DEVELOPER BLOG](https://cdn-ak-scissors.b.st-hatena.com/image/square/3add4e3ddc901237653747eb028504a5c7e906c8/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fn%2Fnyamadori%2F20200605%2F20200605164625.png)