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"
  }
  ...

以下で操作するブラウザを切り替えることができます。chromiumfirefoxwebkit(Safari 向け)を指定します。

"browser": "chromium",

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

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

Unsupported playwright browser "FOO"

おわりに

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

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

Gaji-Laboでは、React経験が豊富なフロントエンドエンジニアを募集しています

弊社ではReactの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!

投稿者 Yamasaki Kimizu

React, Redux, TypeScript プロジェクトでフロントエンド領域を担当。個人でも Next.js アプリの開発をしています。日課はRSSで取得した技術記事を読むこと、最近の関心は Core Web Vitals です。将来はでかい犬が飼いたいです。