Help us understand the problem. What is going on with this article?

ビジュアルリグレッションテストのBackstopJSを使った時引っかかったポイント

More than 1 year has passed since last update.

ビジュアルリグレッションテストを試験的に使ってみたときに、
デザイナーのわたしがつまづいたところをまとめておきます🙃
今回利用したのはBackstopJSです。

キャプチャを上手く読み込んでくれないとき

BackstopJSは、Chrome headlessモードを利用する、Chromyを使ってキャプチャを取っています。
そのとき、マシンのメモリを結構ゴリゴリつかいながらキャプチャを取っているので、上手くいくかいかないかはマシン自体に左右される傾向にあります。
なので、言い切ってしまうと、ある程度ちゃんとしたマシンが必要!

テストをするSessionが増えれば増えるほど負荷がかかりますが、とはいえある程度の数のSessionをテストしないとリグレッションテストの導入のメリットがないので
マシン性能以外に以下でなんとかすると成功率があがります。

同時にキャプチャする枚数とそれに利用するメモリの量を設定する

マシンスペックが少ない人は、asyncCaptureLimitasyncCompareLimitのあたりを上手く調整するといいかもしれません。
Timeoutエラーの時等、これで解決した人もいるようです。
backstop.jsonで設定できます。

asyncCaptureLimitを調整する

asyncCaptureLimitは、一度に何枚キャプチャーを取るかという設定項目です。

asyncCompareLimitを調整する

この項目はテスト中に使用するメモリの設定項目です。
BackstopJSでは、100MBほどのRAMと、画像比較に5MBずつ必要とし、だいたい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.jsoncookie.jsonなど、すべて新しく上書きされます。
変更すでにしてある箇所はバックアップを取ってからbackstop initをしましょう。
なんでかわかりませんが、やり直しするとうまくいくことがある

自分のマシンのメモリを解放する

再起動なりなんなり…。色々調べたりして時間がかかる前に一度見直してみましょう。

上記でだいたいうまくいくようになりました。

それら以外の問題がおきた時

ドキュメントをちゃんとよむ!
garris/BackstopJS: Catch CSS curve balls.

issueにわりと同じ症状の人が結構いるのでそこから発見する!
https://github.com/garris/BackstopJS/issues

英語で書いてあるのでうへぇって思いますが、やみくもに検索かけるより全然問題点が見つかります。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした