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></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 应用程序随着时间的推移保持其视觉完整性的有效方法。通过将视觉测试集成到您的工作流程中，您可以尽早检测并解决意外的视觉变化，从而提供一致且完美的用户体验。按照本指南中概述的步骤和最佳实践在您的项目中设置和利用视觉回归测试。

测试愉快！