我们已经了解了 Cypress 是什么、为什么应该使用它，以及它的未来发展方向。但它是如何与现有的测试工具区分开来的呢？在本节课中，我们将探讨使 Cypress 脱颖而出的特性。

---

Cypress 的工具

首先，Cypress 是一个一体化的工具。我们无需安装任何额外的工具或库即可快速启动测试套件，Cypress 一次性提供了所有所需功能。让我们看看 Cypress 包含哪些内容。

Mocha

Mocha 是一个基于行为驱动开发（BDD）语法的 JavaScript 测试框架。Cypress 大量依赖 Mocha 的语法，尤其是在定义不同的测试用例时：

Mocha 还支持异步函数。这些函数允许我们测试需要异步行为的功能，例如用户登录。我们可以通过向 it 函数添加参数（如 done）并在事件完成时调用它来实现：

1describe('用户认证', () => {
2    it('应成功登录用户', done => {
3        httpService.post('login', userData).then(response => {
4            done(response); // done 告诉 Mocha 请求已完成
5        });
6    });
7});

我们也可以使用 async/await 关键字，在执行 expect 断言前实现类似的行为：

1it('应在账户删除时移除用户', () => {
2    httpService.delete('deleteUser', userId).then(async () => {
3        let user;
4
5        await userService.getUser(userId).then(response => user = response);
6
7        expect(user).to.deep.equal({});
8    });
9});

Chai

虽然 Mocha 为我们的测试用例提供了出色的结构，但 Chai 提供了以表达性强、易于阅读的 BDD 风格语言编写断言的能力：

不仅如此，Cypress 还内置了 Chai-jQuery 库，使我们在处理 DOM 时更加轻松。

Sinon.JS

最后，在编写测试时，我们可能还需要对方法进行存根（stub）或监视（spy）。这就是为什么 Cypress 内置了著名的 Sinon.js 库。我们可以通过 Cypress.sinon 对象在测试中的任意位置调用 Sinon。它包含两个用于存根和监视的方法：

• cy.stub()
• cy.spy()

Sinon 还通过 Sinon-Chai 扩展，使我们可以将两者结合使用，并对 stubs 和 spies 编写断言。

其他实用工具

尽管这些工具本身已构成一个完整测试框架的强大补充，Cypress 还捆绑了多个其他工具，使测试体验更加愉悦。这些工具都可通过全局的 Cypress 对象访问，因此我们可以在任何地方自由使用。

Lodash

Lodash 是流行的 JavaScript 工具库，通过 Cypress._ 暴露出来。例如：

1Cypress._.keys(obj);
2Cypress._.flattenDeep(array);

jQuery

jQuery 也可用于查询 DOM 元素或使用其他工具方法，如 $.ajax 或 $.getJSON。它通过 Cypress.$ 暴露：

1Cypress.$(selector);

minimatch.js

Minimatch.js 是一种匹配工具，通过将通配符表达式转换为正则表达式来工作。它通过 Cypress.minimatch 暴露：

1Cypress.minimatch(target: string, pattern: string, options?: MinimatchOptions);
2
3// 例如：
4Cypress.minimatch('users/1/comments', 'users/*/comments');

Blob 工具

Cypress 还包含了 Blob-util 库，可将 base64 字符串转换为 Blob 对象。这在测试文件上传等功能时非常有用。该库通过 Cypress.Blob 暴露：

1Cypress.Blob.base64StringToBlob(base64String);

Bluebird

最后，它还附带了 Bluebird，一个功能完整的 Promise 库。我们可以通过 Cypress.Promise 访问：

1new Cypress.Promise((resolve, reject) => { ... })

---

Cypress 与 Selenium

由于大多数端到端测试工具都基于 Selenium，它们面临相同的问题。而 Cypress 不同，它不使用 Selenium。相反，它与应用程序运行在同一个事件循环中。这不仅让 Cypress 更加稳定，也使其速度更快。

什么是 Selenium？

Selenium 是一个用于测试 Web 应用程序的框架。其不同组件在测试自动化中扮演不同角色。它的主要卖点是能够与多种编程语言配合使用。与 Cypress 不同，它并非专为 JavaScript 设计。它主要用于自动化 Web 应用的测试，但也可用于自动化其他重复性任务。

Cypress 与 Selenium 的区别

在 Cypress 与 Selenium 之间存在几个关键差异。

我们可以清楚地看到，Selenium 更通用，而 Cypress 专为 JavaScript 设计。对多语言的支持意味着其设置和配置更为复杂。真正开始编写测试用例可能耗时较长。

另一方面，Cypress 仅专注于 JavaScript，使其学习曲线更平缓。这对刚刚进入测试领域的开发者来说是一个绝佳选择。

---

Cypress 与前端框架

尽管 Cypress 仅适用于 JavaScript，但它与任何前端框架都能良好配合。只要应用能在浏览器中运行，Cypress 就能处理。

---

Cypress 对开发者与 QA 工程师的意义

Cypress 不仅适合开发者，也适合 QA 工程师。大多数其他工具可能要求一定的前端开发和编程知识，但 Cypress 的直观测试运行器使得其他团队成员也能轻松执行测试用例，并理解测试失败的原因。

---

Cypress 的性能

Cypress 的运行速度远超其他端到端测试工具，这是因为其在架构层面与它们存在根本差异。

Cypress 不仅性能更优，还能让开发者同时实现并测试自己的更改。这得益于其测试运行器。它具备热重载功能，让我们能即时看到修改效果。此外，由于测试运行器在真实浏览器中运行，我们还可以直接访问 DevTools。

---

Cypress Dashboard

Cypress 提供了 Cypress Dashboard，一个在线服务，可进一步提升测试速度并实现并行化。该服务提供免费层级，同时也为大型企业提供了付费计划。

---

Cypress 的架构

我们已经从复杂性和学习曲线的角度了解了 Cypress 与 Selenium 的差异。现在让我们从架构层面深入，更好地理解 Cypress 内部的工作原理。

与 Selenium 的区别

Selenium 在浏览器外部运行。它通过发送命令在浏览器内部执行各种任务。而 Cypress 与我们的 Web 应用运行在同一个事件循环中。它由一个 Node 服务器进程驱动，负责与 Cypress 通信，并在需要时执行任何任务。

浏览器内的控制

由于运行在同一个事件循环中，Cypress 可以访问应用的每一个部分。这使 Cypress 能实时响应事件，并了解测试用例为何无法正常工作。

网络层的控制

Cypress 还在网络层运行。它能访问进出的网络请求，并根据需要修改流量。

浏览器外的控制

最后，它还具备对浏览器外部的控制能力。这是因为 Cypress 安装在本地计算机上。这使得它可以直接与操作系统通信，从而实现（众多功能之一）：

• 截取截图
• 录制视频
• 执行文件系统操作