Shopify テーマ実装に BackstopJS を導入してビジュアルリグレッションテストを行う

こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。

今回は、以前ご紹介したビジュアルリグレッションテストツールの BackstopJS を、Shopify Theme Kit での Shopify テーマ実装の際に使用する方法についてまとめたいと思います。

BackstopJS については以前書いたこちらの記事をご覧ください。

BackstopJS + Shopify について

BackstopJS は、ビジュアルリグレッションテスト (ある変更を加える前後でスクリーンショットを作成し、それらを比較することで意図しない挙動が無いかを検証するテスト手法) を行うことが出来る npm パッケージです。

Shopify Theme Kit での Shopify テーマ実装では、同じテーマにローカルでの変更をデプロイしていく形でテーマを実装していくため、通常の実装より手戻りや意図しない変更が発生しやすくなります。

それを防ぐためにも、BackstopJS でのテストを導入しておきたいところです。

BackstopJS の設定

前もって BackstopJS と Shopify Theme Kit の導入を行っておきます。

1. Shopify Theme Kit の準備

まず、こちらの記事と同様のフローで Shopify Theme Kit によるテーマ実装の準備を行います。Shopify 側での特別な作業は不要です。

2. backstop init

ローカルにテーマをダウンロードしてきた後に、コマンド backstop init で初期設定ファイルを生成します。

3. backstop.json の設定

scenarios を以下のように追加していきます。

{
  "label": "[任意のラベル名]",
  "referenceUrl": "http://[本番サイトのURL]/",
  "url": "https://[Shopify アカウント名].myshopify.com?preview_theme_id=[テーマID]",
  "removeSelectors": ["#preview-bar-iframe"],
  "delay": 5000
},

• label: テスト結果画面に表示されるラベル名を指定します。
• referenceUrl: 比較対象のURLです。プレビュー環境での差分だけを見たい際には不要です。
• url: テスト対象のURLです。theme open で開いたプレビュー環境で Copy preview を押して生成したプレビューURLは一定期間で無効になるため、永続的にプレビュー環境を確認できるURLを入れます。
• removeSelectors: プレビュー環境では下部にツールバーが表示されており、本番と比較した際に差分として出てしまうため非表示にします。
• delay: ページを表示してからキャプチャを取得するまでの待機時間を設定します。数値は任意です。

4. onReady.js の設定

BackstopJS では、backstop.json の onReadyScript で指定した onReady.js に記述を追加することによって任意のキャプチャ取得前に処理を実行することが出来ます。

それを利用して、プレビュー表示の時に追加される style を消しておきます。

module.exports = async (page, scenario, vp) => {
  console.log('SCENARIO > ' + scenario.label);
  await require('./clickAndHoverHelper')(page, scenario);

  // add more ready handlers here...
  await page.$eval('html', el => el.style.paddingBottom = '0'); // プレビュー表示の時に追加される style を消す
};

これで設定は完了です。

設定後、コマンド backstop reference と backstop test を行うと、正常にテストが走り差分を確認することができるようになります。

まとめ

今回は、以前ご紹介したビジュアルリグレッションテストツールの BackstopJS を、Shopify のテーマ実装の際に使用する方法についてまとめました。

Shopify のテーマ実装の際の参考にしていただけたらと思います。

Shopifyでのサイト構築やテーマ開発に興味がある方、実践でのポイントを吸収したいと思っている方などにおすすめの内容です。