--- title: "Autify 要素に対するビジュアルリグレッションテストガイド | Autify Guide" slug: "visual-regression-testing-for-elements" description: "Autifyで要素に対するビジュアルリグレッションテストを実施する方法を学びましょう。シームレスな自動化テストを開始しましょう！" tags: ["アサーション"] updated: 2026-04-22T05:59:46Z published: 2026-04-22T05:59:46Z canonical: "help.autify.com/visual-regression-testing-for-elements" --- > ## Documentation Index > Fetch the complete documentation index at: https://help.autify.com/llms.txt > Use this file to discover all available pages before exploring further. # 要素に対するビジュアルリグレッションテスト ## 概要 Autifyでは、要素に対するビジュアルリグレッションテストを行えます。アサーションコマンド`対象の見た目が変わらないことを確認する`をシナリオに追加すると、対象要素の今回のスクリーンショットと、**過去のテスト実行で生成された基準画像**が比較されます。画像・テーブル・divなど、画面上のどのような要素であっても、ビューポート内に収まりうるものであればアサーションの対象として選択することが可能です。 `対象の見た目が変わらないことを確認する`ステップのあるテストを実行すると、最新のスクリーンショットと基準画像がピクセル単位で比較され、一致しなかった場合テストは失敗します。テストが失敗した場合は、見た目の差異が期待通りの変化によるものであるかどうかを確認するために、結果をレビューしましょう。もし期待通りの変化だった場合は、「変更を受け入れる」をクリックしてください。この操作だけで、次回のテスト実行に使用する基準画像の更新が完了します！ 注意 要素に対するビジュアルリグレッションテストはChrome/Linux環境でのみ動作しています。他の環境で実行した場合、`対象の見た目が変わらないことを確認する`のステップはスキップされます。 ## 要素のビジュアルリグレッションテストを実施する ### シナリオをレコーディングする 新規シナリオ画面またはシナリオ詳細画面からレコーディングを開始します。Autify Recorderで、チェックボックス(☑️)をクリックし、アサーションを作成する要素を選択します。次に、アサーションコマンドリストから`対象の見た目が変わらないことを確認する`を選択します。 ![Screenshot 2024-09-10 at 17.52.57.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Screenshot%202024-09-10%20at%2017.52.57.png?sv=2026-02-06&spr=https&st=2026-11-15T01%3A12%3A19Z&se=2026-11-15T02%3A12%3A19Z&sr=c&sp=r&sig=RmZFKI7viZg8%2BSC7sv1bsgOlBd6S3DlszVLiCwQCAVo%3D) シナリオを保存すると、シナリオ内に新しい`対象の見た目が変わらないことを確認する`ステップができます。なお、このステップにはサムネイルがありませんが、初回実行した後には**基準画像**が表示されます。 ![Screen Shot 2023-04-24 at 14.02.44.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Screen%20Shot%202023-04-24%20at%2014.02.44.png?sv=2026-02-06&spr=https&st=2026-11-15T01%3A12%3A19Z&se=2026-11-15T02%3A12%3A19Z&sr=c&sp=r&sig=RmZFKI7viZg8%2BSC7sv1bsgOlBd6S3DlszVLiCwQCAVo%3D) ### テストを2回実行する 準備ができたら、シナリオを実行します。最初の実行では、比較する**基準画像**がまだ存在しないため、`対象の見た目が変わらないことを確認する`ステップは以下のメッセージとともに実行がスキップされます： *このステップは初回実行時にスキップされます。今回は比較元となる要素の画像のみが取得され、今後のテスト時との見た目の比較が行われます。* ![Screenshot 2024-09-10 at 16.25.22.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Screenshot%202024-09-10%20at%2016.25.22.png?sv=2026-02-06&spr=https&st=2026-11-15T01%3A12%3A19Z&se=2026-11-15T02%3A12%3A19Z&sr=c&sp=r&sig=RmZFKI7viZg8%2BSC7sv1bsgOlBd6S3DlszVLiCwQCAVo%3D) シナリオのステップ詳細を見ると、1回目の実行で作成されたベースイメージを確認することができます。 ![Screenshot 2024-09-10 at 16.34.58.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Screenshot%202024-09-10%20at%2016.34.58.png?sv=2026-02-06&spr=https&st=2026-11-15T01%3A12%3A19Z&se=2026-11-15T02%3A12%3A19Z&sr=c&sp=r&sig=RmZFKI7viZg8%2BSC7sv1bsgOlBd6S3DlszVLiCwQCAVo%3D) 次に、アサーションが行われるよう、シナリオを再度実行します。今回は、`対象の見た目が変わらないことを確認する`ステップの「比較」タブで、現在の画像と前回成功したテスト実行で作成した基準画像が比較されます！ ![Screenshot 2024-09-10 at 16.37.01.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Screenshot%202024-09-10%20at%2016.37.01.png?sv=2026-02-06&spr=https&st=2026-11-15T01%3A12%3A19Z&se=2026-11-15T02%3A12%3A19Z&sr=c&sp=r&sig=RmZFKI7viZg8%2BSC7sv1bsgOlBd6S3DlszVLiCwQCAVo%3D) `対象の見た目が変わらないことを確認する`ステップのスクリーンショットを開くと、横並びの比較を見ることができます。「差分」タブをクリックすると、基準画像と比較された画像を見ることができます。 ![Screenshot 2024-09-10 at 16.42.13.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Screenshot%202024-09-10%20at%2016.42.13.png?sv=2026-02-06&spr=https&st=2026-11-15T01%3A12%3A19Z&se=2026-11-15T02%3A12%3A19Z&sr=c&sp=r&sig=RmZFKI7viZg8%2BSC7sv1bsgOlBd6S3DlszVLiCwQCAVo%3D) ![Screenshot 2024-09-10 at 16.42.58.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Screenshot%202024-09-10%20at%2016.42.58.png?sv=2026-02-06&spr=https&st=2026-11-15T01%3A12%3A19Z&se=2026-11-15T02%3A12%3A19Z&sr=c&sp=r&sig=RmZFKI7viZg8%2BSC7sv1bsgOlBd6S3DlszVLiCwQCAVo%3D) ### ビジュアルリグレッションの差分の許容値 ビジュアルリグレッションテストの差分の許容値を指定すると、基準画像と現在の画像との間で、どの程度の差異が許容されるかを設定し、テストが失敗と判断されるかどうかを指定できます。これはシナリオのステップ詳細の中で設定することができます。 ![Screenshot 2024-09-10 at 17.14.18.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Screenshot%202024-09-10%20at%2017.14.18.png?sv=2026-02-06&spr=https&st=2026-11-15T01%3A12%3A19Z&se=2026-11-15T02%3A12%3A19Z&sr=c&sp=r&sig=RmZFKI7viZg8%2BSC7sv1bsgOlBd6S3DlszVLiCwQCAVo%3D) 許容値を0から100の範囲で設定することで、テストを成功させる最大の差異の割合を指定できます。 #### 例 しきい値を1%に設定した場合、画像間の差異（差分スコア）が1%以内であればテストは成功します。差分スコアが許容値を超えると、テストは失敗し、許容値よりも大きな見た目の変化があったことを示します。 **成功** ![Screenshot 2024-09-10 at 17.22.32.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Screenshot%202024-09-10%20at%2017.22.32.png?sv=2026-02-06&spr=https&st=2026-11-15T01%3A12%3A19Z&se=2026-11-15T02%3A12%3A19Z&sr=c&sp=r&sig=RmZFKI7viZg8%2BSC7sv1bsgOlBd6S3DlszVLiCwQCAVo%3D) ![Screenshot 2024-09-10 at 17.27.19.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Screenshot%202024-09-10%20at%2017.27.19.png?sv=2026-02-06&spr=https&st=2026-11-15T01%3A12%3A19Z&se=2026-11-15T02%3A12%3A19Z&sr=c&sp=r&sig=RmZFKI7viZg8%2BSC7sv1bsgOlBd6S3DlszVLiCwQCAVo%3D) **失敗** ![Screenshot 2024-09-10 at 17.32.13.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Screenshot%202024-09-10%20at%2017.32.13%281%29.png?sv=2026-02-06&spr=https&st=2026-11-15T01%3A12%3A19Z&se=2026-11-15T02%3A12%3A19Z&sr=c&sp=r&sig=RmZFKI7viZg8%2BSC7sv1bsgOlBd6S3DlszVLiCwQCAVo%3D) ![Screenshot 2024-09-10 at 17.32.53.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Screenshot%202024-09-10%20at%2017.32.53.png?sv=2026-02-06&spr=https&st=2026-11-15T01%3A12%3A19Z&se=2026-11-15T02%3A12%3A19Z&sr=c&sp=r&sig=RmZFKI7viZg8%2BSC7sv1bsgOlBd6S3DlszVLiCwQCAVo%3D) この機能により、本来だと無関係な見た目のわずかな変化によって引き起こされる、意図しないテスト失敗を減らすことができます。また、ビジュアルリグレッションテストで許容できる基準を柔軟に設定できるようになります。 ### 変更を受け入れる `対象の見た目が変わらないことを確認する`ステップは、現在のスクリーンショットが基準画像と完全に一致する場合に成功し、そうでない場合は失敗します。次のスクリーンショットは、`対象の見た目が変わらないことを確認する`ステップが失敗した例です。 ![Screen Shot 2023-04-24 at 14.29.32.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Screen%20Shot%202023-04-24%20at%2014.29.32%281%29.png?sv=2026-02-06&spr=https&st=2026-11-15T01%3A12%3A19Z&se=2026-11-15T02%3A12%3A19Z&sr=c&sp=r&sig=RmZFKI7viZg8%2BSC7sv1bsgOlBd6S3DlszVLiCwQCAVo%3D) しかし、見た目の変化を受け入れて、今回の結果を今後の基準画像として使用したい場合もあるでしょう。そのような場合のために「変更を受け入れる」ボタンが用意されています。 ![Screen Shot 2023-04-24 at 14.29.50.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Screen%20Shot%202023-04-24%20at%2014.29.50%281%29.png?sv=2026-02-06&spr=https&st=2026-11-15T01%3A12%3A19Z&se=2026-11-15T02%3A12%3A19Z&sr=c&sp=r&sig=RmZFKI7viZg8%2BSC7sv1bsgOlBd6S3DlszVLiCwQCAVo%3D) 「変更を受け入れる」ボタンをクリックすると、テスト結果自体のステータスには影響しませんが、この`対象の見た目が変わらないことを確認する`ステップの基準画像が更新されます。 ![Screenshot 2024-09-10 at 16.48.17.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Screenshot%202024-09-10%20at%2016.48.17.png?sv=2026-02-06&spr=https&st=2026-11-15T01%3A12%3A19Z&se=2026-11-15T02%3A12%3A19Z&sr=c&sp=r&sig=RmZFKI7viZg8%2BSC7sv1bsgOlBd6S3DlszVLiCwQCAVo%3D) 次にテストを実行するときは、新しい基準画像が比較に使用されます。このように、期待する要素の見た目を変更することも簡単に行えます。 ![Screen Shot 2023-04-24 at 14.37.47.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/Screen%20Shot%202023-04-24%20at%2014.37.47.png?sv=2026-02-06&spr=https&st=2026-11-15T01%3A12%3A19Z&se=2026-11-15T02%3A12%3A19Z&sr=c&sp=r&sig=RmZFKI7viZg8%2BSC7sv1bsgOlBd6S3DlszVLiCwQCAVo%3D) ## ご利用時の注意点 ### テキストに対するアサーション テキストに対しても、`対象の見た目が変わらないことを確認する`アサーションを追加することは可能ですが、Autifyがフォントのレンダリングによる微細な差を検知し、稀に失敗となる可能性があります。 そのため、テキストに対してアサーションを行う場合は、「対象のテキストが〇〇であることを確認する」などの[テキストアサーション](/v1/docs/ja/assertion-elements-on-the-page)をご利用いただくことをお薦めします。 ### 色の違いに対するアサーション 要素の色が想定通りであるかを検証するために、`対象の見た目が変わらないことを確認する`アサーションを追加することは可能ですが、色の変化の度合いによっては、色が変化していてもステップが成功してしまう可能性があります。現状は、JSステップを使用しての検証をお薦めします。 - [要素のstyleを検証する](https://javascript-snippets.autify.com/ja/snippets/assertions/assert_style/) ### シナリオ複製時の基準画像 シナリオを複製した場合、`対象の見た目が変わらないことを確認する`ステップの基準画像も複製されます。 ### ステップグループでの利用 ステップグループに含まれる`対象の見た目が変わらないことを確認する`ステップは、ステップグループ自体が基準画像を保持します。シナリオによって検証対象の基準画像が異なる場合は、このステップをステップグループに含めず、シナリオ側に追加することをおすすめします。 皆様によるビジュアルリグレッションテストのご活用、ご意見をお待ちしております！