視覚的テスト（視覚的回帰テストまたはUIテストと呼ばれることもあります）は、純粋に視覚的な整合性についてソフトウェアをレビューするプロセスです。 アプリが意図したとおりに動作していることを確認するために使用するツールとは異なり、視覚的なテストは、ユーザーが実際に見たり操作したりするものに関するものです。
UIのスナップショットをベースラインと比較して、ピクセルが変更されているかどうかを確認することで機能します。 視覚的なテストでは、下のコードではなくピクセルを確認することで、デプロイする前にUIがどのように見えるかを正確に確認し、視覚的なリグレッションを簡単に把握できます。
ビジュアルテストはスナップショットテスト以上のものです。継続的なビジュアルカバレッジを取得するためのビジュアルレビューワークフローを持つことが重要です。 Percyを使用すると、すべてのプルリクエストでCI / CDパイプラインと連携して、ビジュアルテストをスタックに簡単に統合できます。
ビジュアルテストの仕組みの概要がわかったので、5分間のチュートリアルを見ていきます。
これが私たちがカバーするものです：
- PercyとサンプルWebアプリケーション（または独自の）の統合
- 最初のビジュアルテストの実行
- 視覚的な変更の作成と確認
- 日常のワークフローに視覚的なレビューを追加する
始めましょう！
ステップ1：パーシーを統合する
まだ行っていない場合は、無料のPercyアカウントにサインアップし、組織に名前を付けて、最初のプロジェクトを作成します。
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/script あなたに package.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
パーシーに戻るか、パーシービルドリンクをクリックして、視覚的な変化を確認してください。 右側には、変更された領域を強調する赤いピクセルがオーバーレイされた新しいスナップショットが表示されます。
その領域をクリックする（または「d」を押す）と、基になるスナップショットとオーバーレイされた差分が切り替わり、正確に何が変更されたかを簡単に確認できます。
レスポンシブディフ
Percyを使用して、最も重要なすべてのビューポートサイズのカバレッジを取得することもできます。 デフォルトでは、モバイルとデスクトップの幅のスナップショットをレンダリングします。 幅を切り替えて、それぞれで何が変わったかを確認します。
クロスブラウザの視覚的テスト
クロスブラウザスナップショットは、ブラウザのレンダリングによって引き起こされる微妙な違いを検出するのに役立ちます。
変更に満足している場合は、[すべて承認]をクリックします。100% cの確信を持って、展開する視覚的な変更を確認します。 デフォルトでは、PercyはChromeとFirefoxの両方ですべてのスナップショットをレンダリングします。
これらの変更を加えたいので、「すべて承認」をクリックします。
初めてのビジュアルレビューが完了しました。
ステップ4：CIとソースコードの統合
自動化されたビジュアルテストを最大限に活用するには、既存の開発ツールおよびプロセスと統合することをお勧めします。
Percyは、コードレビュープロセスの一部としてCIビルドと一緒に実行するように設計されています。 より詳細な手順と、サポートされているすべてのCIサービスを確認するには、CIセットアップドキュメントを確認してください。 サポートされている最も人気のあるサービスのいくつかを次に示します。
ソースコード統合を有効にすると、視覚的な変更が検出され、それらの変更が承認されてマージの準備ができたときに、プルまたはマージ要求ですぐに通知されます。
[詳細]をクリックすると、視覚的な変更を確認できるPercyビルドに直接移動します。
スナップショットが承認されると、コミットステータスが緑色に変わり、PRをマージできます。
それでおしまい！ これで、アプリのすべての部分が正確に表示されることを確信してマージする準備が整いました。
このチュートリアルが、パーシーのビジュアルレビュープラットフォームとワークフローに精通するのに役立つことを願っています。 パーシーがどのように機能するかについて学び続けるために、これらの追加のリソースをチェックしてください：
まだお済みでない場合は、無料のPercyアカウントにサインアップしてください。 毎月5,000の無料スナップショットを取得し、ビジュアルテストプラットフォームと統合にアクセスできます。
✨ハッピーテスト！
