Cypress 和 Percy 的视觉回归测试：综合指南

php中文网 2024-10-15 11:19:01

介绍

视觉回归测试是确保您的 web 应用程序随着时间的推移保持其视觉完整性的重要组成部分。随着应用程序的发展，可能会发生意外的视觉变化，从而可能影响用户体验。将 cypress 与强大的视觉测试工具 percy 相结合，可以让您无缝地自动化视觉回归测试。在这篇文章中，我们将探讨如何设置和使用 cypress 和 percy 来捕获 web 应用程序中的视觉差异。

为什么视觉回归测试很重要

用户体验：确保 ui 更改不会对用户体验产生负面影响。
一致性： 在不同版本和环境中保持视觉一致性。
早期检测： 在开发过程的早期检测意外的视觉变化。
自动化工作流程：集成到 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', () =&gt; {
    beforeeach(() =&gt; {
        cy.visit('/');
    });

    it('should capture a visual snapshot of the homepage', () =&gt; {
        cy.percysnapshot('homepage');
    });
});

在此测试中：

cy.visit('/'): 导航到应用程序的根 url。
cy.percysnapshot('homepage')：捕获页面的视觉快照并将其命名为“homepage”。

示例：测试特定组件
您还可以捕获页面特定组件或部分的视觉快照。例如，让我们捕获登录表单的快照。

describe('visual regression testing with cypress and percy', () =&gt; {
    beforeeach(() =&gt; {
        cy.visit('/login');
    });

    it('should capture a visual snapshot of the login form', () =&gt; {
        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', () =&gt; {
    beforeeach(() =&gt; {
        cy.visit('/login');
    });

    it('should capture visual snapshots in different states', () =&gt; {
        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');
    });
});

在此测试中：