Cypress 是什么
Cypress 是面向浏览器应用的端到端与组件测试框架：测试代码运行在浏览器上下文里，通过命令队列驱动页面。三个显著特点：断言自动重试（retry-ability）、时间旅行调试（回看每步 DOM 快照）、网络桩 cy.intercept。技术栈为 JavaScript/TypeScript。
基本信息
| 运行方式 | npx cypress open 交互调试，npx cypress run 无头执行 |
|---|---|
| 默认超时 | 命令默认 4000ms 未完成即失败，可全局或按用例调整 |
| 网络桩 | cy.intercept 拦截并伪造响应，覆盖异常态 |
| 断言 | should/expect 链式断言自动重试直到超时 |
| 配置 | cypress.config.js 管理 baseUrl、超时、视口等 |
| 定位建议 | 用 data-cy 等专用属性，避免依赖样式类 |
最小示例
最小示例
describe('登录', () => {
it('登录成功进入工作台', () => {
cy.intercept('POST', '/api/login').as('login'); // 标记请求
cy.visit('/login');
cy.get('[data-cy=user]').type('tester'); // 专用属性定位
cy.get('[data-cy=pwd]').type('secret{enter}');
cy.wait('@login').its('response.statusCode').should('eq', 200);
cy.url().should('contain', '/dashboard'); // 自动重试直到通过
});
});典型使用场景
- 端到端关键路径回归：登录、下单、支付等主链路
- 网络异常态验证：用拦截伪造 500、超时、慢响应
- 调试定位问题：时间旅行看每步页面状态与请求
- 组件测试：对单体组件渲染与交互做隔离验证
- CI 集成：无头模式加截图、录像产出失败证据
- 前端联调自测：后端未就绪时用网络桩先跑通流程
- 发布前冒烟：核心流程无头模式快跑一遍，作为发布门禁
- 跨浏览器抽查：按节奏在 Chromium、Firefox 等内核间轮换验证
常用命令与特点
| 命令 | 作用 | 特点 |
|---|---|---|
| cy.visit | 打开页面 | 失败自动重试 |
| cy.get | 按选择器取元素 | 元素不存在则重试到超时 |
| cy.contains | 按文本定位 | 适合按钮与链接 |
| cy.intercept | 拦截网络请求 | 桩数据与断言请求双用途 |
| cy.wait | 等待别名请求 | 配合 intercept 使用 |
Cypress 命令是队列不是 Promise：不能写 async/await 再取返回值，链式调用里拿到的是可链对象，断言要用 should 表达。
跨域访问受同源限制：多域名流程用 cy.origin 分段驱动，不要试图在一个上下文里直接跳转。
原生弹窗与文件上传要用框架提供的专用写法处理（如 cy.on 监听窗口事件），普通选择器点不到系统弹窗。