Storybook Test ruuner で安定した Visual Regression Testing を行う

2024/02/19 12 users

はじめに 株式会社ナレッジワーク Engineering Division のわだまる（@wadackel）です。 ナレッジワークの Web フロントエンド開発では、Storybook を活用したコンポーネント開発を行っています。そして、昨年末により良いコンポーネント開発の基盤整備を進めるべく @storybook/test-runner（以降 Srorybook Test ruuner... 続きを読む

iOSアプリ開発でVisual Regression Testingを導入しUIのデグレ検知を自動化した話 - Uzabase for Engineers

2023/06/05 9 users iOSアプリ開発 自動化

NewsPicks Mobile App Unitでインターンをしているりゅう(@ryu_hu03)です。 NewsPicksのiOSおよびAndroidアプリは基本的に週一で新しいバージョンがリリースされています。 リリース作業の多くは自動化されており、重要な機能についてはUIテストによって品質が担保されるようになっているのですが、見た目上のデザイン崩... 続きを読む

2023年にVisual Regression Testingを始めるならどんな選択肢があるか

2022/12/12 14 users 選択肢 VRT アプリケーション フロントエンド 用語

はじめに フロントエンドのテスト手法の 1 つに Visual Regression Testing（以下、VRT）があります。 これは、アプリケーションの画面を画像として保存し、画像の差分比較をすることで意図せぬ変更が生じていないかテストする方法です。 ここ数年で広く普及し、用語としても一般的になったように思います。 私も以前、... 続きを読む

StorybookのUI Testing Handbookを読んだ

2022/01/19 15 users StorYBook yama vol.5

Transcript Storybook ͷ UI Testing Handbook ΛಡΜͩ 2022-01-19 ϑϩϯτΤϯυLTձ - vol.5ɹ#frontendlt ࣗݾ঺հ Shingo Yamazaki • גࣜձࣾϩάϥε • ࡢ೥9݄͔Β University of the People Ͱ 
 ίϯϐϡʔλʔαΠΤϯεษڧத zaki-yama zaki___yama ͸͡Ίʹ ϑϩϯτΤϯυͷςετʹର͢Δ೰Έ • ϑϩϯτΤϯυͷςετɺԿΛͲ͜·Ͱॻ͍ͨΒ͍͍΋ͷ͔… • Ͳ͏͍͏؍఺ͰςετΛॻ͍ͨΒ͍͍ͷ͔ • ࠷ۙ͸Visual Regression Testingͱ͔Α͘ฉ͘ɻͦΕҎ֎͸…ʁ • ൺֱతมߋ͕... 続きを読む

Angular+Storybookで画像回帰テストを小さくはじめる - Classi開発者ブログ

2021/09/09 5 users angular classi StorYBook パク なか

Classiのフロントエンドエキスパートチームのlacolacoです。最近AngularのプロジェクトでStorybookをベースにしたUIコンポーネントの画像回帰テストをはじめたので、この記事ではそのなかで学んだことを共有します。 画像回帰テスト 画像回帰テスト（visual regression testing）は、UIの見た目のバグを防ぐためのテスト... 続きを読む

N 予備校に Visual Regression Testing を導入した話 + tips - ドワンゴ教育サービス開発者ブログ

2021/04/30 11 users Tips reg-suit berlysia 予備校 工夫

こんにちは。N 予備校 Web フロントエンド開発チームの berlysia です。 N 予備校の Web フロントエンド開発に、 Storycap + reg-suit による Visual Regression Testing を導入しました。設定の工夫から、設定中や運用してしばらくの間に実際に発生したハマりどころを挙げ、簡単に注意点や対処例を紹介します。 背景 周... 続きを読む