BackstopJSにPlaywrightが追加！SafariやFirefoxでもVRTしよう

はじめに

こんにちは。フロントエンドエンジニアの kimizuy です。

BackstopJS とは VRT テストライブラリです。バージョン 6.0.1 でブラウザ操作エンジンの選択肢として Puppeteer に次いで Playwright が加わりました！本記事では BackstopJS と Playwright を組み合わせた使い方を紹介します。

前提

• VRT: Visual Regression Test（画像回帰テスト）の略。スナップショットテストのひとつで、実際にブラウザに表示したときの見た目を画像で比較し、その差分を検出すること
• Puppeteer: Chrome ブラウザをヘッドレスで操作できる Node.js ライブラリ
• Playwright: Puppeteer と同じブラウザを操作できるライブラリ。大きな違いとして操作できるブラウザが Chrome だけでなく Safari や Firefox も対象とする。BackstopJS ではブラウザ画面のスクリーンショットを撮るためのブラウザ操作エンジンとして使う

弊社のメンバーが「BackstopJSで行うビジュアルリグレッションテスト」で BackstopJS の導入方法について既に書いています。なじみのない方はこちらの記事も併せて参考にしてください。

BackstopJS と Playwright を組み合わせた使い方

backstop.json で以下のように設定します。

  ...
  "onBeforeScript": "playwright/onBefore.js",
  "onReadyScript": "playwright/onReady.js",
  ...
  "engine": "playwright"
  ...
  "engineOptions": {
    "browser": "chromium",
    "storageState": "/path/to/cookies-and-local-storage-file.json"
  }
  ...

以下で操作するブラウザを切り替えることができます。chromium や firefox、webkit（Safari 向け）を指定します。

"browser": "chromium",

参考: https://github.com/garris/BackstopJS#playwright

ちなみに、指定を間違えて実行すると以下のようなエラーになります。

Unsupported playwright browser "FOO"

おわりに

最近は React フレームワークをメジャーバージョンアップするタスクで BackstopJS が活躍しました。BackstopJS によってページ数が多いプロジェクトで壊れたページがないかさっと確認できます。「テストがまだないプロジェクトだけど見た目だけでも崩れやエラーがないか確認したい！」というときに BackstopJS は簡単に試せておすすめです。

以上、お読みいただきありがとうございました。