はじめに

リリースを行った際に元のページとリリース後のページを比較して差分を確認したいと思い、reg-cliを活用して手元でビジュアルリグレッションテストを動かせないかと考えました
reg-cliを利用すれば簡単に実装できそうだったので、実際に作ってみました

1. 画像を取得する

1枚ずつ手動でスクリーンショットを撮影することもできますが、かなりの手間なのでPuppeteerを利用してスクリーンショット撮影を自動化しました

スクリーンショット撮影部分は以下のようになっています

src/scraping.js

const puppeteer = require('puppeteer')
const websites = require('../websites.json')

const screenshot = async (key, dir) => {
  const browser = await puppeteer.launch({
    args: [
      '--disable-gpu',
      '--disable-dev-shm-usage',
      '--disable-setuid-sandbox',
      '--no-first-run',
      '--no-sandbox',
      '--no-zygote',
      '--headless'
    ]
  });
  const page = await browser.newPage();
  page.setViewport({width: 1200, height: 1600});
  await page.goto(websites[key])
  await page.screenshot({
    path: `image/${dir}/${key}.png`,
    fullPage: true
  });
  page.waitForTimeout(1000)
  await browser.close()
}

(async () => {
  const dir = process.argv[2] || 'expected'
  for (const key in websites) {
    await screenshot(key, dir);
  }
})();

website.jsonにはスクリーンショットを撮影するURLと保存する画像の名前をkeyにした一覧を入れていました

website.json

{
  "example":"https://example.com",
  "example2":"https://example.com"
}

上記を実行してimage/actual/に画像を保存します

node src/scraping.js actual

気をつけないといけない点について

今回スクリーンショットを撮影したページでは問題なかったのですが、画像を遅延読み込みしている場合は画像が読み込まれていない状態でスクリーンショットが撮影されていまいます。
もしページ内の画像もスクリーンショットに含めたい場合には、スクリーンショットを撮影する前に一番下までスクロールをしたあと一番上まで戻ってくる処理を含める必要があります

2.reg-cliの実行

reg-cliの導入

yarnやnpmを使ってインストールを行ってください

yarn add reg-cli

テストの実行方法

テストの実行前にimages/expected/の画像を更新します

node src/scraping.js

image/actual/の画像と/image/expected/に保存された画像をもとに比較を行います

yarn reg-cli ./image/actual ./image/expected ./report/diff -R ./report/report.html

# -Uオプションをつけるとテスト実行後にexpectedの画像がactualにコピーされます
yarn reg-cli ./image/actual ./image/expected ./report/diff -R ./report/report.html -U

/report/report.htmlに結果が出力されるので、ブラウザなどで確認してください

まとめ

手軽に手元でビジュアルリグレッションテストを行う環境ができました
意図しない変更がないか手軽に確認できるようになったので、不具合を減らすことができそうです