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 referencebackstop test を行うと、正常にテストが走り差分を確認することができるようになります。

backstop test を行った結果画面のキャプチャ画像

まとめ

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

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

開発のお悩み、フロントエンドから解決しませんか?

あなたのチームのお悩みはなんですか? 「腕の良いエンジニアに重要でない作業まで任せてしまっている」「腕の良いデザイナーに主業務以外も任せてしまっている」「すべての手が足りず細かいことまで手が回らない」などなど… 。

そんなときは、相談相手としてGaji-Laboにお気軽にお声がけください。あなたの開発チームに足りていない役割や領域を適切に捉えてカバーすることで、チーム全体の生産性と品質をアップさせるお手伝いをします。

オンラインでのヒアリングとフルリモートでのプロセス支援に対応していますので、リモートワーク対応可のパートナーをお探しの場合もぜひ弊社にお問い合わせください!

お悩み相談はこちらから!

投稿者 Ishigaki Shotaro

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。