CypressとPercyでVRTを導入したら真っ白でした

初めまして！アンチパターンの安澤です！

今年の4月に転職して、当ブログの記事は初投稿となります。普段はフロントエンドを中心に AWS 関連の作業まで広く対応しております。

この記事では本業とは別で携わっているシステムに Visual Regression Test (VRT) を導入した話について、はまった点などを紹介させていただきます。

このシステムは、React + Express というよくある (?) 構成のWeb アプリケーションなのですが、全体的にテストが実装されていませんでした。

そのため、改修時にデグレ確認などが難しいという課題を抱えており、Cypress を使用した E2E テストの導入を進めていたので、合わせて UI などの崩れを検出するために VRT の導入を行いました。

Cypress を使用した VRT の導入に関しては公式ページにもいくつかの方法が紹介されています。今回は、紹介されている中でも Percy という SaaSを利用することで簡単に導入できることがわかったのでこちらを採用しました。

料金プランについて

料金プランについては、以下のページから確認できます。無料プランもあり、月5000枚までスクリーンショットをアップロードすることができます。

All-in-one visual testing and review platform | Percy

Percy

Percy ではクロスブラウザをサポートしており、Chrome、Firefox、EdgeとSafariが選択できます。無料プランでは対象のブラウザを選択できないため、自動的に全てのブラウザでスクリーンショットが取得されます。ブラウザごとにスクリーンショット1枚のカウントになり、1回の取得で4枚とカウントされる点には注意が必要そうです（レスポンシブにも対応しており、2種類の画面サイズで取得すると４ブラウザ × ２画面サイズで8枚のカウントになります）。

やってみる

実際の導入は、以下の記事などを参考にさせていただきました。

設定はとても簡単にできたので、いざ GitHub Actions 上で VRT を実行して、あとは Percy のコンソールを確認すれば画面のスクリーンショットが撮れているはずです！

実際に撮れていた画像は以下のような感じでした🥹

画像も取得できていなければ、CSS も全く当たっていませんね...。

Cypress のスクリーンショットはきちんと撮れているのに何故でしょうか。

結論から言うと、ベーシック認証の影響でした（前提として、このテストは検証環境に実際にホスティングされているアプリケーションに対して実行しています）。Percy ではベーシック認証が設定されている場合、ユーザー名とパスワードを設定する必要があるようです。

If the app or website you’re taking snapshots of is protected with authentication, you can configure Percy to pass the needed authentication headers. Without passing authentication to Percy, snapshots can be broken (since we won’t be able to save the needed assets to render the page).

今回の VRT は GitHub Actions 上で実施しており、ユーザー名とパスワードはGitHub Actions Secrets として保存したかったので、.percy.yml に設定するのではなく、以下のように Cypress のカスタムコマンドとして実装しました。

Cypress.Commands.add('vrtScreenshot', (name: string) => {
  cy.percySnapshot(name, {
    discovery: {
      authorization: {
        username: Cypress.env('BASIC_AUTH_USERNAME'),
        password: Cypress.env('BASIC_AUTH_PASSWORD'),
      },
    },
  });
});

ベーシック認証の設定を入れた上で再度実行します。

はい！うまく撮れてました！ドキュメントを読むのは大切ですね...。

まとめ

今回は、Cypress と Percy を使用して VRT を導入した際にはまったところを紹介させていただきました。SaaS を使用すると色々なことが簡単に実装できますね！

今回は Percy を使用することにしたので、触れることはなかったのですがオープンソースのツールに reg-suit と言うものがあり、こちらを使用しても VRT が導入できそうなので機会があれば触れてみたいと思います。