タグ VRT
人気順 5 users 50 users 100 users 500 users 1000 usersフロントエンド開発の効率化!Nx と Playwright でビジュアルリグレッションテストを賢く実施しよう - Techtouch Developers Blog
はじめに なぜ VRT が必要なのか? VRTとは? Nx と Playwright で賢く VRT を実施する どう賢く実施したか 結果 まとめ 参考資料 はじめに 「食べログ ラーメン TOKYO 百名店」の全店舗訪問を目指してラーメン巡りを続けているフロントエンドエンジニアの kenshin です。 フロントエンド開発者の皆さん、新機能を追加し... 続きを読む
GitHub Actions のみで、actions/cache も使わない最軽量の VRT
Web アプリケーション開発での VRT 導入は、ちゃんと運用するとなると以下のような多くの検討事項を伴います。 Storybook のストーリーベースで比較するか?それとも実アプリケーションの URL ベースで比較するか? CI 上でアプリケーションをビルドして dev server を立ち上げるか、それともデプロイ先のアプリケーショ... 続きを読む
Visual Regression Testをサポートするreg-actionsをリリースした
Visual Regression Test(以下VRT)をやろうと思うと画像をどこに保存するかを検討する必要がでてくるケースがある。 (web アプリケーションのVRTを前提とすると)多くの場合、テキスト形式である*.snapとは異なり、画像取得時のOSやfont、ブラウザのversionなどにより差分がでやすくなってしまう。そのため画像はCIなど環... 続きを読む
2023年にVisual Regression Testingを始めるならどんな選択肢があるか
はじめに フロントエンドのテスト手法の 1 つに Visual Regression Testing(以下、VRT)があります。 これは、アプリケーションの画面を画像として保存し、画像の差分比較をすることで意図せぬ変更が生じていないかテストする方法です。 ここ数年で広く普及し、用語としても一般的になったように思います。 私も以前、... 続きを読む