cypress 测试框架介绍

---

简介

Cypress 是一个现代化的前端自动化测试框架，专为 Web 应用程序测试而设计。与 Selenium 等传统测试框架不同，Cypress 直接在浏览器中运行测试，提供更快的执行速度和更稳定的测试体验。它适用于端到端（E2E）测试、集成测试和单元测试。

---

使用场景

• 功能测试：测试用户在 UI 上的完整操作流程，例如登录、数据输入、表单提交等。
• 集成测试：测试不同组件之间的交互，如 API 请求和 UI 组件的集成效果。
• CI/CD 流水线：可以与 Jenkins、GitHub Actions、GitLab CI 等持续集成工具集成，实现自动化测试。

---

Cypress 的特点

• 简单易用：安装和配置简单，无需额外的 WebDriver。
• 实时交互：提供交互式 UI，可以在执行测试时查看每一步的执行情况。
• 内置等待机制：自动等待页面加载，无需显式添加 wait 语句。
• 强大的调试功能：支持浏览器 DevTools 调试，提供详细的错误日志和快照。

---

Cypress 的安装与使用步骤

---

安装 Cypress

Cypress 依赖 Node.js 环境，确保本地安装了 Node.js（建议使用 LTS 版本）。

• 初始化 package.json：npm init -y
• 安装 Cypress：npm install cypress --save-dev

---

打开 Cypress

安装完成后，可以使用以下命令打开 Cypress。该命令会启动 Cypress 测试界面，可以在 UI 界面中运行测试。

npx cypress open

---

创建测试

Cypress 测试文件存放在 cypress/e2e/ 目录下，通常以 .cy.js、.cy.ts 或 .cy.jsx 结尾。

示例：创建一个 cypress/e2e/sample.cy.js 文件，内容如下：

describe('Cypress 示例测试', () => {
  it('访问百度首页并搜索', () => {
    cy.visit('https://www.baidu.com'); // 访问百度
    cy.get('input[name="wd"]').type('Cypress{enter}'); // 输入关键字并回车
    cy.contains('Cypress').should('be.visible'); // 断言搜索结果包含 "Cypress"
  });
});

---

运行测试

• 在终端运行：npx cypress run
• 打开 Cypress UI 选择测试：npx cypress open

---

断言

Cypress 断言机制基于 Chai 断言库，常见断言示例如下：

cy.get('.button').should('be.visible'); // 按钮可见
cy.url().should('include', '/dashboard'); // URL 包含 /dashboard
cy.get('.alert').should('have.text', '登录成功'); // 元素包含指定文本

---

网络请求拦截（Mock API）

Cypress 允许拦截 API 请求，模拟后端返回的数据。其中，user.json 是 Cypress 的 fixtures 目录下的模拟数据。

cy.intercept('GET', '/api/user', { fixture: 'user.json' }).as('getUser');
cy.visit('/profile');
cy.wait('@getUser');

---

录制测试视频

Cypress 运行测试时，可以录制执行过程的视频：需要配置 Cypress Dashboard 以存储和查看测试报告。

npx cypress run --record

---

总结

• Cypress 是现代 Web 自动化测试框架，适用于 E2E、集成测试和单元测试。
• 它具有简单的安装方式、强大的调试能力和丰富的 API 。
• 通过 Cypress，开发者可以更快速地编写、调试和运行测试，提高 Web 应用的质量和稳定性。