Hatena Blog Tags
はてなブログ トップ
Visual Regression Test
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

Visual Regression Test

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
DTダイナミクス テックブログ•10ヶ月前

BackstopJSで手軽にUI変更の差分を確認してみる

DTダイナミクスで板金・溶接Webの開発をしている田門です。 主に板金・板金溶接サービスのフロントエンドを担当しています。 今日は、Visual Regression Test(以下VRT)ができるBackstopJSを使って、開発中画面の変更点を一目で把握できるか試してみました。 VRTを試した経緯 BackstopJSで修正前後の差分を確認してみる 導入の手順 テストの実行 結果 おわりに VRTを試した経緯 meviyを使用して、部品が実際にユーザーの元へ届くまでのおおまかなフローは下記になります。 CADファイルをアップロードしプロジェクトを作成する プロジェクトを3DViewer画面…

#BackstopJS#Visual Regression Test

関連ブログ

ROUTE06 Tech Blog•3年前

GitHub Actionsで実行するstorycap / reg-suit の高速化

こんにちは！ROUTE06 プロダクトデベロップメント本部の @mh4gf です。 現在僕が関わっているプロジェクトでは、実装の変更に伴う UI のデグレードを検知するためにstorycapとreg-suitを利用した Visual Regression Test を GitHub Actions で実施しています。 運用を進める中で撮影対象のスクリーンショット数も増え、テスト実行時間の増加に悩まされてきました。テスト高速化に取り組みいくつかの改善に成功したため、この記事でその方法を紹介します。 3 行まとめ まず最初に取り組むべき並列実行の基本についてはこの記事を参照してください https…

#Storybook#GitHub Actions#Visual Regression Test
hacomono TECH BLOG•4年前

Nuxt3 モックサーバモードで Playwright を使った Visual Regression Test

どうも、フロントエンドの開発基盤を担当している、みゅーとん(@_mew_ton)です 前回 (Nuxt3 でモックサーバ作ってみる) では Nuxt3 でモックサーバモードの実装について紹介しました。 今回は、これを使って E2E テストを実装する体制を整えたので、紹介します！ ビジュアルリグレッションテストとは？ ざっくりいうと、変更前と後での見た目を画像差分で比較し、変化がないかどうかをテストする方法です。 スナップショットテストなどと表記される場合もありますが、スナップショットテストでは DOM 構造を文字列としてスナップショットするケースが有り、厳密には一致しません。 ページのビジュア…

#hacomono#playwright#Nuxt3#Visual Regression Test#frontend#E2E Test