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

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

开发工具 测试 Cypress 场景 构建器 测试
14
0
0
0
Cypress
Cypress 是一个基于 JavaScript 的现代前端端到端测试框架，专为当今的 Web 应用程序而构建。它运行在浏览器内部，与应用程序在同一个进程中执行，这使得它能够直接访问 DOM、window 对象和网络请求等浏览器原生 API。Cypress 提供了强大的时间旅行调试功能、自动等待机制、实时重载以及直观的错误信息，极大地简化了 Web 应用的测试流程。
E2E 测试（端到端测试）
E2E 是 End-to-End 的缩写，中文译为端到端测试。它是一种软件测试方法，旨在模拟真实用户从应用程序入口到完成特定业务流程的完整操作路径。E2E 测试在真实的浏览器环境中运行，验证各个组件和模块集成在一起后是否能够正确协同工作。与单元测试和集成测试相比，E2E 测试覆盖面最广，但执行速度相对较慢，维护成本也更高。
describe / it 代码块
describe 和 it 是 Cypress（及 Mocha 测试框架）中用于组织测试代码的两个核心函数。describe 函数用于定义测试套件（test suite），将相关的测试用例分组到一起，并为该分组提供一个描述性名称。it 函数用于定义单个测试用例（test case），描述该用例要验证的具体行为。典型结构是 describe 包含多个 it，每个 it 执行一组操作并进行断言验证。这种嵌套结构使得测试代码层次清晰、易于维护。
data-cy 选择器
data-cy 是 Cypress 官方推荐的测试专用 HTML 属性，用于为测试提供稳定可靠的元素定位标识。与 CSS 类名或 ID 不同，data-cy 属性的唯一目的是服务于测试，不会因为 UI 样式调整、组件重构或业务逻辑变更而被修改或移除。在 HTML 元素上添加 data-cy="submit-btn" 属性后，测试中可以使用 cy.get('[data-cy="submit-btn"]') 来精准定位该元素。这种约定优于配置的方式有效避免了测试与实现细节的耦合。
cy.get() 命令
cy.get() 是 Cypress 中最基础也最常用的查询命令，用于根据选择器从 DOM 中查找一个或多个元素。它接受一个 CSS 选择器字符串作为参数，返回一个包含匹配元素的 Cypress 对象。该命令具有重试机制，会持续尝试查找元素直到超时，这种自动重试特性使得测试在面对异步渲染时更加健壮。例如 cy.get('[data-cy="username"]') 会查找所有具有 data-cy="username" 属性的元素。
断言（Assertion）
断言是测试用例中用于验证预期结果的核心机制。在 Cypress 中，断言通过链式调用附加到命令链后面，用于检查被查询元素或命令返回值是否满足特定条件。例如 .should('be.visible') 断言元素可见，.should('contain', 'Success') 断言文本包含指定字符串。断言失败时测试用例会被标记为失败并输出详细的错误信息，帮助开发者快速定位问题。Cypress 内部使用 Chai 断言库，同时提供了自定义的链式 API。
自动等待（Auto-waiting）
自动等待是 Cypress 框架的一项核心特性，也是它区别于其他测试框架的重要优势。当 Cypress 执行一个命令时，它会自动等待该命令操作的元素达到可操作状态后才继续执行。例如执行 click 操作时，Cypress 会自动等待元素变为可见、不被遮挡、未被禁用且不在动画中，全部条件满足后才会触发点击。开发者无需手动编写显式的等待代码（如 sleep 或 waitFor），这大幅简化了测试编写并减少了因等待策略不当导致的测试不稳定问题。
intercept（网络请求拦截）
intercept 是 Cypress 提供的网络请求拦截命令，用于监听、修改或模拟应用程序发出的 HTTP 请求和响应。通过 intercept 命令，测试可以拦截特定 URL 的 API 请求并返回预设的模拟响应数据，从而在不依赖真实后端服务的情况下进行前端测试。也可以用它来验证前端是否发出了正确的 API 请求，检查请求参数和请求头是否符合预期。intercept 命令是实现前后端分离架构下可靠 E2E 测试的关键工具。
fixture（测试固件数据）
fixture 是 Cypress 中用于管理测试固定数据的机制。测试固件数据是指在测试执行过程中使用的预定义输入数据和预期输出数据。Cypress 的 cy.fixture() 命令可以从 cypress/fixtures 目录下加载 JSON、CSV 或图片等格式的测试数据文件。使用 fixture 数据可以将测试数据与测试逻辑分离，提高测试代码的可维护性，同时也便于对同一组测试步骤使用不同的数据集进行数据驱动测试。
command chain（命令链）
命令链是 Cypress API 设计的核心模式，通过将多个命令以链式调用的方式串联在一起执行。每个命令的返回值会作为下一个命令的上下文，形成一条完整的操作链。例如 cy.get('[data-cy="email"]').type('user@test.com').should('have.value', 'user@test.com') 就是一条包含查询、输入和断言的命令链。命令链使得测试代码读起来接近自然语言描述，可读性和可维护性都非常出色。
screenshot（截图）
screenshot 是 Cypress 中用于在测试执行过程中捕获页面截图的命令。截图功能在调试失败的测试用例时尤为有用，它可以在特定的操作节点保存页面的视觉快照，帮助开发者了解测试失败时页面的实际状态。Cypress 还支持在测试失败时自动截图的全局配置。截图默认保存在 cypress/screenshots 目录下，支持全页面截图和特定元素截图两种模式。
🔧 相关工具