摘要：Cypress 是一个先进的端到端测试框架，专门为现代 web 应用程序设计。与其他测试框架不同，Cypress 专注于为开发人员和测试人员提供一个更好、更快、更可靠的测试体验。
Cypress 是一个先进的端到端测试框架，专门为现代 web 应用程序设计。与其他测试框架不同，Cypress 专注于为开发人员和测试人员提供一个更好、更快、更可靠的测试体验。
Cypress 具有以下特点：实时重载，可监控测试文件的更改并实时重新运行测试，使开发和调试非常流畅；全功能框架，提供完整的端到端测试框架、断言库、模拟服务器等更多功能；直接访问，在同一个运行循环中运行测试代码和应用程序代码，可直接访问应用程序的窗口、DOM、网络请求等；自动等待，无需编写显式的等待或 sleep 语句，会自动等待元素可用、DOM 加载、网络请求完成等；跨浏览器测试，虽最初为 Chrome 浏览器设计，但现在支持多种浏览器，包括 Firefox 和 Microsoft Edge；有丰富的界面，提供可视化界面，便于查看和调试测试。
与其他前端测试工具如 Selenium 相比，Cypress 提供了更好的性能和更可靠的测试结果。它避免了许多与 Selenium 相关的常见问题，如“flaky tests”或不稳定的测试。Cypress 主要用于端到端测试，但也可用于集成测试和单元测试，特别适合需要在真实浏览器环境中运行的测试，或者那些希望利用其自动等待功能和实时重载功能的开发人员和测试人员。
Cypress 的安装方式多样，可以通过 npm 安装，也可以直接下载 Cypress 压缩包安装。安装完成后，可以使用 cypress open 命令启动 Cypress，它会自动创建一些例子代码，方便用户直接点击运行或在 IDE 中打开进行编辑和测试。Cypress 的目录结构包括 integration 文件夹用于存放测试文件，plugins 文件夹用于存放插件文件，可修改或扩展 Cypress 的内部行为，support 文件夹用于存放支持文件，防止可重用配置项。每个测试文件运行之前，Cypress 都会自动加载插件文件和支持文件。在 Cypress 中，还可以自定义文件结构和各项配置，通过 cypress.json 文件实现各项配置的自定义。此外，Cypress 还具有强大的快照功能，可以显示在某一条测试语句前后的页面比对，提供多种元素交互 api，自带 GUI 工具，可以看到整个测试过程，也可录屏。
Cypress 的实时重载功能可以让开发者在修改代码后立即看到测试的变化，极大地提高了开发效率。当测试文件内容有改变并保存时，浏览器会自动实时重载。Cypress 会监视规格文件的任何更改，并自动显示任何更改。这一功能使得开发者可以快速迭代测试用例，及时发现问题并进行调整。例如，在编写测试用例的过程中，如果发现某个断言不正确，可以立即修改代码，保存后即可看到测试结果的变化。这种实时反馈机制让开发者能够更加高效地进行测试开发。
在实现实时重载的过程中，Cypress 采用了一些先进的技术。它可能会使用文件监听机制，当检测到测试文件发生变化时，立即触发浏览器的重新加载。同时，Cypress 还会在测试运行时拍摄快照，只需将鼠标悬停在“命令日志”中的命令上，即可准确查看每一步都发生了什么。这不仅有助于开发者了解测试的执行过程，还能在出现问题时快速定位问题所在。
总之，Cypress 的实时重载功能为开发者提供了一种高效、便捷的测试开发方式，使得测试过程更加流畅和高效。
Cypress 的安装方式主要有以下几种：
使用 npm 安装：首先确保已经安装了 node.js，因为 npm 是 node.js 的包管理工具。生成 package.json 文件，可以进入要安装 Cypress 的目录，然后使用 npm init 初始化目录，这样就可以生成 package.json 文件了。安装 Cypress，进入对应目录输入：npm install cypress --save-dev。如果指定版本，例如安装 4.5.0，则进入对应目录输入：npm install cypress@4.5.0 --save-dev。使用 yarn 安装：安装 yarn，下载安装即可，验证 yarn 是否安装成功。进入要安装 Cypress 的文件夹，输入命令：yarn add cypress --dev 即可安装 Cypress。下载安装包安装：官网下载安装包，解压后可以双击打开。Cypress 中创建 project 即可。安装完成后，可以通过多种方式启动 Cypress，例如进入 node_module\.bin 目录输入：cypress open；进入项目根目录输入：yarn run cypress open；管理员模式打开 cmd 窗口，输入：npx cypress open；修改配置，自定义打开方式，在项目根目录找到 package.json 文件，修改 scripts 配置，然后使用 npm run cypress:open 启动。
Cypress 的目录结构主要包括以下几个部分：
fixtures 文件夹：存放 json 格式的数据。一般可用作接口数据的参数准备，或者分模块的用例输入，方便后期维护。读取时使用 cy.fixture('xxx/xxx/xxx.json')，返回整个 json 文件的对象。integration 文件夹：存放测试脚本，命名方式 xxx.spec.js（后缀一定需要为.spec.js）。打开 Cypress 的交互界面时，会自动读取该文件夹下的所有测试脚本。示例项目中，该文件夹下面举例了各类 API 的使用方法。cypress.json 文件：可以进行一些配置的设置，例如设置是否失败时生成测试截图等自定义配置信息。使用 Visual Studio Code 打开示例项目时，可以观察到 Cypress 项目的基本结构为四个文件夹加一个配置文件。各个文件夹下面可自定义添加多层级文件夹，方便管理。
运行 Cypress 的方法有多种，在 Windows 下，打开 node.js，在安装目录下输入命令 node_modules\.bin\cypress open。打开 Cypress 后，可以看到 example 的文件夹，这是 Cypress 自动创建的例子代码，可以直接点击其中一个 js 文件自动运行，右上角可以一起全部运行。目前 Cypress 支持的浏览器有 Chrome 55 和 Elctrone 61。
高效测试和实时重载：Cypress 通过内置的自动等待和实时重新加载简化了测试，使开发人员能够立即观察测试运行中的代码变化。当在 Cypress 中使用实时重新加载时，只要在应用程序中进行更改，测试就会立即重新加载。可调试性：Cypress 提供的调试系统，能够让开发人员逐步执行测试，有效识别和解决问题。停止猜测你的测试失败的原因，直接从熟悉的工具如 Chrome DevTools 进行调试。我们可读的错误和堆栈跟踪使调试更加快速便捷。存根和模拟网络请求：Cypress 支持存根和模拟网络请求，确保测试快速、可靠、隔离且结果一致。可以验证并控制函数行为，Mock 服务器响应或更改系统时间。直接浏览器执行：直接在浏览器中运行测试可完全访问应用程序，避免通信开销，从而实现快速、可靠的测试。Cypress 嵌入在应用程序中，测试代码可以访问与应用程序代码相同的所有对象（不仅仅是 DOM 元素）。Cypress 在每个测试步骤都拍摄快照。此活动日志使开发人员能够检查测试脚本中任何特定步骤的状态和活动。Cypress Dashboard 丰富而优雅的 UI 突出显示了测试执行的每一分钟细节，包括断言、网络请求、页面加载、存根、间谍等。在 Cypress 中可以通过 cypress.json 文件来实现各项配置的自定义。例如设置是否失败时生成测试截图等自定义配置信息在 cypress.json 中进行设置即可。还可以设置 env 和 baseUrl 等在项目中最常见的配置。
Cypress 默认有推荐配置，我们可根据业务需求进行一些配置的覆盖。配置创建方式：在根目录中创建 cypress.json，常用内容如下：{ "viewportWidth":1440,"viewportHeight":960,"chromeWebSecurity": false,"fixturesFolder": "test/cypress/fixtures","integrationFolder": "test/cypress/integration","plugin 12345671234567"}。
Cypress 不仅支持用户自定义文件结构，还支持用户自定义 Cypress 的各项配置。可以通过 Cypress.Commands.add方法来定义自定义命令，将常见的操作封装成可重用的函数，提高测试代码的可读性和可维护性。
Cypress 测试框架在前端自动化测试中具有诸多优势。它的实时重载功能、可调试性、存根和模拟网络请求等特性，使得开发人员能够更加高效地进行测试开发。其安装方式多样，目录结构清晰，配置自定义灵活，与 Selenium 相比也有不少优势。Cypress 为前端自动化测试提供了一种强大而便捷的工具，有助于提高软件的质量和稳定性。
来源：爱玩科技fly