视觉回归测试是确保您的 Web 应用程序随着时间的推移保持其视觉完整性的重要组成部分。随着应用程序的发展，可能会发生意外的视觉变化，从而可能影响用户体验。将 Cypress 与强大的视觉测试工具 Percy 相结合，可以让您无缝地自动化视觉回归测试。在这篇文章中，我们将探讨如何设置和使用 Cypress 和 Percy 来捕获 Web 应用程序中的视觉差异。
要开始使用 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');
});
});
在此测试中：
示例：测试特定组件
您还可以捕获页面特定组件或部分的视觉快照。例如，让我们捕获登录表单的快照。
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');
});
});
在此测试中：
在不同状态下拍摄快照
您可以捕获应用程序在不同状态下的快照，例如在用户交互之后。
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 仪表板，您可以在其中查看视觉变化。仪表板突出显示新快照和基准图像之间的任何差异，允许您批准或拒绝更改。
使用 Cypress 和 Percy 进行视觉回归测试是确保您的 Web 应用程序随着时间的推移保持其视觉完整性的强大方法。通过将视觉测试集成到您的工作流程中，您可以尽早检测并解决意外的视觉变化，从而提供一致且完美的用户体验。按照本指南中概述的步骤和最佳实践在您的项目中设置和利用视觉回归测试。
测试愉快！
以上是Cypress 和 Percy 的视觉回归测试：综合指南的详细内容。更多信息请关注PHP中文网其他相关文章！
