🦔

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

2022/12/31に公開

はじめに

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

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

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

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

  • 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

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

各ブラウザごとの表示も確認できるようです。
今回は初回のため、比較対象は何もない状態です。
一旦画面上部の「Approve build」をクリックします。

では、Next.jsのコードを適当に修正し、再度テストを実行してみます。

npm run percy

すると、今度は差分が表示されました。

ちょっと差分が分かりづらいですが、
下記のように単純に比較することもできます。

まとめ

VRTの入門として、percyをサクッと触ってみました。
他のツールと比較できていないのでなんとも言えませんが、
単純にUIの変更箇所を確認できるのは便利だなと感じました。
意図しないUI崩れを防ぐだけでなく、
コードレビューをする時にも役立ちそうです。

参考

https://docs.percy.io/docs/cypress
https://postd.cc/frontend-testing-is-for-everyone/
https://zenn.dev/loglass/articles/visual-regression-testing-comparison
https://zenn.dev/roki_na/articles/6e17079d91f82f
https://buildersbox.corp-sansan.com/entry/2022/08/01/110000

Discussion