为什么选择 Cypress?

info

您将学到

• Cypress 提供的测试解决方案
• Cypress App、Cypress Cloud、UI Coverage 和 Cypress Accessibility 的功能特性
• 我们的使命和信念
• Cypress 与其他测试工具的关键区别

简而言之

Cypress 是为现代 Web 打造的下一代前端测试工具。 我们解决了团队在测试现代应用和维护测试套件时面临的关键痛点。

我们的用户通常是开发人员、QA 工程师和团队，他们希望构建 Web 应用程序并提高现有应用程序的质量。

Cypress 提供以下解决方案：

• 端到端测试
• 组件测试
• 可访问性测试
• UI 覆盖率
• 以及更多...

Cypress 可以测试任何在浏览器中运行的内容，并提供如何改进测试套件健康状况和应用程序质量的洞察。

产品

• Cypress App，一个免费的、 开源、 本地安装的应用程序，用于编写和运行测试。
• Cypress Cloud，一项付费服务，用于记录测试、展示测试结果并提供测试分析。
• UI Coverage，一项高级解决方案，提供应用程序每个页面和组件的测试覆盖率可视化概览，清晰展示未覆盖区域，让所有人都能理解。
• Cypress Accessibility，一项高级解决方案，提供可访问性检查，帮助检测应用程序中可能对残障人士造成障碍的问题。

Cypress 是一个强大的解决方案，可以提高应用程序的质量。

• 首先： Cypress 帮助您在本地构建应用程序时设置并开始每天编写测试。最佳测试驱动开发实践！
• 接下来： 在构建了一套测试并与您的 CI 提供商集成后， Cypress Cloud 可以记录您的测试运行， 通过 Test Replay 展示测试期间发生的具体情况。 您再也不用疑惑：为什么这个测试失败了？
• 最后： 添加 Cypress Accessibility 以获取关于可访问性问题和回归的持续反馈， 以及 UI Coverage 以确保您测试了应用程序的每个部分。

功能

以下是每个产品的一些关键功能。

Cypress App

• 时间旅行： Cypress 在测试运行时拍摄快照。悬停在 Command Log 中的命令上， 查看每个步骤发生的具体情况。
• 可调试性： 不再猜测测试失败的原因。 直接从熟悉的工具如开发者工具 调试。我们可读的错误和堆栈跟踪使调试变得极其快速。
• 自动等待： 无需在测试中添加等待或休眠。Cypress 自动等待 命令和断言完成后再继续。告别异步地狱。
• 间谍、存根和时钟： 验证和 控制函数行为、 服务器响应或计时器。您喜爱的单元测试功能触手可及。
• 网络流量控制： 轻松 控制、存根和测试边缘情况， 无需涉及服务器。您可以随意存根网络流量。
• 一致的结果： 我们的架构不使用 Selenium 或 WebDriver。 迎接快速、一致和可靠的测试，无 flakes。
• 跨浏览器测试： 在 Firefox 和 Chrome 系列浏览器（包括 Edge 和 Electron）中本地运行测试， 并 在持续集成管道中运行。

Cypress Cloud

• 测试回放： 记录到 Cypress Cloud 并使用 Test Replay 回放测试运行时的具体情况，实现零配置调试。
• 智能编排： 一旦设置好记录到 Cypress Cloud，轻松 并行化 您的测试套件， 使用 Spec Prioritization 优先重新运行失败的 spec， 并使用 Auto Cancellation 在失败时取消测试运行， 实现紧密的反馈循环。
• Flake 检测： 使用 Cypress Cloud 的 Flaky 测试管理 发现和诊断不可靠的测试。
• 分支审查： 使用 Branch Review 在单一视图中快速识别拉取请求可能对测试套件产生的影响。比较源分支和基础分支之间哪些测试失败、flaky、待处理、新增或修改，防止合并低质量代码。
• 集成： 与 GitHub、GitLab 或 Bitbucket 集成，直接在每次推送或拉取请求上查看测试结果。Cypress Cloud 还与 Slack、Jira 和 Microsoft Teams 集成，让团队保持同步。
• 测试分析： 使用 Test Analytics 跟踪测试结果随时间的变化，识别测试套件中的趋势、回归和改进。使用我们的 Data Extract API 提取对团队重要的数据。

UI Coverage

• 可视化覆盖率： UI Coverage 提供应用程序每个页面和组件的测试覆盖率可视化概览，清晰展示未覆盖区域，让所有人都能理解。
• 结果 API： 使用 UI Coverage 的 Results API 以编程方式访问测试覆盖率数据，并将其集成到现有工作流中。
• 分支审查： 比较运行结果，查看应用程序中新增的元素或测试覆盖率意外减少的情况。

Cypress Accessibility

• 可访问性检查： 通过即时添加数千个 可访问性检查，最大化现有 Cypress 测试的价值，无需设置、代码更改或性能损失。
• 运行级别报告： 使用 Run-level reports 获取测试运行中发现的可访问性问题的详细报告。
• 结果 API： 使用 Cypress Accessibility 的 Results API 在 CI 环境中以编程方式访问可访问性结果。
• 分支审查： 将任何报告与基线进行比较，仅审查新增的违规问题，不受现有问题的干扰。

解决方案

Cypress 可用于确保多种不同类型的测试。这可以提供更多信心，确保被测应用程序按预期工作并对所有用户可访问。

端到端测试

Cypress 最初设计用于在浏览器中运行 端到端 (E2E) 测试。典型的 E2E 测试在浏览器中访问应用程序，并通过 UI 执行操作，就像真实用户一样。

it('adds todos', () => {
  cy.visit('https://example.cypress.io/')
  cy.get('[data-cy="new-todo"]').type('write tests{enter}')
  // 确认应用程序显示一个项目
  cy.get('[data-cy="todos"]').should('have.length', 1)
})

组件测试

Cypress 的 组件测试 提供了一个组件工作台，让您可以快速构建和测试来自多个前端 UI 库的组件——无论简单还是复杂。

了解更多关于如何测试 React、 Angular、 Vue 和 Svelte 组件的信息。

React

import Button from './Button'

it('uses custom text for the button label', () => {
  cy.mount(<Button>Click me!</Button>)
  // 断言按钮组件具有正确的文本
  cy.get('button').should('contains.text', 'Click me!')
})

Angular

import ButtonComponent from './button.component'

it('uses custom text for the button label', () => {
  cy.mount('<app-button>Click me!</app-button>', {
    declarations: [ButtonComponent],
  })
  // 断言按钮组件具有正确的文本
  cy.get('button').should('contains.text', 'Click me!')
})

Vue

import Button from './Button.vue'

it('uses custom text for the button label', () => {
  cy.mount(Button, {
    slots: {
      default: 'Click me!',
    },
  })
  // 断言按钮组件具有正确的文本
  cy.get('button').should('contains.text', 'Click me!')
})

Svelte

import Button from './Button.svelte'

it('uses custom text for the button label', () => {
  cy.mount(Button, { props: { msg: 'Click me!' } })
  // 断言按钮组件具有正确的文本
  cy.get('button').should('contains.text', 'Click me!')
})

可访问性测试

您可以编写 Cypress 测试来检查应用程序的可访问性，并使用插件运行广泛的可访问性扫描。 当与 Cypress Cloud 中的 Cypress Accessibility 结合使用时，可以在测试中展示不符合特定可访问性标准的洞察——无需配置。有关更多详情，请参阅我们的 可访问性测试指南。

it('adds todos', () => {
  cy.visit('https://example.cypress.io/')
  cy.get('img#logo')
    // 断言图像具有正确的 alt 文本
    .should('have.attr', 'alt', 'Cypress Logo')
})

UI 覆盖率

您可以通过使用 UI Coverage 来增加发布信心，填补关键应用流程中的测试空白。利用数据驱动的洞察覆盖未测试区域，减少事故并提高应用质量。

其他

Cypress 可以执行任意 HTTP 调用，因此您可以用它进行 API 测试。

it('adds a todo', () => {
  cy.request('POST', '/todos', { title: 'Write API Tests' })
    .its('body')
    .should('contain', { title: 'Write API Tests' })
})

通过大量 官方和第三方插件， 您可以编写许多其他类型的测试！

我们的使命

我们的使命是构建一个蓬勃发展的测试解决方案，提高生产力，使测试成为一种愉快的体验，并带来开发者的快乐。我们对自己负责，倡导一个 真正有效 的测试流程。

我们相信我们的文档应该易于理解。这意味着让读者不仅理解 是什么，还要理解 为什么。

我们希望帮助开发者更快、更好地构建新一代现代应用程序，而无需管理与测试相关的压力和焦虑。我们旨在通过利用测试结果生成可操作的洞察，主动识别改进领域，提升软件开发的艺术。

我们知道，为了成功，我们必须支持、培育和促进一个在开源基础上蓬勃发展的生态系统。每一行测试代码都是对 您的代码库 的投资，它永远不会与我们作为付费服务或公司耦合。测试将始终能够独立运行和工作。

我们相信测试需要很多 ❤️，我们在这里构建一个工具、服务和社区，每个人都可以学习和受益。我们正在解决每个从事 Web 工作的开发者共享的最难痛点。我们相信这一使命，并希望您能加入我们，使 Cypress 成为一个持久的生态系统，让每个人都感到快乐。

关键区别

架构

大多数测试工具（如 Selenium）通过在浏览器外部运行并通过网络执行远程命令来操作。Cypress 正好相反。 Cypress 在与您的应用程序相同的运行循环中执行。

Cypress 背后是一个 Node 服务器进程。Cypress 和 Node 进程不断通信、同步并代表彼此执行任务。同时访问前端和后端部分使我们能够实时响应应用程序的事件，同时在需要更高权限的任务中在浏览器外部工作。

Cypress 最终从上到下控制整个自动化过程，这使其处于独特的位置，能够理解浏览器内外发生的一切。这意味着 Cypress 能够提供比任何其他测试工具更一致的结果。

因为 Cypress 是 本地安装在您的机器上， 它还可以利用操作系统执行自动化任务。这使得执行诸如 截图、录制视频、 一般 文件系统操作 和 网络操作 成为可能。

原生访问

因为 Cypress 在您的应用程序中运行，这意味着它对每个对象都有原生访问权限。无论是 window、document、DOM 元素、您的应用程序实例、函数、计时器、服务工作者还是其他任何东西——您都可以在 Cypress 测试中访问它。

例如，您可以：

• 存根 浏览器或应用程序的函数， 并强制它们在测试用例中按需行为。
• 暴露数据存储，以便您可以直接从测试代码中以编程方式更改应用程序的状态。
• 通过强制服务器发送空响应来测试边缘情况，如“空视图”。
• 通过修改响应状态码为 500 来测试应用程序对服务器错误的响应。
• 直接修改 DOM 元素——例如强制隐藏元素显示。
• 以编程方式使用第三方插件。无需处理复杂的 UI 小部件，如多选、自动完成、下拉菜单、树视图或日历，您可以直接从测试代码中调用方法来控制它们。
• 在测试时防止 Google Analytics 在您的应用程序代码执行之前加载。
• 在应用程序转换到新页面或开始卸载时获取同步通知。
• 通过向前或向后移动时间来控制时间， 以便计时器或轮询自动触发，而无需在测试中等待所需的时间。
• 添加自己的事件监听器以响应应用程序。您可以更新应用程序代码，在 Cypress 测试下表现不同。您可以从 Cypress 内部控制 WebSocket 消息，有条件地加载第三方脚本，或直接在应用程序上调用函数。
• 对于 组件测试，Cypress 基于浏览器，允许您不仅测试组件的功能，还测试样式和外观。您可以直观地看到组件的运行情况并与之交互。

快捷方式

Cypress 允许使用 cy.session() 缓存浏览器上下文。这意味着作为用户，您只需在整个测试套件中执行一次身份验证，并在每个测试之间恢复保存的会话。这意味着您无需为每个运行的测试访问登录页面、输入用户名和密码并等待页面加载和/或重定向。您可以使用 cy.session() 和如果需要， cy.origin() 完成此操作。

抗 Flake

Cypress 同步地知道并理解应用程序中发生的一切。它在页面加载和页面卸载时立即收到通知。Cypress 甚至知道元素动画的速度，并会 等待动画停止。 此外，它会 自动等待元素变为可见、 变为启用状态， 以及 不再被覆盖。 当页面开始转换时，Cypress 将暂停命令执行，直到下一页完全加载。您还可以告诉 Cypress 等待 特定的网络请求完成。

可调试性

最重要的是，Cypress 是为可用性而构建的。

• 有数百个自定义错误消息，描述 Cypress 测试失败的确切原因。
• 有一个丰富的 UI，直观地显示命令执行、断言、网络请求、间谍、存根、页面加载或 URL 更改。
• Cypress App 会为您的应用程序拍摄快照，并让您可以时间旅行回到命令运行时的状态。
• 您可以在测试运行时使用开发者工具查看每个控制台消息或网络请求。您可以检查元素并在规范或应用程序代码中使用调试器语句——您可以使用所有已经熟悉的工具。这使您可以同时进行测试和开发。

权衡

虽然 Cypress 有许多新的强大功能，但在实现这些功能时我们也做出了一些重要的权衡。

如果您有兴趣了解更多，我们已就此主题编写了 完整的指南。

开始使用

安装 Cypress 以便您可以在几分钟内看到第一个通过的测试， 无论是 端到端测试 还是 组件测试。

现实世界中的 Cypress

Cypress 使开始测试变得快速简单，当您开始测试应用程序时， 您经常会想知道是否使用了最佳实践或可扩展的策略。

为了指导方向，Cypress 团队创建了 真实世界应用(RWA)， 一个全栈示例应用程序，展示了在 实际和现实场景中使用 Cypress 进行测试。

RWA 通过端到端测试实现了完整的 代码覆盖率， 跨多个浏览器 和 设备尺寸，还包括 视觉回归测试、API 测试、单元测试， 并在 高效的 CI 管道 中运行所有测试。使用 RWA 学习、实验、修补和练习 使用 Cypress 进行 Web 应用程序测试。

该应用程序捆绑了您所需的一切， 只需克隆存储库 并开始测试。