BackstopJS

mergeImg対処

もともとは background-size: cover; で height: XXvh; を使用している背景画像が極端に伸びてしまい、正常にスクリーンショットが撮影できない問題に対してごにょごにょしていた。

• Lazyload and font icons ・ Issue #57 ・ garris/BackstopJS ・ GitHub
• Wait time after `scrollToSelector` property ・ Issue #993 ・ garris/BackstopJS ・ GitHub

5.0.6 → 5.1.0 にバージョンアップされたので試験したところ、このバージョンならばわりと実用的に使えるのではないか、という判断に。

ただ、懸念としては現在 Github の master ブランチに上がっているもの (まだ npm で配布されていない、バージョン番号も振られていない) では既に mergeImg が削除されているため再びダメになる。

これは vh 指定の画像があるときにその画像の高さを見て調整をかけるために使用している merge-img があまりメンテがされておらず、脆弱性検知で引っかかってしまったため、 5.1.0 ～ Github master の間でこのパッケージ関連のコードがゴッソリ削除された、ということの模様。

下端までスクロール

5.3.0 で vh の問題は解決したように見えたが、 Puppeteer の page.waitFor が deprecated になったのと、中の処理が変わったのかスクロールすると背景色が付いてしまう新しい問題が発生してしまったので、スクロールの処理はいったん無効化に……。

その後の経過

• GitHub - garris/BackstopJS: Catch CSS curve balls.
• Wait time after `scrollToSelector` property ・ Issue #993 ・ garris/BackstopJS ・ GitHub
• Lazyload and font icons ・ Issue #57 ・ garris/BackstopJS ・ GitHub
• Issues using vh units in CSS ・ Issue #785 ・ garris/BackstopJS ・ GitHub

わりと見放されている感すら出てきてしまった……。