随着前端应用的复杂性增加，保证其质量和稳定性的重要性也越来越加突出。在开发过程中，我们经常需要进行端到端（end-to-end，E2E）测试以验证整个应用的功能是否达到预期。在这种情况下，我们需要一些工具和框架来帮助我们进行 E2E 测试。
Cypress 就是这样一种工具，它是一款基于现代 Web 技术的 E2E 测试框架，适用于测试任何网站和应用程序。在这篇文章中，我们将介绍 Cypress 的主要特点和使用方法，并给出一些示例代码。
Cypress 的主要特点
Cypress 具有以下特点：
真正实时测试：Cypress 可以在运行时访问您的应用程序并一直保持连接，这意味着您可以在浏览器中实时查看事件并查看应用程序中发生的时间点。
自动等待：Cypress 会自动等待您的应用程序中的异步操作完成，这意味着您不需要手动添加任何等待时间。
可靠的调试：Cypress 支持实时调试和断点，使调试变得容易。
可组合性和可扩展性：Cypress 可以根据您的需求进行扩展和配置，并且具有强大的插件和 API，可让您轻松自定义。
速度快：Cypress 专为开发人员构建，因此易于编写和快速运行。
Cypress 的安装和配置
在使用 Cypress 之前，您需要先安装它。您可以使用以下命令来安装 Cypress：
npm install cypress --save-dev
安装完成后，您可以使用以下命令来打开 Cypress 交互式测试运行器：
npx cypress open
您还需要在 Cypress 配置文件中设置要测试的应用程序的 URL。配置文件的默认位置是项目根目录下的 cypress.json。以下是一个示例配置：
{
"baseUrl": "http://localhost:3000"
}在配置文件中，您可以设置 Cypress 的许多选项，例如浏览器和测试超时时间。有关更多详细信息，请参阅 Cypress 文档。
Cypress 的使用
在本节中，我们将介绍 Cypress 的主要功能，并且使用一个示例代码演示如何进行 E2E 测试。
可插拔的测试脚本
Cypress 的测试脚本可以以插件方式按需加载，这样可以使测试脚本更具可复用性和可维护性。例如，以下是一个 Cypress 测试脚本，该脚本可以加载通用的 common.js 文件：
// javascriptcn.com 代码示例
import { common } from './common.js';
describe('Shopping', () => {
before(() => {
common.login();
});
it('should add an item to cart', () => {
common.addItemToCart('Socks');
});
it('should complete checkout process', () => {
common.checkout();
});
});在该示例中，Cypress 自动按需加载 common.js 文件，并使其可用于测试脚本中的所有测试。
模拟和拦截网络请求
Cypress 具有强大的网络代理和控制，可以使用它们来模拟和拦截网络请求。例如，以下是一个测试脚本，该脚本使用 Cypress 拦截网络请求来检查应用程序中的错误提示：
// javascriptcn.com 代码示例
describe('Login', () => {
it('should display error message on invalid login', () => {
cy.intercept('POST', '/login').as('login');
cy.visit('/login');
cy.get('#username').type('invaliduser');
cy.get('#password').type('invalidpassword');
cy.get('button[type="submit"]').click();
cy.wait('@login').then((interception) => {
expect(interception.response.statusCode).to.eq(401);
expect(interception.response.body).to.include('Invalid username or password');
});
});
});在该示例中，Cypress 使用 cy.intercept 拦截 /login 的 POST 请求，并检查所返回的响应是否包含了错误消息。
可视化测试
Cypress 支持可视化测试，可以方便地交互式地测试应用程序中的内容。例如，以下是一个 Cypress 测试脚本，该脚本使用可视化测试来测试应用程序中的表单验证：
// javascriptcn.com 代码示例
describe('Registration', () => {
it('should display error messages on invalid input', () => {
cy.visit('/register');
cy.get('#email').type('invalidemail');
cy.get('#password').type('password');
cy.get('#confirmPassword').type('differentpassword');
cy.get('button[type="submit"]').click();
cy.get('.error-list').should('be.visible');
cy.screenshot('registration-invalid-input');
});
it('should submit registration on valid input', () => {
cy.visit('/register');
cy.get('#email').type('testuser@example.com');
cy.get('#password').type('password');
cy.get('#confirmPassword').type('password');
cy.get('button[type="submit"]').click();
cy.get('.success-message').should('be.visible');
cy.screenshot('registration-valid-input');
});
});在该示例中，Cypress 使用 cy.screenshot 捕获可视化测试结果并保存为截图文件。
自动化测试
Cypress 支持自动化测试，可在无需任何交互的情况下运行测试。例如，以下是一个 Cypress 测试脚本，该脚本使用自动化测试来测试应用程序中的购物车功能：
// javascriptcn.com 代码示例
describe('Shopping', () => {
it('should add socks to cart', () => {
cy.visit('/');
cy.get('nav').contains('Shop').click();
cy.get('.item-card').contains('Socks').click();
cy.get('button').contains('Add to cart').click();
cy.get('.cart-badge').should('contain', '1');
});
it('should remove socks from cart', () => {
cy.visit('/cart');
cy.get('.cart-item').contains('Socks').should('be.visible');
cy.get('.cart-item').contains('Remove').click();
cy.get('.cart-item').should('not.be.visible');
cy.get('.cart-badge').should('not.exist');
});
});在该示例中，Cypress 使用 cy.visit 命令打开应用程序并导航到特定的页面，然后使用 cy.get 命令查找和操作页面上的元素。
总结
Cypress 是一个非常强大的 E2E 测试框架，可以帮助您验证整个应用程序的功能和性能。在本文中，我们介绍了 Cypress 的主要特点和使用方法，并提供了一些示例代码来演示如何使用它进行 E2E 测试。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654889657d4982a6eb2cc582