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

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

調査

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

検証

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

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

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

package.jsondependenciesdevDependencies"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" を指定してまた色々試してみたいと思います。

備考

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

追記(2020/12/20)

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

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

参考

スクリプト

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

下端までスクロールさせる

Node.js での実行中スクリプトの絶対パス

この記事を書いた人

アルム=バンド

フロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。