test ui-03-cypress 入门介绍

cypress 是什么？

简而言之，Cypress 是一款专为现代Web构建的下一代前端测试工具。我们解决了开发人员和质量保证工程师在测试现代应用程序时面临的关键问题。

我们使以下操作成为可能：

设置测试
编写测试
运行测试
调试测试

Cypress经常与Selenium进行比较；然而，Cypress在根本上和体系结构上都是不同的。Cypress不受Selenium相同的限制。

这使您能够编写更快、更简便且更可靠的测试。

谁在使用Cypress？

我们的用户通常是使用现代JavaScript框架构建Web应用程序的开发人员或质量保证工程师。

Cypress使您能够编写各种类型的测试：

端到端测试
组件测试
集成测试
单元测试

Cypress可以测试在浏览器中运行的任何内容。

Cypress生态系统

Cypress由一个免费的、开源的、本地安装的应用程序和Cypress Cloud组成，用于记录您的测试。

首先：Cypress帮助您在本地构建应用程序时每天设置和开始编写测试。最佳的测试驱动开发！

然后：在构建一套测试并将Cypress与您的CI提供程序集成之后，Cypress Cloud可以记录您的测试运行。您将不再想知道：为什么会失败？

我们的使命

我们的使命是建立一个繁荣的、开源的生态系统，提高生产力，使测试成为一种愉快的体验，并带来开发者的幸福感。我们将自己视为倡导一个实际有效的测试过程的责任人。

我们相信我们的文档应该是平易近人的。这意味着使我们的读者完全理解不仅是什么，还包括为什么。

我们希望帮助开发人员更快、更好地构建新一代现代应用程序，而不会因管理测试而产生压力和焦虑。我们的目标是通过主动识别改进区域以生成可操作见解，借助测试结果提升软件开发的艺术。

我们知道，为了取得成功，我们必须使一个依赖于开源的生态系统繁荣。每一行测试代码都是对您代码库的一种投资，它永远不会与我们作为一个付费服务或公司相耦合。测试将能够独立运行和工作，始终如此。

我们相信测试需要很多 ❤️，我们在这里构建一个每个人都能学到并受益的工具、服务和社区。

我们正在解决每个在Web上工作的开发人员共享的最困难的痛点。

我们相信这个使命，并希望您加入我们，使Cypress成为一个持久的生态系统，使每个人都感到满意。

功能特性

Cypress是一个功能齐全、即插即用的测试框架。以下是它能够完成，而其他测试框架无法做到的一些事情：

时光旅行（Time Travel）： Cypress在运行测试时会生成快照。在命令日志中悬停在命令上，以查看每个步骤发生的确切情况。

可调试性（Debuggability）： 不再猜测测试失败的原因。直接从熟悉的工具（如开发者工具）中进行调试。我们可读的错误和堆栈跟踪使调试速度极快。

自动等待（Automatic Waiting）： 永远不要在测试中添加等待或睡眠。Cypress会在继续之前自动等待命令和断言。不再有异步地狱。

间谍、存根和时钟（Spies, Stubs, and Clocks）： 验证和控制函数、服务器响应或定时器的行为。单元测试中喜爱的相同功能现在近在咫尺。

网络流量控制（Network Traffic Control）： 轻松控制、存根和测试边缘情况，而无需涉及服务器。您可以按照自己的喜好存根网络流量。

一致的结果（Consistent Results）： 我们的架构不使用Selenium或WebDriver。迎接快速、一致且可靠的无故障测试。

截图、视频和测试重放（Screenshots, Videos, and Test Replay）： 在失败时自动查看屏幕截图，或者如果启用，查看从CLI运行时整个测试套件的视频。将录制上传到Cypress Cloud，使用测试重放进行零配置调试，以按照运行时的方式重放测试。

跨浏览器测试（Cross Browser Testing）： 在本地和持续集成流水线中在Firefox和Chrome系列浏览器（包括Edge和Electron）中运行测试。

智能编排（Smart Orchestration）： 一旦设置为录制到Cypress Cloud，轻松并行化测试套件，使用Spec Prioritization首先重新运行失败的规范，并在失败时使用Auto Cancellation取消测试运行，以获得紧密的反馈循环。

不稳定测试检测（Flake Detection）： 使用Cypress Cloud的Flaky测试管理发现和诊断不稳定的测试。

测试类型

Cypress可以用于编写多种不同类型的测试。

这可以进一步确保您要测试的应用程序按照预期的方式运行。

端到端测试（End-to-end）：

Cypress最初设计用于在运行在浏览器中的任何内容上运行端到端（E2E）测试。

典型的端到端测试访问浏览器中的应用程序，并通过用户界面执行操作，就像真实用户一样。

javascript 复制代码

it('添加待办事项', () => {
  cy.visit('https://example.cypress.io/')
  cy.get('[data-testid="new-todo"]')
    .type('编写代码{enter}')
    .type('编写测试{enter}')
  // 确认应用程序显示两个条目
  cy.get('[data-testid="todos"]').should('have.length', 2)
})

组件测试（Component）：

您还可以使用Cypress挂载来自支持的Web框架的组件并执行组件测试。

javascript 复制代码

import TodoList from './components/TodoList'

it('包含正确数量的待办事项', () => {
  const todos = [
    { text: '买牛奶', id: 1 },
    { text: '学习组件测试', id: 2 },
  ]

  cy.mount(<TodoList todos={todos} />)
  // 组件开始运行，就像一个小型Web应用程序
  cy.get('[data-testid="todos"]').should('have.length', todos.length)
})

API测试：

Cypress可以执行任意的HTTP调用，因此您可以将其用于API测试。

javascript 复制代码

it('添加待办事项', () => {
  cy.request({
    url: '/todos',
    method: 'POST',
    body: {
      title: '编写REST API',
    },
  })
    .its('body')
    .should('deep.contain', {
      title: '编写REST API',
      completed: false,
    })
})

其他类型：

最后，通过大量官方和第三方插件，您可以编写Cypress可访问性、视觉、电子邮件等其他类型的测试。