无需登录 数据私有 本地保存

Cypress 测试场景构建器 - 点选生成测试代码

开发工具 测试 Cypress 场景 构建器 测试
9
0
0
0

Cypress 测试场景构建器

通过点选操作，快速生成 Cypress E2E 测试代码，无需手动编写繁琐的选择器链

选择器策略：
登录模板 表单模板 导航模板 API模板
测试步骤列表 0

还没有添加测试步骤

从上方选择一个操作类型，填写参数后点击"添加步骤"

生成的 Cypress 代码 
// 添加步骤后，代码将在此实时生成...
最佳实践提示
  • 推荐使用 [data-cy="..."] 作为选择器，避免依赖易变的 class 或 id
  • Cypress 命令自动重试，无需手动添加等待
  • 使用 cy.intercept() 来 mock API 响应，提高测试稳定性
  • 每个测试用例应保持独立，不依赖其他用例的状态
常见问题与知识点 (FAQ)
什么是 Cypress？为什么选择它做 E2E 测试？
Cypress 是一个现代化的前端端到端（E2E）测试框架，专为现代 Web 应用设计。它运行在浏览器中，能够实时重载、自动等待、提供时间旅行调试功能。相比 Selenium，Cypress 安装更简单（npm install cypress），API 更直观，执行速度更快，且内置了截图和视频录制功能。它特别适合 React、Vue、Angular 等单页应用的测试。
为什么推荐使用 data-cy 属性作为选择器？
data-cy 是 Cypress 官方推荐的选择器策略。它与样式和 JS 逻辑完全解耦，不会因为 UI 重构、class 重命名或 id 变更而导致测试失败。使用 [data-cy="submit-btn"] 这样的属性选择器，既语义化又稳定。在开发时，开发者可以明确知道哪些元素被测试使用，形成了测试与开发之间的清晰契约。
Cypress 的自动等待机制是如何工作的？
Cypress 的命令（如 cy.get、cy.click）内置了智能重试机制。当查找元素时，Cypress 会在默认的 4 秒超时内不断重试，直到元素出现在 DOM 中且满足条件（可见、可交互等）。这意味着你通常不需要手动添加 cy.wait() 来等待页面加载。但 cy.wait() 在等待特定 API 响应或固定延迟时仍然有用。
如何在 Cypress 中处理异步 API 请求？
使用 cy.intercept() 可以拦截网络请求，你可以：1) 等待请求完成 cy.wait('@alias')；2) Mock 响应数据 cy.intercept('GET', '/api/users', { fixture: 'users.json' })；3) 断言请求参数。这种方式让测试更稳定，不受后端服务状态影响。fixture 文件存放在 cypress/fixtures/ 目录下。
Cypress 测试文件应该如何组织？
推荐的目录结构：cypress/e2e/ 存放测试用例文件（按功能模块分文件夹）；cypress/fixtures/ 存放测试数据（JSON、图片等）；cypress/support/ 存放自定义命令和全局配置。测试文件命名建议使用描述性名称，如 login.cy.js、checkout-flow.cy.js。
常见的 Cypress 断言有哪些？如何使用？
Cypress 使用 Chai 断言库，常用断言包括：should('be.visible') 可见性断言；should('contain', 'text') 文本包含断言；should('exist') 存在性断言；should('have.length', 3) 数量断言；should('have.class', 'active') CSS 类断言；should('have.value', 'input-value') 输入值断言。断言可以链式调用，如 cy.get('.item').should('be.visible').and('have.length', 5)。
这个构建器生成的代码可以直接使用吗？
是的！构建器生成的代码是标准的 Cypress 语法，可以直接复制到你的 .cy.js 测试文件中使用。生成的代码包含完整的 describe/it 块结构。建议在使用前替换选择器为你项目中实际的元素选择器，并调整 URL 为你的应用地址。推荐配合 data-cy 属性使用，以获得最稳定的测试体验。
🔧 相关工具