1. 前言
作为一个母语为js的前端开发来说，cypress像是特意为前端人员定制的。但是这不代表做为前端开发使用cypress来写用例的时候没有学习成本。八青妹曾在前端组内强推过cypress，给组员也培训过几次cypress的用法，写过很多个不同场景的完整的端到端的自动化用例。其实就着项目来说，可能代入感会更强，更能领会到cypress的魔法。强推cypress的另一个目的就是，试图将测试驱动开发的理念灌输到组员的血液中。在做开发的时候，不要光想着实现的需求目标，还要从实现的目标来反推bug可能出现的场景。
很多人认为cypress就是UI测试，编写测试用例来模拟人工去点击按钮等操作步骤，从这个角度去解放人力。但是这仅仅是cypress的一个功能。
最早接触的一个开源项目是OHIF/Viewers(一个查看医疗图像并可以做测量和标注的项目)，这个项目内置了cypress的自动化测试。
如图所示，医疗影像上需要进行各种标注和测量，需要利用到各种工具。每次新增加一个工具，都要考虑会不会影响原来的工具，那如果每次都人工去点击下，可想而知工作量是会有多么庞大啊！我们可以选择一个这个项目工具的测试用例代码来看下Circle.spec.ts：
import { test } from '@playwright/test';
import { visitStudy, checkForScreenshot, screenShotPaths, simulateClicksOnElement } from './utils';
test.beforeEach(async ({ page }) => {
const studyInstanceUID = '1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5';
const mode = 'Basic Viewer';
await visitStudy(page, studyInstanceUID, mode, 2000);
});
test('should display the circle tool', async ({ page }) => {
await page.getByTestId('MeasurementTools-split-button-secondary').click();
await page.getByTestId('CircleROI').click();
const locator = page.getByTestId('viewport-pane').locator('canvas');
await simulateClicksOnElement({
locator,
points: [
{
x: 480,
y: 205,
},
{
x: 488,
y: 247,
},
],
});
await page.getByTestId('prompt-begin-tracking-yes-btn').click();
await checkForScreenshot(page, page, screenShotPaths.circle.circleDisplayedCorrectly);
});
从这段代码用例上，可以看到它的目的是验证医学成像应用程序中圆形工具的功能是否正确。再仔细看完整个代码后，整个人都不好了，他们的测试工具栈已经从cypress转到playwright了。本来想举一个具体的项目例子，让大家看到cypress的实际应用，没想到这个瞬息万变的时代也卷到了自动化测试上。
曾经八青妹以为cypress可以截图是它的一大特性，可是看上面的代码意思，playwright除了截图，还可以比对截图！！！Anyway，八青妹还是想纪念下曾经跟cypress共处的美好时光~~ 也建议看到的小伙伴们在技术选型上，可以多多比对下各个框架的特点，找到最适合的框架。不管是cypress还是playwright，能为项目所用的就是好的框架。
2. cypress是什么
Cypress是一个针对Web应用程序的测试解决方案，它使得对JavaScript开发人员来说，测试驱动开发变得有趣。Cypress提供了一个开源的基于浏览器的测试运行器，可以像最终用户一样体验您的网站，并记录并保存每个测试步骤的快照。它不仅适用于整个应用程序的端到端测试，还适用于集成测试和独立组件或JavaScript业务逻辑的单元测试。
3. cypress的特性
- 时间旅行(Time Travel)： 当你的测试运行的时候 Cypress 会进行快照。只需在命令日志中鼠标悬停，就能查看每一步的具体情况。
- 可调试(Debuggability)： 停止猜测你的测试失败的原因。直接从熟悉的工具（如：Chrome DevTools）进行调试。我们的可读错误和堆栈跟踪使得调试快如闪电。
- 自动等待(Automatic Waiting)： 请勿添加等待或者睡眠到你的测试中。Cypress 能够自动等待命令和断言。不会产生异步地狱。
- 间谍、存根和时钟(Spies, Stubs, and Clocks)： 验证和控制函数、服务器响应或者计时器的行为。这些你喜爱的在单元测试中的功能也可以使用。
- 网络流量控制(Network Traffic Control)： 轻松控制、存储和测试的边界情况，而不涉及你的服务器。只要你喜欢，你就可以存储网络流量。
- 一致的结果(Consistent Results)： 我们的架构不使用 Selenium 或者 WebDriver。向快速、一致且可靠且无片段的测试致敬。。
- 截图和视频(Screenshots, Videos, and Test Replay)： 查看故障时自动执行的截图或者从 CLI 运行整个测试套件的视频。
- 跨浏览器测试（Cross Browser Testing）: 在本地和持续集成管道中分别在 Firefox 和 Chrome 系列浏览器(包括 Edge 和 Electron)中运行测试。
- 智能编排（Smart Orchestration）: 一旦设置好记录到 Cypress Cloud,就可以轻松并行化测试套件,使用规格优先级重新运行失败的规格,并使用自动取消功能取消测试运行,以获得紧密的反馈循环。
- 漂移检测（Flake Detection）: 使用 Cypress Cloud 的易失性测试管理功能发现和诊断不可靠的测试。
来源于官网docs.cypress.io
4.安装cypress
4.1 系统要求
Cypress 是一个安装在你的电脑上的桌面应用程序。此桌面程序支持这些操作系统：
- Mac OS 10.9+，只提供 64 位的二进制文件。
- Linux Ubuntu 12.04+，Fedora21，Debian8
- Windows 7，只提供 32 位的二进制文件。
4.2 前提准备
1.Node.js
Cypress 是基于 Node.js 构建的，因此您需要安装 Node.js。您可以从 Node.js 官方网站下载并安装最新版本的 Node.js。
运行node -v查看是否安装成功
2.NPM
Cypress 需要使用 NPM（Node.js 包管理器）来安装和管理依赖项。NPM 在安装 Node.js 时会自动安装。您可以在命令行终端中运行npm -v命令来检查 NPM 是否已安装。
3.浏览器
Cypress 是一个基于浏览器的测试工具，因此您需要安装和配置至少一个浏览器。Cypress 支持 Chrome、Firefox、Electron 和 Edge 等浏览器。 默认情况下，Cypress 会使用 Chrome 浏览器来运行测试。
4.代码编辑器
您需要一个代码编辑器来编写和编辑测试代码。Cypress 不需要任何特定的代码编辑器，您可以使用任何您喜欢的编辑器，例如 Visual Studio Code
4.3 npm 安装方式
通过 npm 安装 Cypress 非常容易：
> cd /your_project_path
> npm install cypress --save-dev
这将把 Cypress 作为开发依赖安装进你的项目。
确保你已经运行了
npm init或者在项目的更目录中有node_modules文件夹或者存在package.json文件，以确保 Cypress 能正确的安装到相应目录。
注意：Cypress 的
npm软件包是 Cypress 二进制文件的封装。npm软件包的版本决定了下载的二进制文件的版本。
最佳实践 推荐方法是使用
npm安装 Cypress，因为：
- Cypress 的版本与其他所有版本相同
- 它简化了持续集成中 Cypress 的运行。
4.4 直接下载方式
如果你的项目中没有使用 node 或者 npm，或者你只是想要尝试 Cypress ，则可以直接从 CDN 直接下载 Cypress。
直接下载将始终获取最新的可用版本。会自动检测你的平台下载。
只需手动解压缩并双击即可。Cypress 不需要安装任何依赖即可运行。
4.5 启动cypress
安装成功后，可在该项目对应的文件夹下执行命令打开cypress面板
npx cypress open
或者将命令添加到package.json文件中
{
"scripts": {
"cy:open": "cypress open"
}
}
在终端输入
npm run cy:open
启动项目后，可看到如下所示：
4. 总结
环境搭建为第一步。第二步我们熟悉下cypress常用的命令，以及如何去自定义一个cypress指令，了解下cypress的API有哪些，照着最近的官网翻译成了中文。第三步八青妹将举例讲述如何在e2e项目中去运用这些命令和api。
不要一听说是自动化测试就望而却步，只要思路逻辑清晰,就没有什么在怕的，哈哈！
