フロントエンド開発で BackstopJS を使って visual test をする

npm install -g backstopjs

backstop init

{
  "id": "backstop_default",
  "viewports": [
    {
      "label": "phone",
      "width": 320,
      "height": 480
    },
    {
      "label": "tablet",
      "width": 1024,
      "height": 768
    }
  ],
  "onBeforeScript": "puppet/onBefore.js",
  "onReadyScript": "puppet/onReady.js",
  "scenarios": [
    {
      "label": "BackstopJS Homepage",
      "cookiePath": "backstop_data/engine_scripts/cookies.json",
      "url": "https://garris.github.io/BackstopJS/",
      "referenceUrl": "",
      "readyEvent": "",
      "readySelector": "",
      "delay": 0,
      "hideSelectors": [],
      "removeSelectors": [],
      "hoverSelector": "",
      "clickSelector": "",
      "postInteractionWait": 0,
      "selectors": [],
      "selectorExpansion": true,
      "expect": 0,
      "misMatchThreshold" : 0.1,
      "requireSameDimensions": true
    }
  ],
  "paths": {
    "bitmaps_reference": "backstop_data/bitmaps_reference",
    "bitmaps_test": "backstop_data/bitmaps_test",
    "engine_scripts": "backstop_data/engine_scripts",
    "html_report": "backstop_data/html_report",
    "ci_report": "backstop_data/ci_report"
  },
  "report": ["browser"],
  "engine": "puppeteer",
  "engineOptions": {
    "args": ["--no-sandbox"]
  },
  "asyncCaptureLimit": 5,
  "asyncCompareLimit": 50,
  "debug": false,
  "debugWindow": false
}

backstop test

Error [ERR_REQUIRE_ESM]: require() of ES Module /vite-storybook/backstop_data/engine_scripts/puppet/onReady.js from ~.nvm/versions/node/v16.14.2/lib/node_modules/backstopjs/core/util/runPuppet.js not supported.
onReady.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename onReady.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /vite-storybook/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

// backstop.json
{
  // ... 他のもとの記述

  // シナリオ
  "scenarios": [
    { ... 上に記載した BackstopJS Homepage のテスト },
    {
      "label": "Header",
      "url": "http://localhost:6006/iframe.html?args=&id=example-header--logged-in&viewMode=story",
      "delay": 3000
    }
  ],
  // 他のもとの記述
}

npm run storybook
backstop test

backstop approve

// backstop.json

{  
  ...
  "engine": "playwright",
  "engineOptions": {
    "browser": "webkit"
  },
  ///
}