Cypress と Percy を使用したビジュアル回帰テスト: 包括的なガイド

導入

ビジュアル回帰テストは、Web アプリケーションが長期にわたってビジュアルの整合性を維持することを保証するために不可欠な部分です。アプリケーションが進化すると、意図しない視覚的な変化が発生し、ユーザー エクスペリエンスに影響を与える可能性があります。 Cypress と強力なビジュアル テスト ツールである Percy を組み合わせることで、ビジュアル回帰テストをシームレスに自動化できます。この投稿では、Web アプリケーション内の視覚的な不一致を検出するために Cypress と Percy を設定および使用する方法を説明します。

視覚的な回帰テストが重要な理由

1. ユーザー エクスペリエンス: UI の変更がユーザー エクスペリエンスに悪影響を及ぼさないようにします。
2. 一貫性: 異なるリリースや環境間で視覚的な一貫性を維持します。
3. 早期検出: 開発プロセスの早い段階で、意図しない視覚的な変更を検出します。
4. 自動化されたワークフロー: 継続的なビジュアル テストのために CI/CD パイプラインに統合されます。

Cypress と Percy の入門

Cypress と Percy を使用してビジュアル回帰テストを開始するには、次の手順に従います。

ステップ 1: Cypress と Percy をインストールする
まず、プロジェクトに Cypress がインストールされていることを確認します。そうでない場合は、次のコマンドを使用してインストールできます:

npm install cypress --save-dev

次に、Percy CLI と @percy/cypress パッケージをインストールします。

npm install --save-dev @percy/cli @percy/cypress

ステップ 2: Percy を構成する
Percy ダッシュボードで Percy プロジェクトを作成します。作成すると、Percy プロジェクト トークンを取得します。このトークンを環境変数として設定します:

export PERCY_TOKEN=<your_percy_project_token>

ステップ 3: Percy を Cypress と統合する
cypress/support/index.js ファイルに、Percy をインポートする次の行を追加します。

import '@percy/cypress';

これにより Percy コマンドが Cypress に追加され、テスト中に視覚的なスナップショットを取得できるようになります。

ビジュアル回帰テストの作成

Cypress と Percy を使用して視覚的な回帰テストをいくつか書いてみましょう。まずは、Web ページの視覚的なスナップショットをキャプチャする簡単なテストから始めます。

例: ビジュアルスナップショットのキャプチャ
cypress/e2e ディレクトリに新しいテスト ファイル (visual-regression.spec.js など) を作成し、次のコードを追加します。

describe('Visual Regression Testing with Cypress and Percy', () => {
    beforeEach(() => {
        cy.visit('/');
    });

    it('should capture a visual snapshot of the homepage', () => {
        cy.percySnapshot('Homepage');
    });
});

このテストでは:

• cy.visit('/'): アプリケーションのルート URL に移動します。
• cy.percySnapshot('Homepage'): ページの視覚的なスナップショットをキャプチャし、「Homepage」という名前を付けます。

例: 特定のコンポーネントのテスト
ページの特定のコンポーネントまたはセクションの視覚的なスナップショットをキャプチャすることもできます。たとえば、ログイン フォームのスナップショットをキャプチャしてみましょう。

describe('Visual Regression Testing with Cypress and Percy', () => {
    beforeEach(() => {
        cy.visit('/login');
    });

    it('should capture a visual snapshot of the login form', () => {
        cy.get('.login-form').percySnapshot('Login Form');
    });
});

このテストでは:

• cy.visit('/login'): ログイン ページに移動します。
• cy.get('.login-form'): ログインフォーム要素を選択します。
• cy.percySnapshot('Login Form'): ログイン フォームの視覚的なスナップショットをキャプチャします。

高度な視覚回帰テスト

さまざまな状態でのスナップショットのキャプチャ
ユーザー操作後など、さまざまな状態でアプリケーションのスナップショットをキャプチャできます。

describe('Visual Regression Testing with Cypress and Percy', () => {
    beforeEach(() => {
        cy.visit('/login');
    });

    it('should capture visual snapshots in different states', () => {
        cy.get('input[name="username"]').type('testuser');
        cy.get('input[name="password"]').type('password123');
        cy.percySnapshot('Login Form - Filled');

        cy.get('button[type="submit"]').click();
        cy.percySnapshot('Dashboard');
    });
});

このテストでは:

• ログイン フォームに記入した後、そのスナップショットをキャプチャします。
• ログイン後にダッシュボードの別のスナップショットをキャプチャします。

ビジュアル回帰テストの実行

ビジュアル回帰テストを実行するには、次のコマンドを使用します:

npx percy exec -- cypress run

このコマンドは Percy を使用して Cypress テストを実行し、視覚的なスナップショットをキャプチャして比較します。

視覚的な変更の確認

テストの実行後、Percy はスナップショットを Percy ダッシュボードにアップロードします。そこで、視覚的な変更を確認できます。ダッシュボードには、新しいスナップショットとベースライン イメージ間の相違点が強調表示され、変更を承認または拒否できます。

ビジュアル回帰テストのベスト プラクティス

1. 視覚要素の分離: 分離されたコンポーネントまたはセクションのスナップショットをキャプチャして、視覚的な変更をより効果的に特定します。
2. わかりやすいスナップショット名を使用する: スナップショットの識別と確認を容易にするために、スナップショットにわかりやすい名前を使用します。
3. CI/CD との統合: ビジュアル回帰テストを CI/CD パイプラインに追加して、展開ごとに視覚的な変更を自動的に検出します。
4. 変更を定期的に確認する: Percy ダッシュボードで変更を定期的に確認して承認し、正確な視覚的なベースラインを維持します。

結論

Cypress と Percy を使用したビジュアル回帰テストは、Web アプリケーションが長期にわたってビジュアルの整合性を維持していることを確認する強力な方法です。ビジュアル テストをワークフローに統合することで、意図しないビジュアルの変更を早期に検出して対処し、一貫した洗練されたユーザー エクスペリエンスを提供できます。このガイドで概説されている手順とベスト プラクティスに従って、プロジェクトでビジュアル回帰テストを設定して活用します。

テストをお楽しみください!

以上がCypress と Percy を使用したビジュアル回帰テスト: 包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。