
エントリーの編集

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
CypressとResamble.jsを使ったwebサイトの差分画像比較 - Qiita
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
CypressとResamble.jsを使ったwebサイトの差分画像比較 - Qiita
VueやReactなどを使って運用していると色んな所に影響するようなコンポーネントをさわるケースが出てく... VueやReactなどを使って運用していると色んな所に影響するようなコンポーネントをさわるケースが出てくると思います。 そのときに影響範囲がある画面をポチポチして確認するのがしんどいので 予め確認したいページを指定してキャプチャを取れる状態にしておき 差分があった場合に、画像で出力してくれる仕組みを作ってみました。 手順 Cypressで比較したい画像のキャプチャを撮っておく 1で撮ったキャプチャと比較したい画像のキャプチャを撮る Resamble.jsで1と2の画像を比較して差分がある場合、差分画像を出力する Cypressでキャプチャを撮る Cypressで下記のようにページごとに、キャプチャを撮って現時点の日付で保存しておきます。(/e2e/screenshot/内の指定のフォルダに保存されます。) 画面サイズごとにキャプチャを取りたい場合は、それぞれ画面ごとに保存したいフォルダをか