ビジュアルリグレッションテストを試験的に使ってみたときに、
デザイナーのわたしがつまづいたところをまとめておきます🙃
今回利用したのはBackstopJSです。
キャプチャを上手く読み込んでくれないとき
BackstopJSは、Chrome headlessモードを利用する、Chromyを使ってキャプチャを取っています。
そのとき、マシンのメモリを結構ゴリゴリつかいながらキャプチャを取っているので、上手くいくかいかないかはマシン自体に左右される傾向にあります。
なので、言い切ってしまうと、ある程度ちゃんとしたマシンが必要！
テストをするSessionが増えれば増えるほど負荷がかかりますが、とはいえある程度の数のSessionをテストしないとリグレッションテストの導入のメリットがないので
マシン性能以外に以下でなんとかすると成功率があがります。
同時にキャプチャする枚数とそれに利用するメモリの量を設定する
マシンスペックが少ない人は、asyncCaptureLimitとasyncCompareLimitのあたりを上手く調整するといいかもしれません。
Timeoutエラーの時等、これで解決した人もいるようです。
backstop.jsonで設定できます。
asyncCaptureLimitを調整する
asyncCaptureLimitは、一度に何枚キャプチャーを取るかという設定項目です。
asyncCompareLimitを調整する
この項目はテスト中に使用するメモリの設定項目です。
BackstopJSでは、100MBほどのRAMと、画像比較に５MBずつ必要とし、だいたい600MBくらい必要なようです。
Error: Failed to launch a browser.やChromy error: Error. See scenario ...と言われた場合
Chrome-Headlessは多くのメモリを必要とします。
それによりchrome processが開いたままになってしまい、エラーが発生することがあります。
その場合以下でプロセスを消します。
pkill -f "(chrome)?(--headless)"
全体的になんかうまくいかないとき
backstop initをしてやり直す
backstop initをすると、 backstop.jsonやcookie.jsonなど、すべて新しく上書きされます。
変更すでにしてある箇所はバックアップを取ってからbackstop initをしましょう。
なんでかわかりませんが、やり直しするとうまくいくことがある
自分のマシンのメモリを解放する
再起動なりなんなり…。色々調べたりして時間がかかる前に一度見直してみましょう。
上記でだいたいうまくいくようになりました。
それら以外の問題がおきた時
ドキュメントをちゃんとよむ！
garris/BackstopJS: Catch CSS curve balls.
issueにわりと同じ症状の人が結構いるのでそこから発見する！
https://github.com/garris/BackstopJS/issues
英語で書いてあるのでうへぇって思いますが、やみくもに検索かけるより全然問題点が見つかります。