Cypress-image-snapshotによる画像比較テスト

cypressによる画像比較を実施するために以下をinstall

npm i @types/cypress-image-snapshot cypress-image-snapshot

以下追加

cypress/support/commands.ts

/// <reference types="cypress" />
import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
addMatchImageSnapshotCommand({
  failureThreshold: 0.00,
  failureThresholdType: 'percent',
  customDiffConfig: { threshold: 0.0 },
  capture: 'viewport',
});

公式にはcypress/plugins/index.tsに追加との記載があったが、
cypress v10ではpluginsではなくcypress.config.tsに記載するとのこと。
※実際この方法でないとエラーが発生していた。

The 'task' event has not been registered in the plugins file. You must register it before using cy.task()

cypress.config.ts

import { defineConfig } from "cypress";
import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      addMatchImageSnapshotPlugin(on, config);
    },
  },
  component: {
    setupNodeEvents(on, config) {
      addMatchImageSnapshotPlugin(on, config);
    },
  },
});

あとはcypressのテストで以下を実行すればよい。
初回は比較元がないのでファイル作成し、成功する。
2回目からは前回ファイルとの比較を行い違いがあればエラーが発生する

cy.matchImageSnapshot();

試しにdom変更後にテスト再実行してみたところ

比較画像を確認

さすがにリソース食うから頻繁にはできないが、
大事な部分で使えそう。