backstopjsをWordPressサイトの画像遅延に対応させるスクリプト
backstopのonReady.jsのコード
私はengine_script/puppet/onReady.jsを使っていますが、backstop.jsonの"onReadyScript": "puppet/onReady.js",の部分を書き換えている人はそれに合わせてください。
module.exports = async (page, scenario, vp) => {
console.log('SCENARIO > ' + scenario.label);
await require('./clickAndHoverHelper')(page, scenario);
//追加コードここから
// add more ready handlers here...
const scrollStep = 100; // pxごとにスクロール
const delay = 50; // スクロール間の待ち時間(ms)
// ページの高さを取得
const bodyHeight = await page.evaluate(() => document.body.scrollHeight);
const viewportHeight = vp.height;
// 下までスクロール
for (let y = 0; y < bodyHeight - viewportHeight; y += scrollStep) {
await page.evaluate(_y => window.scrollTo(0, _y), y);
await page.waitForTimeout(delay);
}
// 1秒待機
await page.waitForTimeout(1000);
// 上までスクロール
for (let y = bodyHeight - viewportHeight; y > 0; y -= scrollStep) {
await page.evaluate(_y => window.scrollTo(0, _y), y);
await page.waitForTimeout(delay);
}
// 最上部に戻して念のため待機
await page.evaluate(() => window.scrollTo(0, 0));
await page.waitForTimeout(1000);
//追加コードここまで
};
動作内容はコード内にコメント入れている通りですが、一応解説。
- 少しずつ一番下までスクロール
- 1秒待つ
- 一番上までスクロールして戻る
- 1秒待つ
このあとスクリーンショットが保存されます。
時間短縮したい人は2や4を調整してください。
アップデート作業のあとにbackstopjsで表示確認
私は結構、WordPressサイトのメンテナンス（本体やプラグイン・テーマのアップデートやPHPバージョンアップ）をご依頼いただくことが多いのですが、ページ数が多いサイトは何よりチェック作業がたいへんです。
数が多いと集中力が持たずに見落としも増えるので、backstopjsのテストであがってきたdiffを目視で再チェックしています。
GitHub - garris/BackstopJS: Catch CSS curve balls. · GitHub
立ちはだかる画像の遅延読み込み問題！
立ちはだかるという表現は大げさに聞こえるかもしれませんが、実際に画像遅延の影響でdiffにあがってくる数が段違いに増えます。
画像の場所がぽっかり空くだけならまだいいのですが、ページのレイアウトによっては画像より下の要素すべてがずれてしまうので1pxのずれも見逃さないBackstopJSだと「ズレまくりじゃ～！」の結果になります。
画像の表示に関するcss変更の影響までチェックするためにも、backstopjs利用時の画像遅延対策は必要です。
実行に時間をかけるか、目視に時間をかけるか
遅延画像対策を入れると実行時間は大幅に伸びます。
そのぶん正確さが増すので目視での確認数が減り、結局は効率化できます。
実行中は別の作業ができることを考えれば大きな問題にはならないと感じます。
余談ですが、自動保存されるスクショはbackstop_data/bitmaps_referenceやbackstop_data/bitmaps_testに保存されます。
「おー、やってるやってる」とチラチラのぞくのも結構楽しいです。
backstop.jsonの準備もプラグインで自動化できる
業務で複数サイトをチェックしないといけない場合は、backstop.jsonを作るWordPressプラグインを作ってしまうと非常に効率UPします。
私の場合は下記要件で作りました。
- 固定ページは全部取得
- 投稿やカスタム投稿は最新10件ずつを取得
- スクショ対象から外す要素やベーシック認証など、よく使う機能はチェックボックスで指定
自分用なのでデザイン性ゼロの画面ですが、こんな感じです。
backstopjsについてお世話になったサイト
インストールはこちらがわかりやすかったです。
デザイン崩れを恐れずコンポーネント修正をしよう！～BackstopJS編～ - KENTEM TechBlog
オプション機能はこちらがおススメ。
