タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
reg-suitとCypressを使ってビジュアルリグレッションテストを導入した話 - SMARTCAMP Engineer Blog
こんにちは！スマートキャンプでインサイドセールスに特化した SaaSを作っているエンジニアの井上です。 携わっている上記のプロダクトは使いやすさにこだわっているため、UIの修正を行うことが多々あります。 そんななかで起こった問題の対応としてビジュアルリグレッションテストを導入したので、今回はその話をできればと思います。 背景 ビジュアルリグレッションテストとは？ ビジュアルリグレッションテストをやる目的 何をテストをするのか？ 使用したツール Cypress reg-suit 画像を取得する 画像の差分を検知する Circle CIによる自動化 ベース画像の自動更新 ビジュアルリグレッションテストの実行 ハマったところ 結果どうなったか reg-suitの結果画面 今後の改善・取り組みたいこと 背景 ビジュアルリグレッションテストを導入する前に、UIに大きく影響する改修がありました。 影響
reg-suit によるビジュアルリグレッションテストで Rails アプリの CSS 改善サイクルが回り始めた話 - Speee DEVELOPER BLOG
こんにちは、デジタルトランスフォーメーション（DX）事業本部のエンジニアの中嶋（@nyamadorim）です。もともと Rails のサーバサイド開発をメインに担当していましたが、今期はフロントエンド開発に取り組んでいます。 この記事では、「おうちの語り部*1」というプロダクトにビジュアルリグレッションテストを導入して、CSS の改善サイクルが回り始めた話を紹介します。 ビジュアルリグレッションテストとは ビジュアルリグレッションテスト導入の動機 テストツールの選定 reg-suit 他のテストツール reg-suit によるテスト環境の構築 reg-suit によるビジュアルリグレッションテストのフロー reg-suit の利用イメージ 差分が見つかれば、Pull Request に通知 どのページ/コンポーネントが変わったかを見る ピクセル単位で差分を確認する 差分がなければ ✨✨ R
reg-suit と storycap で行う Visual Regression Testing の高速化 - wadackel.me
はじめに 過去このブログでは Visual Regression Testing（以降 VRT）に関連した記事をいくつか書いてきました。 Puppeteer を使った Storybook の自動スクリーンショット撮影用のアドオンを作った - wadackel.me reg-viz のリブランディングをした - wadackel.me reg-cli の Report UI をリニューアルした - wadackel.me Storybook と reg-suit で気軽にはじめる Visual Regression Testing - wadackel.me 関連ツールへのコントリビュートから始まり、現在業務でも活用しています。業務で扱うプロジェクトでは、検証対象となるケースが約 2,500 程度になっていて、実行時間に不満が出るようになりました。 今年の 1 月頃にその不満を解消するため高
GitHub Actionsで実行するstorycap / reg-suit の高速化 - ROUTE06 Tech Blog
こんにちは！ROUTE06 プロダクトデベロップメント本部の @mh4gf です。 現在僕が関わっているプロジェクトでは、実装の変更に伴う UI のデグレードを検知するためにstorycapとreg-suitを利用した Visual Regression Test を GitHub Actions で実施しています。 運用を進める中で撮影対象のスクリーンショット数も増え、テスト実行時間の増加に悩まされてきました。テスト高速化に取り組みいくつかの改善に成功したため、この記事でその方法を紹介します。 3 行まとめ まず最初に取り組むべき並列実行の基本についてはこの記事を参照してください https://blog.wadackel.me/2022/vrt-performance-optimize/ turborepo を利用し storybook の差分ビルドを行う GitHub Actions
Cypress + reg-suitを使ったビジュアルリグレッションテスト - SO Technologies 開発者ブログ
こんにちは。ATOM事業部フロントエンドテックリード兼デザイナーの河原です。 ATOMでは現在大規模なリファクタリングを実施してます。 今回はその一環で ビジュアルリグレッションテスト を導入した事例を紹介します。 はじめに ビジュアルリグレッションテスト（VRT）とは 名前の通り見た目をテストするための手法です。 実際にブラウザにレンダリングした際のスクリーンショットを改修前後で比較し、ピクセル単位で差分を検出します。 一般的なE2Eテストコードでは検出困難な意図しないデザイン変更を検出することができます。 VRTの例 VRT導入で実現したかったこと バグの削減と早期発見 回帰テストの工数削減 これにより積極的なリファクタリングを可能にしたい 上記をなるべく楽して実現したい テストは費用対効果が大事ですよね。。 ATOMとは www.atom.tools ATOMは運用型広告統合管理プラ
開発もQAも自動テスト！「LOST JUDGMENT：裁かれざる記憶」のQAテスター参加で進化した「テスト自動化チーム（仮）」の取り組みについて
2019年7月31日、Vue.jsに関する知見を共有する勉強会「Roppongi.vue #2」が開催されました。Vue.jsをさまざまな角度から掘り下げるライトニングトークには4人が登場。「Reg suitで始めるお手軽画像差分テスト」に登壇したのは、おとべ氏です。登壇資料はこちら Reg suitで画像差分テスト おとべ氏：おとべです。このタイトルでLTしようと思うんですけど、ちょっとお気づきの方いらっしゃるかと思いますけど、スライド68枚あって大変で、5分じゃ収まりそうになりないので、マジでライトニングにすっ飛ばしつつ進めたいと思います。 自己紹介です。おとべです。僕も読み方がわからないIDでTwitterやGitHubとか全部やっているので、よかったら見てください。 また、ゆめみですね。出ました、ゆめみ。「全員CEO」とか「有給取り放題」とかいろいろ言ってるんですけど、僕はまだ
はじめに 社のフロントエンド開発で、品質担保施策の一環としてVRTを実施しています。 単純にコンポーネントをマウントした結果だけではなく、interaction test や msw-storybook-addon を合わせて活用し、pageやmodal単位の振る舞いの変化の結果の担保として、integration test の役割も一部担わせているため、これを安定化させ、オオカミ少年にしないことが重要です。 そのために、ドキュメントされていない点で改善を試行錯誤した部分があるのでまとめておきます。 改善事項 storycapは厳密には play function に対応していないことを意識する storycapは、正式なサポートとして、play関数のPromiseが解消されたことを確認してから撮影しているわけではありません。storybookにこれが導入される前から、撮影の安定化のために
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
reg-suitとQA Wolfを活用したVisual Regression Test
Vue.jsユーザーに贈る、Reg suitを使った画像回帰テスト
VRT(storycap, reg-suit, Next.js)を安定させるためのTips
www.webcartop.jp
b.hatena.ne.jp
youtu.be
cookpad.com
eset-info.canon-its.jp
dr-seki.hatenablog.com