Cypress 和 Percy 的視覺回歸測試：綜合指南

介紹

視覺回歸測試是確保您的 Web 應用程式隨著時間的推移保持其視覺完整性的重要組成部分。隨著應用程式的發展，可能會發生意外的視覺變化，可能會影響使用者體驗。將 Cypress 與強大的視覺測試工具 Percy 結合，可以讓您無縫地自動化視覺回歸測試。在這篇文章中，我們將探討如何設定和使用 Cypress 和 Percy 來捕捉 Web 應用程式中的視覺差異。

為什麼視覺迴歸測試很重要

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 來寫一些視覺回歸測試。我們將從一個簡單的測試開始，捕捉網頁的視覺快照。

範例：捕捉視覺快照
在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中文網其他相關文章！