🦔

Cypress × percyでビジュアルリグレッションテストに入門する

2022/12/31に公開

Next.js

はじめに

フロントエンドのテストについて調べていたところ、
「ビジュアルリグレッションテスト」というテストがあることを知りました。
E2Eのテストツールとして有名なCypressと、
ビジュアルリグレッションツールのpercyを使って、
ビジュアルリグレッションテストについて試してみたいと思います。

ビジュアルリグレッションテストとは？

ビジュアルリグレッションテスト(以下VRT)は、
UIの崩れを機械的にチェックするテストです。
実行時にスクリーンショットを撮り、以前の実行結果や、デザインツールで作ったUIのスクリーンショットなどと比較を行います。

VRTのツールとして軽く調べたところ、percyの他にも
reg-suitやChromatic、Playwrightなどがありましたが、

Cypressと相性が良さそうなこと
Storybookに依存しないこと(筆者が使ったことがないため)

から、今回はpercyを使ってみようと思います。

プロジェクトの作成

まず、percyのプロジェクトを作成していきます。
下記の「Create New Project」より新規のプロジェクトを作成します。

任意のプロジェクト名を入力し、「Create Project」をクリックします。

作成すると、ページ下部の方にトークンが発行されるので、環境変数に追加しておきます。

export PERCY_TOKEN=YourPercyTokenHere

セットアップ

続いて、下記ドキュメントに沿ってCypressで使うためのセットアップを進めていきます。

https://docs.percy.io/docs/cypress

まずは下記コマンドよりcypress用のモジュールをインストールします。

$ npm install --save-dev @percy/cli @percy/cypress

TypeScriptを使う場合は、tsconfig.jsonに下記を追加します。

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": "./"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"],
+  "types": ["cypress", "@percy/cypress"]
}

package.jsonにもテスト実行用のコマンドを追加しておきます。

packege.json

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "cypress": "cypress open",
    "cypress:headless": "cypress run",
+    "percy": "percy exec -- cypress run"
},

テストの実行

Cypressのテストを修正し、percyでスナップショットを取得する処理を追記します。
cy.percySnapshot()でスナップショットを取得することができます。

app.cy.ts

+ import "@percy/cypress";

describe("Navigation", () => {
  it("should navigate to the about page", () => {
    // Start from the index page
    cy.visit("http://localhost:3000/");
    
    // Take a snapshot for visual diffing
+    cy.percySnapshot();
  });
});

では、percy exec -- cypress runをしてテストを実行していきます。

npm run percy

====================================================================================================

  (Run Finished)


       Spec                                              Tests  Passing  Failing  Pending  Skipped
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✔  app.cy.ts                                00:03        1        1        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✔  All specs passed!                        00:03        1        1        -        -        -

[percy] Finalized build #1: https://percy.io/xxxxxxxx/first-vrt-sample/builds/xxxxxxxx

実行が完了すると、スナップショットのリンクが表示されました。
クリックすると、下記のような画面でスナップショットを確認できます。