tmegos blog

Web developer

Percyをsnapshotを取らずに使いたい場合

モチベーション

方法

percy-cliを使い、画像のアップロードのみを行います

github.com

例えばCypressの場合、

.percy.js

module.exports = {
  upload: {
    // テストに失敗したときのスクショを送らないようにする
    ignore: '**/*failed*',
  },
}

hoge.spec.js

  // Cypressで普通にスクリーンショットを撮る
  cy.screenshot('hogehoge')

Percyに画像を送る

$ percy upload cypress/screenshots

のような手順を踏めば、スクリーンショットはCypressで撮影し、Percyは画像の管理と差分のチェックのみに利用することができます

そこまでしてPercyを使いたいモチベーション

画像の管理をしたくない

  • 正解画像をコミットしなくない
  • 正解画像が変更になったとき、あらためて準備したくない

Percyの場合、画像を自動で管理してくれる

docs.percy.io

どの画像を差分を取るか

例えばmasterとdevelopがそれぞれあって、masterにマージするものはmasterと、developにマージするものはdevelopと比較してほしい

Percyの場合、どのbranchと比較すればいいのかロジックが組まれていて便利

docs.percy.io

他のビジュアルリグレッションツールに乗り換えたくなったら

そのときはreg-suitを使おうと思います

reg-viz.github.io