「BackstopJS」の記事 - Crieit

BackstopJS で背景画像の高さを `vh` 単位で指定したページで画像やスクリーンショットが引き伸ばされる現象についてメモ (未解決)

2020-12-16T23:42:55+09:00

メインビジュアル等で背景画像の高さを vh 単位で指定したページで、画像やスクリーンショットが引き伸ばされる現象に遭遇してしまいました。正常なスクリーンショットが撮影できないので困った……ということで、その現象について調べたメモです。

調査

調べたらそれと思しき現象の Issues が上がっていました。ただ、どちらも現在進行形でオープンになっているので解決には至っていない模様……。

検証

スレッドの中で提示された対処法:

"mergeImgHack": true, あるいは高さ決め打ちならば "mergeImgHack": 1024, のような値を backstop.json のルートに追記する
beta版を使用する

1.は効果がなかったので2.を試そうと思ったのですが、 Github のブランチ (2.6.7)と npm で指定した場合(4.3.3)で Beta のバージョンが異なる模様。

package.json の dependencies や devDependencies に "backstopjs": "https://github.com/garris/BackstopJS#beta" と指定すると 2.6.7、"backstopjs": "beta", と指定すると 4.3.3 が落ちてきます。

そこで各バージョンで何度か試行錯誤を繰り返しました。

5.0.7:
- 最新版
- 背景画像が引き伸ばされる現象が発生する
- engine で chromy を指定しようとしたところ、 createBitmaps | Chromy is no longer supported in version 5+. Please use version 4.x.x for chromy support. とのこと。 2.6.7 ではそこそこそれっぽい表示になったので engine を切り替えることができれば……と思ったのですが、ダメそうです
4.3.3:
- 背景画像が引き伸ばされる現象の解決には至らず
- いろいろ今どきに近くなっているので各種設定はしやすい
2.6.7:
- 昨日別の場所で試したときは動いたのですが動作再現できず
- 内部的に PhantomJS を使用している模様。2018年に開発終了しているので今更使いたくはない
- 設定を node script から渡すとき、オブジェクトではなくファイルパスを渡す模様。とすると、いったん backstop.json を書き出す処理を挟まないといけない

よくよく先程のスレッドを見直してみると npm install backstopjs@beta とか 4.3.3 と言ったワードがあるので普通に npm 指定の方で良さそうですね。

ひとまず devDependencies に "backstopjs": "beta" を指定してまた色々試してみたいと思います。

備考

Puppeteerによるフルページスクリーンショットを画像遅延読み込みに対応させる - DeNA Testing Blog

スクロールに応じてコンテンツが表示される系のアニメーションもあるので、「下端までスクロールしてからスクリーンショットを撮影する」も対応したいですね……。

追記(2020/12/20)

色々試行錯誤した結果のリポジトリを晒しておきます。

arm-band/test_backstop_randa_back_stopper_2: BackstopJS のテストです。

これは本当、どうしたものか……。

参考

スクリプト

複数枚のスクリーンショットを繋ぎ合わせる

Take screenshot without resizing page ・ Issue #820 ・ garris/BackstopJS

BackstopJS を試す (Error: Failed to launch the browser process! エラー発生→ puppeteer のバージョンを指定して解決)

2020-11-22T14:26:24+09:00

経緯

Jest でユニットテストができることは分かりました。何かを処理するものに関しては行けそうな気がします。

……しかし、Webサイトの場合は見た目も気になります。見た目をテストするにはどううれば良いのか……と考えていたところ、 BackstopJS というものがあることを知ったので試してみることにします。

準備

見た目のテストのためには何かページを生成するものが必要です。

今回は簡単に試せる環境として、手前味噌ですが arm-band/mori を使うことにしました。

1. パッケージ追加

package.json に backstopjs を追加します。

```json:package.json
// 略
"devDependencies": {
"backstopjs": "^5.0.6", // 追加
"browser-sync": "^2.26.12",
// 略
},
// 略


### 2. yarn

これで `yarn` してインストールを待ちます。

```bash
> yarn

BackstopJS の準備

後は手順通りに backstop init して

> backstop init

生成された backstop.json の scenarios -> url を編集。今回は Browsersync のローカルサーバにしたいので https://localhost:3000/ で。

```json:package.json
// 略
"scenarios": [
{
"label": "BackstopJS Homepage",
"cookiePath": "backstop_data/engine_scripts/cookies.json",
// "url": "https://garris.github.io/BackstopJS/",
"url": "https://localhost:3000/", // 変更
"referenceUrl": "",
// 略
}
]
// 略


## 検証1 (失敗)

ここまで準備をしたら、正解の見本を保存するために `backstop reference` でスクリーンショットを撮ります。

まずは `yarn start` で Gulpタスク を走らせて `https://localhost:3000/` を上げます。

次に、上述の `backstop reference` コマンドを実行します。

```bash
> backstop reference
BackstopJS v5.0.6
Loading config:  PATH\TO\TEST_PROJECT\randa_back_stopper\backstop.json 

COMMAND | Executing core for "reference"
  clean | backstop_data/bitmaps_reference was cleaned.
createBitmaps | Selected 1 of 1 scenarios.
      COMMAND | Command "reference" ended with an error 
after [1.414s]
      Error: Failed to launch the browser process!

                TROUBLESHOOTING: https://github.com/puppeteer/puppeteer/blob/master/docs/troubleshooting.md     

                    at onClose (PATH\TO\TEST_PROJECT\randa_back_stopper\node_modules\puppeteer\lib\Launcher.js:750:14)
                    at ChildProcess. (PATH\TO\TEST_PROJECT\randa_back_stopper\node_modules\puppeteer\lib\Launcher.js:740:61)
                    at ChildProcess.emit (events.js:326:22)
                    at Process.ChildProcess._handle.onexit (internal/child_process.js:276:12)

# 略

……あれ？失敗しました。

Command "reference" ended with an error after

Error: Failed to launch the browser process!

エラーメッセージ的にはこの部分が原因っぽいですね。

そして、問題を起こしているのは puppeteer のようです。

ちなみに、 BackstopJS がスクリーンショットを撮る際は Puppeteer からヘッドレスブラウザとして Chromium でレンダリングしている模様。

ということで、原因は Puppeteer にあり。エラー文で検索しましたが、イマイチ情報が少ない上にあまり新しい情報がないので、半ば手探りで追及してみることになりました……。

Puppeteer の検証1

まずはそもそも Puppeteer が自分の環境で動くか確認してみます。

> node -v
v14.8.0

> npm -v
6.14.7

Node.js とnpm のバージョン確認。

この状態で新規のプロジェクトを作成します。

package.json

```json:package.json
{
"name": "puppeteer_test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"puppeteer": "^5.5.0"
}
}


`npm init` で `package.json` を用意して、 `yarn add --dev puppeteer` で `devDependencies` に追加します。

### index.js

```javascript:index.js
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://google.com/');
  await page.screenshot({path: 'screenshot.png'});

  await browser.close();
})();

Google のスクリーンショットを撮影するだけの簡単な JS を用意します。

これで

> yarn

# 略

> node index.js
>

……普通に撮影でき、 screenshot.png が保存されました。問題ありません。

Puppeteer の検証2

次に、 BackstopJS の内部で使用されている Puppeteer のバージョンを確認するために node_modules/backstopjs/package.json を調べます。

```json:package.json
{
"name": "backstopjs",
"version": "5.0.6",
"description": "BackstopJS: Catch CSS curveballs.",
"bin": {
"backstop": "./cli/index.js"
},
"scripts": {
"lint": "eslint 'compare/.js' 'compare/src//*.js' 'core//.js' 'cli//*.js' 'capture//.js' 'test//*.js'",
"format": "prettier-eslint --write \"compare/src//.js\"",
"genConfig": "node ./cli/index.js genConfig",
"init": "node ./cli/index.js init",
"reference": "node ./cli/index.js reference",
"test": "node ./cli/index.js test",
"approve": "node ./cli/index.js approve",
"openReport": "node ./cli/index.js openReport",
"report": "node ./cli/index.js openReport",
"echo": "node ./cli/index.js echo",
"unit-test": "mocha --reporter spec --recursive 'test//*_spec.js'",
"precommit": "lint-staged",
"build-compare": "cp ./node_modules/diverged/src/diverged.js ./compare/output/ && cp ./node_modules/diff/dist/diff.js ./compare/output/ && webpack --config ./compare/webpack.config.js && npm run lint",
"dev-compare": "webpack-dev-server --content-base ./compare/output --config ./compare/webpack.config.js",
"integration-test": "rm -rf newdir && mkdir newdir && cd newdir && node ../cli/index.js genConfig && node ../cli/index.js reference && node ../cli/index.js test && node -e \"require('../')('test')\"",
"smoke-test": "cd test/configs/ && node ../../cli/index.js test --config=backstop_features",
"smoke-test-docker": "cd test/configs/ && node ../../cli/index.js test --config=backstop_features --docker",
"sanity-test": "cd test/configs/ && node ../../cli/index.js test",
"sanity-test-docker": "cd test/configs/ && node ../../cli/index.js test --docker",
"kill-zombies": "pkill -f \"(chrome)?(--headless)\"",
"copy-report-bundle": "mkdir -p test/configs/backstop_data/html_report && cp compare/output/index_bundle.js test/configs/backstop_data/html_report/",
"build-and-copy-report-bundle": "npm run build-compare && npm run copy-report-bundle",
"remote": "node ./cli/index.js remote",
"stop": "curl http://localhost:3000/stop"
},
"lint-staged": {
"compare/src//*.js": [
"node_modules/.bin/prettier --single-quote --write",
"git add"
]
},
"repository": {
"type": "git",
"url": "https://github.com/garris/backstopjs.git"
},
"author": "https://github.com/garris/BackstopJS/graphs/contributors",
"license": "MIT",
"main": "core/runner.js",
"devDependencies": {
"assert": "^1.4.1",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"backstop-twentytwenty": "^1.0.4",
"eslint": "^5.6.1",
"eslint-config-semistandard": "^12.0.1",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-node": "^7.0.1",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-react": "^7.11.1",
"eslint-plugin-standard": "^4.0.0",
"file-loader": "^2.0.0",
"lint-staged": "^4.3.0",
"mocha": "^5.2.0",
"mockery": "^1.4.0",
"prettier": "^1.14.3",
"prettier-eslint-cli": "^4.7.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-modal": "^3.0.3",
"react-redux": "^5.0.6",
"react-sticky": "^6.0.1",
"react-toggle-button": "^2.1.0",
"react-visibility-sensor": "^3.11.1",
"redux": "^3.7.2",
"sinon": "^1.17.7",
"styled-components": "^2.1.2",
"url-loader": "^1.1.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.3.1"
},
"dependencies": {
"chalk": "^1.1.3",
"diverged": "^0.1.3",
"fs-extra": "^0.30.0",
"jump.js": "^1.0.2",
"junit-report-builder": "^1.3.3",
"lodash": "^4.17.11",
"merge-img": "^2.1.3",
"minimist": "^1.2.0",
"node-resemble-js": "^0.2.0",
"object-hash": "1.1.5",
"opn": "^5.3.0",
"os": "^0.1.1",
"p-map": "^1.1.1",
"path": "^0.12.7",
"portfinder": "^1.0.17",
"puppeteer": "^2.0.0",
"resolve": "^1.11.1",
"super-simple-web-server": "^1.1.2",
"temp": "^0.8.3"
}
}


`puppeteer` のバージョンは…… `2.0.0` ？！先ほど入れた最新版は `5.5.0` だったのでかなりバージョンに乖離があります。

ということで先程の Puppeteer のテストプロジェクトの `package.json` を直します。

```json:package.json
{
  "name": "puppeteer_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "puppeteer": "^2.0.0"
  }
}

はい。 2.0.0 です。これで yarn し直して node index.js を実行。

> node index.js
(node:28172) UnhandledPromiseRejectionWarning: Error: Failed to launch the browser process!


TROUBLESHOOTING: https://github.com/puppeteer/puppeteer/blob/master/docs/troubleshooting.md

    at onClose (PATH\TO\TEST_PROJECT\puppeteer_test\node_modules\puppeteer\lib\Launcher.js:750:14)      
    at ChildProcess. (PATH\TO\TEST_PROJECT\puppeteer_test\node_modules\puppeteer\lib\Launcher.js:740:61)
    at ChildProcess.emit (events.js:326:22)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:276:12)

Error: Failed to launch the browser process! のエラーが出て、 BackstopJS のプロジェクトで出た内容を再現できました。

エラーの発生個所も node_modules\puppeteer\lib\Launcher.js:750:14 以下同じです。

念のための確認

エラー文の中にあるトラブルシューティングなど、いくつかの記事で「 puppeteer.launch() のオプションで ignoreDefaultArgs: ['--disable-extensions'] を指定すると良い」と書かれていたので、一応やってみます。

```javascript:index.js
const puppeteer = require('puppeteer');

(async () => {
//const browser = await puppeteer.launch();
const browser = await puppeteer.launch({
ignoreDefaultArgs: ['--disable-extensions'],
});

const page = await browser.newPage();
await page.goto('https://google.com/');
await page.screenshot({path: 'screenshot.png'});

await browser.close();
})();


修正して、実行。

```bash
> node index.js
(node:31444) UnhandledPromiseRejectionWarning: Error: Failed to launch the browser process!


TROUBLESHOOTING: https://github.com/puppeteer/puppeteer/blob/master/docs/troubleshooting.md

    at onClose (PATH\TO\TEST_PROJECT\puppeteer_test\node_modules\puppeteer\lib\Launcher.js:750:14)      
    at ChildProcess. (PATH\TO\TEST_PROJECT\puppeteer_test\node_modules\puppeteer\lib\Launcher.js:740:61)
    at ChildProcess.emit (events.js:326:22)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:276:12)

はい、変わりませんでした。

検証2 (成功)

以上より、 Puppeteer のバージョンをどうにかすれば BackstopJS が動きそうなことが分かりました。

そこで、 Yarn の依存関係の解決オプションの resolutions を試してみることにします。

```json:package.json
// 略
"devDependencies": {
"backstopjs": "^5.0.6", // 追加
"browser-sync": "^2.26.12",
// 略
},
"resolutions": {
"puppeteer": "^5.5.0" // 追加
},
// 略


これで `yarn` し直して、念のため `backstop_data`ディレクトリ と `backstop.json` を削除して `backstop init` をやり直し、再度 `url` を `https://localhost:3000/` に直した上で、 `backstop reference` を実行。

```bash
> backstop reference
BackstopJS v5.0.6
Loading config:  PATH\TO\TEST_PROJECT\randa_back_stopper\backstop.json

COMMAND | Executing core for "reference"
  clean | backstop_data/bitmaps_reference was cleaned.
createBitmaps | Selected 1 of 1 scenarios.
CREATING NEW REFERENCE FILE
CREATING NEW REFERENCE FILE
Cookie state restored with: [
  {
    "path": "/",
    "name": "yourCookieName",
    "value": "yourCookieValue",
    "expirationDate": 1798790400,
    "hostOnly": false,
    "httpOnly": false,
    "secure": false,
    "session": false,
    "sameSite": "no_restriction",
    "url": "https://.www.yourdomain.com"
  }
]
Cookie state restored with: [
  {
    "path": "/",
    "name": "yourCookieName",
    "value": "yourCookieValue",
    "expirationDate": 1798790400,
    "hostOnly": false,
    "httpOnly": false,
    "secure": false,
    "session": false,
    "sameSite": "no_restriction",
    "url": "https://.www.yourdomain.com"
  }
]
Browser Console Log 0: JSHandle:BackstopTools have been 
installed.
SCENARIO > BackstopJS Homepage
x Close Browser
Browser Console Log 0: JSHandle:BackstopTools have been 
installed.
SCENARIO > BackstopJS Homepage
x Close Browser

Run `$ backstop test` to generate diff report.

      COMMAND | Command "reference" successfully executed in [3.752s]

動きました！

リグレッションテストの検証

ようやく backstop reference が動いたので、リグレッションテストを試してみます。

まずは編集前( backstop reference したとき)のページのキャプチャ画像。

次に、 Scss や JS などいくつかパラメータやコードを編集して、 backstop test します。

> backstop test
BackstopJS v5.0.6
Loading config:  PATH\TO\TEST_PROJECT\randa_back_stopper\backstop.json

COMMAND | Executing core for "test"
createBitmaps | Selected 1 of 1 scenarios.
Cookie state restored with: [
  {
    "path": "/",
    "name": "yourCookieName",
    "value": "yourCookieValue",
    "expirationDate": 1798790400,
    "hostOnly": false,
    "httpOnly": false,
    "secure": false,
    "session": false,
    "sameSite": "no_restriction",
    "url": "https://.www.yourdomain.com"
  }
]
Cookie state restored with: [
  {
    "path": "/",
    "name": "yourCookieName",
    "value": "yourCookieValue",
    "expirationDate": 1798790400,
    "hostOnly": false,
    "httpOnly": false,
    "secure": false,
    "session": false,
    "sameSite": "no_restriction",
    "url": "https://.www.yourdomain.com"
  }
]
Browser Console Log 0: JSHandle:Invisible Full-moon!
Browser Console Log 0: JSHandle:BackstopTools have been 
installed.
SCENARIO > BackstopJS Homepage
x Close Browser
Browser Console Log 0: JSHandle:Invisible Full-moon!
Browser Console Log 0: JSHandle:BackstopTools have been 
installed.
SCENARIO > BackstopJS Homepage
x Close Browser
      COMMAND | Executing core for "report"
   See: PATH\TO\TEST_PROJECT\randa_back_stopper\backstop_data\bitmaps_test\yyyymmdd-hhiiss\failed_diff_backstop_default_BackstopJS_Homepage_0_document_0_phone.png
      compare | ERROR { requireSameDimensions: true, size: isDifferent, content: 2.06%, threshold: 0.1% }: BackstopJS Homepage backstop_default_BackstopJS_Homepage_0_document_0_phone.png
   See: PATH\TO\TEST_PROJECT\randa_back_stopper\backstop_data\bitmaps_test\yyyymmdd-hhiiss\failed_diff_backstop_default_BackstopJS_Homepage_0_document_1_tablet.png
      compare | ERROR { requireSameDimensions: true, size: isDifferent, content: 0.70%, threshold: 0.1% }: BackstopJS Homepage backstop_default_BackstopJS_Homepage_0_document_1_tablet.png
       report | Test completed...
       report | 0 Passed
       report | 2 Failed
       report | Writing browser report
       report | Resources copied
       report | Copied json report to: PATH\TO\TEST_PROJECT\randa_back_stopper\backstop_data\bitmaps_test\yyyymmdd-hhiiss\report.json
       report | Copied jsonp report to: PATH\TO\TEST_PROJECT\randa_back_stopper\backstop_data\html_report\config.js
      COMMAND | Executing core for "openReport"
   openReport | Attempting to ping 
   openReport | Remote not found. Opening backstop_data\html_report\index.html
       report | *** Mismatch errors found ***
      COMMAND | Command "report" ended with an error after [1.539s]
      COMMAND | Error: Mismatch errors found.
                    at PATH\TO\TEST_PROJECT\randa_back_stopper\node_modules\backstopjs\core\command\report.js:189:17
                    at processTicksAndRejections (internal/process/task_queues.js:93:5)
      COMMAND | Command "test" ended with an error after [5.431s]
      COMMAND | Error: Mismatch errors found.
                    at PATH\TO\TEST_PROJECT\randa_back_stopper\node_modules\backstopjs\core\command\report.js:189:17
                    at processTicksAndRejections (internal/process/task_queues.js:93:5)

エラーが出ましたね。

また、自動的にブラウザも上がってきて上のように差分も表示されます。

「DIFF」の画像をクリックした先では backstop reference で撮影したスクリーンショットと backstop test で撮影したスクリーンショットの差分をワイパーのように比較することができます。

細かく比較できて良いですね。

今度は修正を元に戻して再度 backstop test 。

> backstop test
BackstopJS v5.0.6
Loading config:  PATH\TO\TEST_PROJECT\randa_back_stopper\backstop.json

COMMAND | Executing core for "test"
createBitmaps | Selected 1 of 1 scenarios.
Cookie state restored with: [
  {
    "path": "/",
    "name": "yourCookieName",
    "value": "yourCookieValue",
    "expirationDate": 1798790400,
    "hostOnly": false,
    "httpOnly": false,
    "secure": false,
    "session": false,
    "sameSite": "no_restriction",
    "url": "https://.www.yourdomain.com"
  }
]
Cookie state restored with: [
  {
    "path": "/",
    "name": "yourCookieName",
    "value": "yourCookieValue",
    "expirationDate": 1798790400,
    "hostOnly": false,
    "httpOnly": false,
    "secure": false,
    "session": false,
    "sameSite": "no_restriction",
    "url": "https://.www.yourdomain.com"
  }
]
Browser Console Log 0: JSHandle:BackstopTools have been 
installed.
SCENARIO > BackstopJS Homepage
Browser Console Log 0: JSHandle:BackstopTools have been 
installed.
SCENARIO > BackstopJS Homepage
x Close Browser
x Close Browser
      COMMAND | Executing core for "report"
      compare | OK: BackstopJS Homepage backstop_default_BackstopJS_Homepage_0_document_0_phone.png
      compare | OK: BackstopJS Homepage backstop_default_BackstopJS_Homepage_0_document_1_tablet.png
       report | Test completed...
       report | 2 Passed
       report | 0 Failed
       report | Writing browser report
       report | Resources copied
       report | Copied json report to: PATH\TO\TEST_PROJECT\randa_back_stopper\backstop_data\bitmaps_test\yyyymmdd-hhiiss\report.json
       report | Copied jsonp report to: PATH\TO\TEST_PROJECT\randa_back_stopper\backstop_data\html_report\config.js
      COMMAND | Executing core for "openReport"
   openReport | Attempting to ping
   openReport | Remote not found. Opening backstop_data\html_report\index.html
      COMMAND | Command "report" successfully executed in [0.698s]
      COMMAND | Command "test" successfully executed in 
[4.135s]

成功です。

今度はテスト成功の画面で、同じスクリーンショットが撮影できていることが確認できます。

ということで、軽くですが BackstopJS が使えることを確認しました。

実際にはシナリオの編集とか色々あるようですが、ひとまず動作確認が取れたということで。

追加検証

動作確認が取れたところで、より実践的になりそうな部分を深堀り。

ブラウザサイズ: PCサイズも追加
BrowserSync のリロード通知を削除: スクリーンショットのタイミングである/なしで分かれてしまうので一律非表示にしてDIFF検知されないようにする
複数ページの場合:
- シナリオを追加
- label をファイル名に使用するので半角英数字で記述、ページごとにユニークな名前にする
縦長ページの場合: 普通に全体のスクリーンショットを撮影する
position: fixed; のナビゲーションバー: 上端

何回かテストを試して気になったのはこの辺りですかね。いずれもクリア、問題なさそうです。

わざと失敗させた場合の画面。

縦長ページでは普通に下までスクロールできます。

成功画面。最初のテストのときと同様、特に問題はなさそうです。

yarn: resolutions で依存の依存のバージョンを指定する - nju33