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

モチベーション

• PercyのSDKに存在しないフレームワークを使用している

  • https://docs.percy.io/docs/sdks

• レスポンシブデザインをJavaScriptで頑張っている場合

  • PercyはDOMのスナップショットを取得して、それをもとにレスポンシブのテストを行っている。そのため、htmlの状態で幅を変えてもJavaScriptが動作しないため、レスポンシブな動きをしてくれない
  • テストフレームワークの方で、幅をリサイズしながらスクリーンショットを撮ればできそう
    • https://docs.percy.io/docs/responsive-visual-testing#how-it-works
  • ちなみにenable-javascriptというプロパティがあり、これをtrueにするとJavaScriptが動作するが、SPAの場合は…、ね
    • https://docs.percy.io/docs/cli-configuration#snapshot

• Percyで提供されてないブラウザで差分を取りたい

  • もうほかのサービスを使おうよ

方法

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