Playwright で一番小さく始める VRT と、次のステップの選択肢

2024/02/21 5 users playwright 選択肢 ステップ

2024/02/21 ビジュアルリグレッションテストツール４選！ユーザーが語る各ツールのメリット で発表したスライドです。 https://trident-qa.connpass.com/event/308664/ 参照したURL - https://playwright.dev/docs/test-snapshots - https://zenn.dev/mh4gf/articles/tiny-vrt-with-github-actions - https://tech.route... 続きを読む

GitHub Actions のみで、actions/cache も使わない最軽量の VRT

2023/12/24 57 users アプリケーショ Actions StorYBook 最軽量

Web アプリケーション開発での VRT 導入は、ちゃんと運用するとなると以下のような多くの検討事項を伴います。 Storybook のストーリーベースで比較するか？それとも実アプリケーションの URL ベースで比較するか？ CI 上でアプリケーションをビルドして dev server を立ち上げるか、それともデプロイ先のアプリケーショ... 続きを読む

Visual Regression Testをサポートするreg-actionsをリリースした

2023/11/14 10 users Snap Visual Regression Test

Visual Regression Test(以下VRT)をやろうと思うと画像をどこに保存するかを検討する必要がでてくるケースがある。 (web アプリケーションのVRTを前提とすると)多くの場合、テキスト形式である*.snapとは異なり、画像取得時のOSやfont、ブラウザのversionなどにより差分がでやすくなってしまう。そのため画像はCIなど環... 続きを読む

Visual Regression Testが誤検知した動画やアニメーションの問題解決 - Uzabase for Engineers

2023/02/28 7 users Visual Regression Test 問題解決

NewsPicksのWeb Reader Experience Unitで学生インターンをしています。西(@yukinissie)です。 弊チームの開発基盤では、reg-suitやstorycapを利用したVisual Regression Test（以降 VRT）を導入しています。本ブログではVRTが誤検知した動画やアニメーション周りの問題に対してどのように解決したかをそれぞれご紹介し... 続きを読む

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

2022/12/12 14 users Visual Regression Testing 用語

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

共通コンポーネントのテスト実装方法にあえてVRTを選択した話 / why do we choose VRT for testing shared components

2022/10/16 5 users Chromatic リグレッションテスト ネンド https

共通コンポーネントのテスト実装方法にあえてVRTを選択した話 / why do we choose VRT for testing shared components Vue Fes Japan 2022 の発表内容です https://vuefes.jp/2022/sessions/KushibikiMashu ■ 概要 社内のコンポーネントライブラリに対してStorybookとChromaticでビジュアルリグレッションテストを導入し... 続きを読む