ビジュアルテスト(ビジュアル回帰テストまたはUIテストと呼ばれることもあります)は、純粋に視覚的な整合性についてソフトウェアをレビューするプロセスです。 アプリが意図したとおりに動作していることを確認するために使用するツールとは異なり、視覚的なテストは、ユーザーが実際に見たり操作したりするものに関するものです。

UIのスナップショットをベースラインと比較して、ピクセルが変更されているかどうかを確認することで機能します。 視覚的なテストでは、下のコードではなくピクセルを確認することで、デプロイする前にUIがどのように見えるかを正確に確認し、視覚的なリグレッションを簡単に把握できます。

ビジュアルテストはスナップショットテスト以上のものです。継続的なビジュアルカバレッジを取得するためのビジュアルレビューワークフローを用意することが重要です。 Percyを使用すると、視覚的なテストをスタックに統合して、プルリクエストごとにCI/CDパイプラインと連携させることが簡単にできます。


ビジュアルテストの仕組みの概要がわかったので、5分間のチュートリアルを見ていきます。

これが私たちがカバーするものです:

  1. PercyとサンプルWebアプリケーション(または独自の)の統合
  2. 最初のビジュアルテストの実行
  3. 視覚的な変更の作成と確認
  4. 日常のワークフローに視覚的なレビューを追加する

始めましょう!


ステップ1:パーシーを統合する

まだ行っていない場合は、無料のPercyアカウントにサインアップし、組織に名前を付けて、最初のプロジェクトを作成します。

Setting up your Percy project

Percyアカウントへのサインアップは無料で、毎月5,000のスナップショットが含まれ、29ドルからのアップグレードが利用可能です。

Percyプロジェクトは、テストするアプリ、サイト、またはコンポーネントライブラリに対応しています。 当社のSDKを使用すると、ブラウザーでレンダリングされる事実上すべてのものに視覚的なテストを追加できます。

これらは、人気のあるSDKの一部です。

このチュートリアルでは、 PercyScript を使用します。これは、Webアプリのビジュアルテストを開始するための最も簡単で最速の方法です。 このTodoMVCサンプルアプリを使用しますが、以下のPercyScriptを独自のアプリケーションで機能するように簡単に適合させることができます。

まず、サンプルアプリを設定しましょう。

$ git clone https://github.com/percy/example-todomvc.git
$ cd example-todomvc/
$ npm install
$ npm run start

これで、 http:// localhost:8000 にアクセスして、todosアプリを自分で試すことができます。

次に、PercyScriptをインストールして、このアプリケーションの最初のビジュアルテストを作成します。

サーバーを実行し続け、実行する新しいターミナルを開くことが重要です。

$ npm install -D @percy/script

これにより、@percy/scriptpackage.jsonファイルに追加されます。

次に、snapshots.jsという名前のファイルを作成し、最初のPercyScriptを追加します。

// snapshots.js
const PercyScript = require('@percy/script');

// A script to navigate our app and take snapshots with Percy.
PercyScript.run(async (page, percySnapshot) => {
  await page.goto('http://localhost:8000');
  await percySnapshot('TodoMVC home page');

  // Enter a new to-do.
  await page.type('.new-todo', 'A really important todo');
  await page.keyboard.press('Enter');
  await percySnapshot('TodoMVC with a new todo', { widths: [768, 992, 1200] });
});

それでおしまい! 次のステップは、このPercyScriptの実行を開始することです。

ステップ2:ビジュアルテストを実行する

PercyScriptをローカルで実行するには、PERCY_TOKEN環境変数を新しいプロジェクト画面またはプロジェクト設定からコピーしてから、次のコマンドを実行します。

$ export PERCY_TOKEN=aaabbbcccdddeee
$ npx percy exec -- node snapshots.js

トークンをプロジェクトの`PERCY_TOKEN`に置き換えます。

次のような出力が表示されます。

$ npx percy exec -- node snapshots.js
[percy] created build #1: https://percy.io/test/example-todomvc/builds/1738842
[percy] percy has started.
[percy] snapshot taken: 'TodoMVC home page'
[percy] snapshot taken: 'TodoMVC with a new todo'
[percy] stopping percy...
[percy] waiting for 2 snapshots to complete...
[percy] done.
[percy] finalized build #1: https://percy.io/test/example-todomvc/builds/1738842

舞台裏で何が起こっているのですか? Percyは、Percysnapshotコマンドが呼び出されたすべての場所でDOMスナップショットをキャプチャすることによって機能します。 次に、カスタムレンダリング環境でページまたはコンポーネントを再作成します。 新しいスナップショットがベースラインスナップショットと比較され、変更されたピクセルが判別されます。

フォローしていると、これが最初のビルドであるため、比較するものがないことがわかります。 また、コミットがマスター上にあり、マスタービルドが本番環境に対応していると想定しているため、「自動承認」されています。

ステップ3:視覚的な変更を確認する

統合され、ベースラインを確立する最初のビルドをプッシュしたので、新しい機能ブランチを作成し、Percyで確認するための視覚的な変更を導入しましょう。

テキストエディタを使用してindex.htmlを編集し、11行目のh1テキストを紫色にします。

<h1 style=”color:#9e66bf;”>

次に、スナップショットを再度実行します。

$ npx percy exec -- node snapshots.js

パーシーに戻るか、パーシービルドリンクをクリックして、視覚的な変化を確認してください。 右側には、変更された領域を強調する赤いピクセルがオーバーレイされた新しいスナップショットが表示されます。

Percy UI showing a snapshot comparison

その領域をクリックする(または「d」を押す)と、基になるスナップショットとオーバーレイされた差分が切り替わり、正確に何が変更されたかを簡単に確認できます。

レスポンシブ差分

Percyを使用して、最も重要なすべてのビューポートサイズのカバレッジを取得することもできます。 デフォルトでは、モバイルとデスクトップの幅のスナップショットをレンダリングします。 幅を切り替えて、それぞれで何が変わったかを確認します。

クロスブラウザの視覚的テスト

クロスブラウザースナップショットは、ブラウザーのレンダリングによって引き起こされる微妙な違いを検出するのに役立ちます。

変更に満足している場合は、[すべて承認]をクリックします。100% cの確信を持って、展開する視覚的な変更を確認します。 デフォルトでは、PercyはChromeとFirefoxの両方ですべてのスナップショットをレンダリングします。

これらの変更を加えたいので、「すべて承認」をクリックします。

最初のビジュアルレビューが完了しました。

ステップ4:CIとソースコードの統合

自動化されたビジュアルテストを最大限に活用するには、既存の開発ツールおよびプロセスと統合することをお勧めします。

Percyは、コードレビュープロセスの一部としてCIビルドと一緒に実行するように設計されています。 より詳細な手順と、サポートされているすべてのCIサービスを確認するには、CIセットアップドキュメントを確認してください。 サポートされている最も人気のあるサービスのいくつかを次に示します。

ソースコード統合を有効にすると、視覚的な変更が検出され、それらの変更が承認されてマージの準備ができたときに、プルまたはマージ要求ですぐに通知されます。

GitHub pull request with Percy status update showing visual changes detected

[詳細]をクリックすると、視覚的な変更を確認できるPercyビルドに直接移動します。

スナップショットが承認されると、コミットステータスが緑色に変わり、PRをマージできます。

GitHub pull request with Percy status update ready to merge

それでおしまい! アプリのすべての部分が正確に表示されることを確信してマージする準備が整いました。


このチュートリアルが、パーシーのビジュアルレビュープラットフォームとワークフローに精通するのに役立つことを願っています。 パーシーがどのように機能するかについて学び続けるために、これらの追加のリソースをチェックしてください:

まだお済みでない場合は、無料のPercyアカウントにサインアップしてください。 毎月5,000の無料スナップショットを取得し、ビジュアルテストプラットフォームと統合にアクセスできます。

✨ハッピーテスト!