实战指南
本指南展示如何使用 Cypress 测试常见场景。
https://github.com/cypress-io/cypress-example-recipes基础篇
| 方案 | 描述 |
|---|---|
| Node 模块 | 导入自定义 Node 模块 |
| 环境变量 | 向测试传递环境变量 |
| 错误处理 | 处理抛出错误和未处理的 Promise 拒绝 |
| 动态测试 | 从 JSON 数据动态创建测试 |
| 从 CSV 生成动态测试 | 从 CSV 文件动态创建测试 |
| 从 API 生成动态测试 | 通过调用外部 API 动态创建测试 |
| 测试夹具 | 加载单个或多个测试夹具 |
| 添加自定义命令 | 使用 JavaScript 编写自定义命令并确保 IntelliSense 类型提示正常工作 |
| 添加自定义命令(TypeScript) | 使用 TypeScript 编写自定义命令 |
| 添加 Chai 断言 | 添加新的或自定义的 chai 断言 |
| Cypress 模块 API | 通过模块 API 运行 Cypress |
| 封装 Cypress 模块 API | 编写封装 "cypress run" 命令行解析的包装器 |
| 自定义浏览器 | 控制项目可用的浏览器列表，或添加自定义浏览器 |
| 使用 Chrome 远程调试接口 | 使用 Chrome 调试协议触发悬停状态和打印媒体样式 |
| 开箱即用的 TypeScript | 无需设置预处理器即可用 TypeScript 编写测试 |
| 单测试超时 | 如果测试运行超过指定时间限制则失败 |
| Cypress 事件 | 使用 Cypress.on 和 cy.on 监听 before:window:load 等 Cypress 事件 |
| 视频分辨率 | 增加浏览器窗口尺寸以录制高质量视频和捕获详细截图 |
DOM 测试
| 方案 | 描述 |
|---|---|
| 标签页处理与链接 | 在新标签页打开的链接 |
| 悬停与隐藏元素 | 测试需要悬停的隐藏元素 |
| 表单交互 | 测试 range 等表单元素 |
| 拖放操作 | 使用 .trigger() 测试拖放功能 |
| Shadow DOM | 测试 Shadow DOM 中的元素 |
| 等待静态资源 | 展示如何等待 CSS、图片等静态资源加载完成 |
| CSV 加载与表格测试 | 加载 CSV 文件并与表格单元格数据对比 |
| 评估性能指标 | 利用 Cypress 监控网站性能 |
| 根样式 | 触发修改 CSS 变量的颜色输入变化 |
| 选择器组件 | 测试 <select> 元素和 Select2 组件 |
| Lit 元素 | 测试带 Shadow DOM 的 Lit 元素 |
| 文件下载 | 下载并验证 CSV、Excel、文本、Zip 和图片文件 |
| 页面刷新 | 处理随机性时避免使用 while 循环 |
| 分页 | 点击"下一页"直到最后一页 |
| 剪贴板 | 在测试中复制粘贴剪贴板文本 |
登录测试
| 方案 | 描述 |
|---|---|
| 基础认证 | 使用基础认证登录 |
| 单点登录 | 跨多服务器或提供商登录 |
| HTML 网页表单 | 通过基础 HTML 表单登录 |
| XHR 网页表单 | 使 用 XHR 登录 |
| CSRF 令牌 | 需要 CSRF 令牌的登录 |
| Json Web 令牌 | 使用 JWT 登录 |
| 使用应用代码 | 通过调用应用代码登录 |
另请参阅 认证插件 并观看 测试组织、登录控制、状态管理
预处理器
| 方案 | 描述 |
|---|---|
| 测试筛选 | 使用类 Mocha 的 grep 语法按名称过滤测试 |
| Browserify 的 TypeScript 支持 | 通过 browserify 添加 TypeScript 支持 |
| Webpack 的 TypeScript 支持 | 通过 webpack 添加 TypeScript 支持 |
| Browserify 的 Flow 支持 | 通过 Browserify 添加 flow 支持 |
博客案例
来自 Cypress 博客 的演示方案。
| 方案 | 描述 |
|---|---|
| 应用操作 | 应用操作是 Page Objects 的替代方案 |
| 端到端 API 测试 | 通过 GUI 运行 API 测试 |
| 端到端快照 | 端到端快照测试 |
| 元素覆盖率 | 追踪测试覆盖的元素 |
| Codepen.io 测试 | 测试 HyperApp Codepen 演示 |
| Redux Store 测试 | 测试使用 Redux 数据存储的应用 |
| Vue + Vuex + REST 测试 | 测试使用 Vuex 数据存储的应用 |
| 无障碍测试 | 使用 cypress-axe 进行无障碍测试 |
| 自动化 Angular 测试 | 自动化 Angular 测试 |
| React DevTools | 自动加载 React DevTools Chrome 扩展 |
| 断言计数 | 如何预期测试中的断言数量 |
| 浏览器通知 | 测试使用 Notification 的应用 |
| iframe 测试 | 访问第三方 iframe 元素，监视和拦截 iframe 网络请求 |
| 类装饰器 | 使用 JavaScript 类装饰器暴 露应用创建的对象以便测试访问 |
| 表单提交 | 消除表单提交后页面重载测试的不稳定性 |
| 使用 Day.js 替代 Moment.js | 使用 day.js 库替代已弃用的 Cypress.moment |
桩与监视
| 方案 | 描述 |
|---|---|
| 函数桩 | 使用 cy.stub() 测试函数调用 |
拦截 window.fetch | 使用 cy.stub() 控制 fetch 请求 |
使用 cy.intercept 拦截 | 使用 cy.intercept API 控制网络 |
拦截 window.open 和 console.log | 使用 cy.stub() 和 cy.spy() 测试应用行为 |
拦截 window.print | 使用 cy.stub() 测试应用调用的 window.print |
| 拦截 Google Analytics | 使用 cy.stub() 和 cy.intercept() 测试 Google Analytics 调用 |
拦截 console 方法 | 使用 cy.stub() 测试和控制 console 方法调用 |
| 拦截资源加载 | 使用 MutationObserver 拦截 img 等资源加载 |
拦截 navigator.cookieEnabled 属性 | 使用 cy.stub() 模拟 navigator.cookieEnabled 属性 |
单元测试
| 方案 | 描述 |
|---|---|
| 应用代码 | 导入并测试自己的应用代码 |
服务端通信
| 方案 | 描述 |
|---|---|
| 应用初始化 | 用测试数据初始化应用 |
| Node 中初始化数据库 | 用测试数据初始化数据库 |
| XHR 断言 | 监视和断言应用的网络调用 |
| 访问第二个域名 | 在不同测试中访问两个不同域名并传递值 |
| 在测试文件间传值 | 使用 cy.task 在测试文件间传值 |
| 流式测试结果 | 将每个测试结果从浏览器通过插件流式传输到外部进程 |
| 离线测试 | 测试网络离线时的应用 |
| 服务端计时 | 从 Cypress 测试报告服务端计时结果 |
| 等待 API | 使用 cy.request 调用后端直到响应 |
| 发起 HTTP 请求 | 如何使用 cy.request、window.fetch 和 cy.task 命令发起带或不带 cookie 的 HTTP 请求 |
其他 Cypress 方案
| 方案 | 描述 |
|---|---|
| 视觉测试 | Cypress 官方视觉测试指南 |
| 代码覆盖率 | Cypress 官方代码覆盖率指南 |
| Docker 运行 | 单条 Docker 命令运行 Cypress |