5分でビジュアルテストを開始

序章

アプリが完全に機能していることを確認するのに役立つツールはたくさんありますが、純粋に視覚的なバグをどのようにキャッチしますか？

上記の例では、ボタンは引き続き機能し、テキストは実際にはそこにありますが、リンクがボタンと同じ色に変更されました。

回帰テストを記述して、テキストが常に白で、ボタンが常に緑であることを確認できますが、数百のページと状態にわたって、手に負えないほど非常に高速になります。 したがって、回帰テストの行の後に行を書き込む代わりに（またはそれに加えて）、デプロイする前にそれらのすべてのページを手動でチェックすることができます。 しかし、私たちは皆、時間のかかる不完全な手動QAがどれほどあり得るかを知っています。

そこで、ビジュアルテストが登場します。

ビジュアルテストは、UIに自信を持つための新しい方法です。 UIを手動でチェックしたり、下のコードをテストしたりする代わりに、視覚的なテストでは、コミットごとにピクセルごとの変更が自動的に検出されます。 視覚的なテストにより、コードのレビューにかかる時間を節約し、視覚的なバグが本番環境に移行しないようにすることができます。

このチュートリアルでは、 Percy ビジュアルテストサービスをサンプルアプリと統合し、ビジュアル変更をレビューし、日常のワークフローの一部としてビジュアルレビューを実行する方法について説明します。

ステップ1—パーシーの統合

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

注：Percyアカウントにサインアップすると、14 –日間の試用が開始されますが、有効期限が切れると、毎月5,000の無料スナップショットを含む無料プランに移行します。[X186X ]

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

いくつかの人気のある例は次のとおりです。

• Cypress.io
• Puppeteer
• Reactのストーリーブック
• 残り火のウェブアプリ
• Rubyアプリ用のカピバラ

SDKは、視覚的なカバレッジが必要な場所でPercyスナップショットコマンドをインポートして呼び出すことで機能します。

このチュートリアルでは、PercyScriptを使用します。これは、JavaScriptの数行で視覚的なテストを開始するための迅速で簡単な方法を提供します。 PercyScriptは、クリック、入力、待機することで要素と完全に対話でき、ライブURLのテストにも使用できます。 詳細については、公式のPercyScriptドキュメントをご覧ください。

このチュートリアルでは、TodoMVCサンプルアプリを使用します。 以下のPercyScriptを、独自のアプリケーションで機能するように適合させることができます。

まず、サンプルアプリを設定しましょう。 これには、Node.jsとnpmがインストールされている必要があります。 Nodeのインストールの詳細については、 Ubuntu18.04にNode.jsをインストールする方法を参照してください。

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=your_token_here
npx percy exec -- node snapshots.js

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

Output
[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

PercyScriptが実行され、レンダリングと処理のためにスナップショットがPercyに送信されます。

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

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

プロジェクトを統合し、最初のビルドをプッシュしてベースラインを確立したので、変更を加えて違いを確認しましょう。

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

新しい機能ブランチを作成し、視覚的な変更を導入しましょう。

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

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

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

npx percy exec -- node snapshots.js

結果のリンクを開くと、視覚的な変化が強調表示されているのがわかります。

並べて比較

右側のパネルの赤い領域は、変更されたピクセルを表します。これらの変更されたピクセルは、視覚的な差分と呼ばれます。

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

レスポンシブ差分

スナップショットがレンダリングされた幅がここに表示されます。 この例では、モバイルとデスクトップの幅のスナップショットをレンダリングしました。

さまざまな幅を選択して、各幅で何が変わったかを確認します。

クロスブラウザビジュアルテスト

デフォルトでは、PercyはChromeとFirefoxの両方ですべてのスナップショットをレンダリングします。

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

変更に満足したら、[すべて承認]をクリックします。 最初のビジュアルレビューが完了しました。

ステップ4—ビジュアルテストとコードワークフローの統合

自動化されたビジュアルテストを最大限に活用するには、継続的インテグレーションとテストのワークフローにビジュアルレビューを追加することが理にかなっている場合があります。

CIビルドが開始されるたびにビジュアルテストが実行されるようにCIサービスでPercyを構成するには、PERCY_TOKENをCI環境変数に追加する必要があります。 より詳細な手順と、サポートされているすべてのCIサービスを確認するには、公式のPercyCIセットアップドキュメントを確認してください。

プル/マージリクエストにPercyを追加して、視覚的な変更が検出されたとき、およびそれらの変更が承認されてマージの準備ができたときに通知を受けることもできます。

組織の設定に移動して、PercyにGitHubまたはGitLabへのアクセスを許可します。 アクセスを許可したら、Percy上のプロジェクトをプロジェクトのソースリポジトリに接続します。 次にコミットすると、Percyがプル/マージリクエストチェックに表示されます。

詳細をクリックすると、視覚的な変更を確認できるPercyUIに直接移動します。 スナップショットが承認されると、コミットステータスが緑色に変わり、PRをマージできます。

この時点で、マージする準備ができています。

結論

このチュートリアルでは、Percyのビジュアルレビュープラットフォームを使用してビジュアルテストワークフローをレビューしました。 パーシーがどのように機能するかについて学び続けるために、公式ドキュメントのいくつかを見てください：

• パーシー入門
• パーシープラットフォームの基本
• ビジュアルテストの基本
• パーシーSDK