Zenn
Accenture Japan SDET (Voluntary)Publicationへの投稿
🦔

Visual Regression Testingツール選定　～②Percy編～

Tsushiro.S
2024/02/09に公開
Percy
VRT
tech

前回の記事では、Visual Regression Testingツールの一つであるaShotについて詳しくご紹介しました。今回は、有償サービスである「Percy」の検証結果に焦点を当ててご紹介します。

Percyはオープンソースソフトウェア（OSS）ではなく、有償サービスです。このため、機能面でより多くの可能性を秘めていると考えられます。有償サービスならではのメリットを活用した結果を、お伝えさせていただきます。

また、Visual Regression Testingに関する基本的な情報は前回の記事で説明しましたので、そちらもぜひご覧いただければ幸いです。今回のPercyの検証結果と合わせて、Visual Regression Testingの理解をさらに深めることができると思います。
https://zenn.dev/acn_jp_sdet/articles/74fbda5f9142b6

また、PercyはBrowserStackと組み合わせることで、様々なブラウザやデバイスでテストが可能になり、テストカバレッジを容易に広げることが出来ます。
BrowserStackについては以下記事をご参考にしていただければ幸いです。
https://zenn.dev/acn_jp_sdet/articles/5eadc0ba5e6ecb

想定する読者

  • Visual Regression Testingに興味がある方
  • Visual Regression Testingの導入を検討している方

Visual Regression Testing用ツールの紹介

Visual Regression Testingを実施するためのツールについて、3部に分けてご紹介しております。
今回は、有償サービスのPercyについてご説明いたします。
※将来的にはこのリストに他のツールが加わる可能性もあります。

# ツール タイプ 説明
1 aShot オープンソースソフトウェア (OSS) スクリーンショットのキャプチャと画像比較機能を提供し、視覚的なバグの検出に有効な無料で利用できるオープンソースのライブラリ。
2 Percy 有償サービス Visual testを自動化し、UIの変更を容易に検出できるライブラリ。
3 Applitools 有償サービス Visual AI技術を活用し、高度なビジュアル比較と分析を実行できるライブラリ。

1.Percyとは?

Percyは、ウェブページのビジュアル品質を保証するために設計されたオールインワンのビジュアルテストおよびレビュープラットフォームです。このツールはVisual Regression Testingを自動化し、UIの変更を監視することで視覚的なバグを検出し、開発者がデプロイ時にUIの視覚的な整合性を確認できるよう支援します。

Percyの仕組み

Percyはウェブページのイメージ（画像）ではなく、DOM（Document Object Model）のスナップショットをキャプチャするツールです。このDOMはウェブページの構造を表すもので、ウェブページのコードの状態を記録します。この方法は通常のスクリーンショットを取得して画像比較するよりも安定性が高いという利点があります。Percyでは、ウェブページの構造と内容を記録したDOMのスナップショットを取得し、これを基に視覚的なスクリーンショット比較を行います。

さらに、Percyはウェブページをキャプチャする際に、元のDOMスナップショットとページアセット（HTML、CSS、JavaScript、画像、フォント、およびその他のリソースのコピー）を保存します。これにより、異なるブラウザ間で同じページを正確に再現し、一貫したスクリーンショットを取得できます。この機能は、異なる環境下でのウェブページの表示確認に役立ちます。

サポートしているブラウザ:
最新のChrome、Firefox、Edge、Safariに対応しています。

参考情報:https://percy.io/

Percyが提供する便利な機能

Percyには多くの機能がありますが、特にVisual Regression Testingを効果的に行うために役立つ機能をいくつかご紹介します。

  • Ignoreの設定
    スクリーンショットの比較から除外する要素をソースコードやGUI上から簡単にマスキングできる設定が可能です。
  • 比較厳密度の調整　
    　スクリーンショット比較の際の厳密度を調整できます。この機能は特に色の差異に対して適用されます。
  • Percy APIの機能
    　Percy APIを使用すると、以下のような操作がプログラムで実行できます。
    • スクリーンショットのダウンロード
    • スクリーンショット比較の差分有無の結果取得
  • Percy コマンドの機能
    Percyコマンドを用いて、以下の操作が可能です。
    • percy upload - 画像の静的ディレクトリをPercyにアップロードします。これにより、既存のスクリーンショットをベースイメージとして使用することが可能になります。
    • percy config - Percyの設定ファイルを管理します。このコマンドで設定の表示、編集、更新が行えます。
    • percy build - Percyビルドと対話するためのコマンドです。ビルドの開始、更新、完了に使用します。

2.Percyを使用したVisual Regression Testingの実践

本記事で前提とする技術スタック

  • Maven
  • Java 17
  • Selenide 7.0.2
  • JUnit 4

環境構築手順

①Percyのアカウントを作成する

(1)アカウントを作成する
以下URLからアカウントを作成します。
https://percy.io/

(2)プロジェクトを作成する
右上の「Create new project」からプロジェクトを作成します。

(3)Project tokenを取得する。
作成したプロジェクトにて、Project tokenが記載されているため、取得します。

②Nodo.jsのインストール

WindowsPCの場合、Nodo.jsのインストールをインストールします。※既にインストールされている場合は不要。

以下URLからダウンロード
https://nodejs.org/en/download/

③依存関係追加

Mavenの依存関係を追加します。

<dependency>
  <groupId>io.percy</groupId>
  <artifactId>percy-java-selenium</artifactId>
  <version>1.3.0</version>
</dependency>

④npmをinstallする

コマンドプロンプトより実行します。
※初回のみ実行

npm install --save-dev @percy/cli

実行方法

コマンドプロンプトから実行する方法を説明します。

①Project Tokenの設定
※Percyのアカウント作成時に取得したProject tokenを記載します。

set PERCY_TOKEN = "<your token here>"

※事前に環境変数に設定しておくことも可能です。

②Percyを用いたテストの実行
コマンドプロンプトより、Percyを組み込んだテストコマンドを実行します。

npx percy exec -- [java test command]

スクリーンショット比較のソースコード

Percyを使用したスクリーンショット比較の方法をご紹介します。スクリーンショットを取得する際は、ソースコードに以下の一行を追加するだけで簡単に行えます。
"name"（以下の例では"test"）をキーとして、ベースイメージとPercyから取得したスクリーンショットを紐付けます。Percyでは、常に前回取得したスクリーンショットがベースイメージとして扱われます。

percy = new Percy(driver);
percy.snapshot("test");

実際の比較

①幅が変更された場合の比較結果

ウェブページの要素の幅を変更した際のPercyによる比較結果を示します。具体的には、ログインボタンの幅を1ピクセル狭くすることで、その影響を視覚的に確認します。

  1. 期待値となるスクリーンショット
    これは変更前のウェブページのスクリーンショットで、期待されるデザインを示しています。

  2. 幅を1ピクセル狭くしたスクリーンショット
    右側にある画像は、ログインボタンの幅を1ピクセルだけ狭く変更した後のウェブページのスクリーンショットです。

  3. 1ピクセル幅を狭くした場合の比較結果
    以下の画像は、期待するスクリーンショットと幅を変更したスクリーンショットとの比較結果し、差分が発生している部分には赤色が付けられています。この比較から、細かな変更点も明確に確認することができます。

②色が変更された場合の比較結果

ウェブページの要素の色を変更した際のPercyによる比較結果を示します。具体的には、ログインボタンの色を変更することで、その影響を視覚的に確認します。

  1. 期待値のスクリーンショット
    これは変更前のウェブページのスクリーンショットで、期待されるデザインを示しています。

  2. 色を変更したスクリーンショット
    右側にある画像は、ログインボタンの色を白に変更した後のウェブページのスクリーンショットです。

  3. 色を変更した場合の比較結果
    以下の画像では、元のスクリーンショットと色を変更したスクリーンショットを比較し、差分が発生している部分には赤色が付けられています。これにより、色の変更による影響が一目でわかります。

③類似色が変更された場合の比較結果

ウェブページの要素の類似色を変更した際のpercyによる比較結果を示します。具体的には、ログインボタンの色を微妙に変更することで、その影響を視覚的に確認します。

  1. 期待値のスクリーンショット
    これは変更前のウェブページのスクリーンショットで、期待されるデザインを示しています。
    (色コード: #ff00ff)

  2. 類似色で変更したスクリーンショット
    次に、ログインボタンの色を類似色（#ff00ea）に変更し、その後のウェブページのスクリーンショットを取得します。

  3. 類似色を変更した場合の比較結果
    下の画像では、元のスクリーンショットとログインボタンの色を類似色に変更したスクリーンショットを比較しましたが、差分は発生していません。微妙な色の違いに関しては差分として検出されないよう設定されています。そのため、1ピクセルレベルでの違いを詳細に知りたい場合は、厳密度の設定を変更する必要があります。

※厳密度は、デフォルトのRecommendedを使用しております。

3.Percyのメリットとデメリット

実際にPercyを使用してみた経験をもとに、メリットとデメリットを以下にまとめました。ここでは私なりの考察と適応シナリオも含めて、参考として提供します。

Percyのメリット

  • 安定している
    　PercyはDOM（Document Object Model）のスナップショットをキャプチャしているため、通常のスクリーンショットを取得して画像比較するよりも安定しています。また、安定したスクリーンショットが取得できる仕組みがあり、例えば、比較対象のスクリーンショット間で1pxしか差分がない場合、これを視覚的な変化としてマークしないように設計されています。これは、1ピクセルの差分が多くの場合、予測不可能なブラウザのレンダリング結果であることに基づいています。このような仕組みにより、Percyはスクリーンショットの取得をより安定させ、予期せぬ差分やピクセルエラーの発生を防ぎます。実際に検証した結果、一度も予期せぬピクセルエラーは発生していません。
  • Ignoreの設定が容易
    　Visual Regression Testingでは、タイムスタンプやカレンダー情報など可変フィールドを含む画面要素は事前にIgnore（無視）する設定を行う必要があります。これにより、不要なUI差分摘出を回避します。PercyではGUI画面からもソースコードからも容易に設定でき、差分が発生した場合、問題ないとわかれば後からIgnoreの設定ができるため、非常に使い勝手が良いです。
  • 統合との互換性
    　Percyは多くの開発ツールやCI/CDパイプラインと簡単に統合できます。検証を実施した際は、SelenideやAzure DevOpsへ簡単に統合することが出来ました。既存の自動テストフレームワークやCI/CDパイプランをそのまま活用しつつ、Visual Regression Testingの導入が可能になります。
  • クロスブラウザテストに対応
    　Percyは最新のChrome、Firefox、Edge、Safariに対応しており、ウェブページのキャプチャ時には元のDOMスナップショットとページアセットを保存します。これにより、異なるブラウザで同じウェブページをレンダリングし、スクリーンショットを取得することが可能になります。この機能は、サポートされている各ブラウザでのVisual Regression Testingを効率的に一度に行うことが出来ます。さらに、特定のテストに必要なブラウザを選択することも可能です。

Percyのデメリット

  • 料金が発生
    　Percyは有償サービスであり、無料での利用はできません。これは、無料でVisual Regression Testingを導入したい場合には障害となる可能性があります。
  • Node.js環境が必要
    　Percyを実行するためにはNode.js環境が必要になります。プロジェクトで気軽にNode.js環境を構築できない場合に問題となることがあります。
  • 比較時の厳密度の調整が色に限定されている
    　Percyでは、厳密度の調整が色のみに限定されています。色以外の要素に関しては厳密度の調整ができません。このため、Percyで取得したスクリーンショットと他の方法で取得したスクリーンショットを比較する際に、視覚的には差異がなくてもピクセルレベルでの差分が生じることがあります。実際に検証した結果、同じウェブ画面のスクリーンショットとPercyから取得したスクリーンショットを比較した際、微妙な差分が発生しました。厳密度の調整をして視覚的に問題のない差分を差分として検出しないように出来ないか検証してみましたが、微妙な差分が発生してしまいました。
  • ベースイメージの管理が複雑
    　Percyでは、前回取得したスクリーンショットがベースイメージとして使用されます。そのため、誤って実行した場合や特定のテスト結果をベースラインとして使用したい場合、ベースイメージの管理が難しくなることがあります。実際に検証した結果、スクリーンショットを取得する際のスクリーンショット名(「name」)が比較対象となるため、比較を避けたい場合はスクリーンショット名(「name」)を変更するなどしてベースイメージを管理することができることが分かりました。しかし、プロジェクトの規模が大きくなるにつれて、この管理はより複雑になると感じました。
  • 効果的に使用するには技術力が必要
    　Percyは便利な機能を提供しますが、効果的に使用するためには技術力が必要になります。例えば、Percyを統合した自動テストフレームワークは、テストの実行結果（正常または異常）のみ通知を行い、スクリーンショット比較における差分の有無に関する自動通知は行いません。差分の自動通知を行うためには、Percyを統合した自動テストフレームワーク実行後にPercyのAPIを利用して結果を取得する必要があります。CI/CDを活用し、Visual Regression Testingを効果的に導入するためには、一定の技術力が求められます。

Percyの適用シナリオ

Percyは安定してスクリーンショットを取得できるため、特に小規模プロジェクトにおいて目視では分かりにくい微細な差分を検出するのに適しています。このツールは予算に余裕がある場合に特に有効で、頻繁なウェブ画面の仕様変更がある状況にも対応できます。さらに、Chrome、Firefox、Edge、Safariなど複数のブラウザに対応しており、クロスブラウザテストにおいてもVisual Regression Testingを効率的に実施することが可能です。
　しかし、ベースイメージの管理が複雑になるため、大規模プロジェクトではその管理が困難になる可能性がある点に注意が必要です。また、CI/CDパイプラインに組み込んでVisual Regression Testingを行うことは効果的ですが、Percyを効果的に使用するためには一定の技術力が必要であり、コストや技術面での検討が求められます。

4.まとめ

Visual Regression TestingツールとしてPercyを試してみた結果、安定したスクリーンショットが取得でき、原因不明なピクセルレベルのエラーが発生しないことが分かりました。そのため、単純なスクリーンショット比較には非常に使い勝手が良いと感じました。
また、既存のスクリーンショットをPercyにアップロードし、ベースラインとして使用できる点は便利でした。しかし、全く同じ環境で取得したスクリーンショットであっても、Percyの機能で取得したものと他の方法で取得したものを比較すると、視覚的に差異がない場合でもピクセルレベルでの差分が発生しました。そのため、既存のスクリーンショットをベースラインとして使用し、Percyを利用して取得したスクリーンショットとの比較は出来なさそうでした。この点は非常に残念だったため、比較時の厳密度の調整は色だけでなく、より広範囲に渡る改善に期待しています。

さらに、ピクセルレベルの比較ではなく目視での判断が可能な機能があれば便利だと感じたため、Visual AI技術を使用した「Applitools」の検証も行いました。次回は「Applitools」について詳しくご説明いたします。楽しみにしていただけると幸いです。

それでは、皆様にとって充実したテストの時間を。Happy Testing!

仲間募集

Accenture Japan QE&Aでは、テスト自動化を通じてお客様の変革を支援しています。
同じビジョンを共有する仲間を募集しています！

https://www.accenture.com/jp-ja/careers/jobdetails?id=R00091947_ja

Accenture Japan SDET (Voluntary)
Accenture Japan SDET (Voluntary)Publication

Accenture Japan QE&A (Quality Engineering & Assurance) の SDETの有志メンバーによる記事ページ

Discussion