前端生产力提升：Cypress 作为主要开发浏览器

生产力、生产力、生产力：您应该如何利用 Cypress 这样的测试工具作为您的主要开发浏览器。

我正在 GitHub 上开展一个大型UI 测试最佳实践项目，我分享这篇文章是为了传播它并获得直接反馈。

你会手动测试你的前端吗？如果你用一些端到端测试，你会把编写测试作为最后一步吗？是的？这篇文章就是为你准备的！🙌
你是 TDD 开发者吗？别读这篇文章，浪费时间 😉

Cypress因其高效的端到端测试而闻名。当然，它也有一些局限性，但它的创建显然是为了将端到端测试提升到一个新的高度。在这篇文章中，我想分享如何将Cypress 用作主要的开发浏览器，而不仅仅是测试工具。

TDD开发人员已经习惯于尽可能多地利用他们的测试工具。如果您没有采用严格的 TDD 方法，也不用担心，这篇文章只是关于生产力的。如果您因为“没时间”而不测试您的前端应用程序，我希望您能改变主意！

让我们分析一下，作为前端开发人员，我们在开发常青身份验证表单示例时通常是如何工作的：

• 我们对用户名输入字段进行编码
• 我们通过浏览器手动尝试
• 我们最终解决了它
• 然后，我们对密码输入字段进行编码
• 我们通过浏览器手动尝试
• 然后，我们添加提交按钮
• 我们编写 AJAX 请求管理代码

请注意，此时，我们可能已经在输入字段中添加了一些默认值，以避免每次按下 CTRL+S 键时手动填写它们……无论如何：
我们通过浏览器尝试整个表单，检查是否已进行 AJAX 调用，以及它是否将正确的有效负载发送到服务器

• 由于我们需要检查错误路径是否得到正确管理，我们强制请求函数返回包含错误的静态响应（可能我们正在 StackOverflow 上搜索如何使用 Axios 模拟错误的网络响应……）
• 我们检查应用程序在错误情况下的行为是否符合预期
• 我们降低网络速度来检查 AJAX 延迟如何影响用户体验
• 最后，我们重新检查所有内容，以确保最近的更改不会破坏已经测试过的流程

为了本文的方便，我缩短了步骤，因为上述每个步骤可能都需要 5 到 20 处修改 + 表单填写等等。我们中最聪明的人会使用一些 Chrome DevTools 代码片段来加快流程，并在源代码中添加一些脚本，以便在所需的时间点直接呈现 UI（前提是视图代码与应用程序的其余部分很好地解耦）。有些人会添加很多条件，以防止某些更改在网站上线后仍然生效……这会导致代码库中出现大量垃圾代码……

如果您已经编写了 E2E 测试，请跳过下一章！

测试工具的力量

如果您不是测试人员，并且上述描述与您的工作方式相符……我有个好消息要告诉您：像Cypress（或TestCafé，但请不要考虑像 Selenium 或 Puppeteer 这样的通用浏览器自动化工具）这样的专用测试工具可以简化每个工作步骤！而且不会弄脏您的源代码！因为

• 你无需硬编码输入字段的默认值，自动化浏览器会以极快的速度与页面交互。看看我的一些测试，就能理解我所说的“极快”是什么意思了。

• 您无需模拟奇怪的网络行为，因为 Cypress 允许您从浏览器角度（而非代码角度）进行模拟。您的前端应用将执行标准的 AJAX 调用，而忽略 Cypress 是否按照您指定的格式进行响应（您可以指定响应、网络状态、网络延迟等）。
• Cypress 控制 Chrome 浏览器，您可以利用已经习惯的DevTools
• Cypress 创建了一个专用且持久的 Chrome 用户，因此您可以安装自己喜欢的Chrome 扩展程序（例如 React 和 Redux DevTools）

React 和 Redux DevTools 与 Cypress 的结合使用（来自cypress-react-devtools repo

• 你可以添加大量断言来立即获得绿色/红色反馈。断言是一种基于英语的保护语句，例如：“我期望表单将用户名和密码作为 AJAX 请求的有效载荷传递。”
• 您无需手动来回测试最新实现的流程和之前的流程：一旦您使用 Cypress 测试复制了某个流程，它就会一直存在。如果您更改代码并意外破坏了之前的流程，Cypress 会发出警告！
• 如果您听说 E2E 测试很慢，请阅读UI 集成测试是什么

您是否已经对前端进行了 E2E 测试？

赞👍 只有一个问题：你是不是只有在确定一切正常的情况下才写测试？这才是重点！编写测试时，你会用测试工具来重复你手动完成的操作！完全相同的操作：

• 填写表格
• 点击按钮
• 断言某些元素存在或可见
• 检查AJAX 请求负载

为什么要这么做？因为手动测试更自由！因为你可以选择要测试的流程，因为你可以利用浏览器扩展程序和 React/Vue.js 等 DevTools，因为你还可以访问 Chrome DevTools 等。

我如何利用 Cypress 作为我的主要开发浏览器

看一下我为工作软件大会准备的仓库。第四个提交（在所有前端相关的提交之前）如下：

由外而内的验收 E2E 测试

而且，在编写前端“应用程序”（它是一个演示，一个单组件应用程序）时，我从未手动与前端进行过交互。我只在开发完成后才手动测试它。怎么做的？

• 首先：打开 Cypress 并将其放在第二台显示器上
• 使用 Cypress 打开你的 Chrome 浏览器并检查是否安装了你需要的 DevTools
• 安装Cypress 的skip-and-only-ui插件，它可以帮助您直接从 Cypress UI 运行单个测试、跳过一些测试等

动图

• 安装Cypress 的watch-and-reload插件，你可以将其配置为在源文件的每个 CTRL+S 上重新启动 Cypress 测试
• 编写 Cypress 测试中的第一个交互：讲述身份验证表单和用户名输入的填写。如果你能写出完整的测试，再次表示感谢！
• 开始编写前端源代码。watch-and-reload 插件无需离开代码编辑器即可重新运行 Cypress 测试

请在最后一点停下来：你按下 CTRL+S 键，Cypress 就会自动运行，无需任何手动操作！而且它比你更快！想想它帮你省去了多少工作！我们继续：

• 一旦一切正常，请在 Cypress 测试中编写下一个交互，并编写应用程序代码以使测试正常运行
• 当你需要检查不同的流程（AJAX 500 响应、401 响应、403 响应、无网络等）时，请重复测试并利用 Cypress API 来模拟它（例如cy.route）
• 重复流程直到完成

做得好😊，请分享您的反馈，以帮助其他开发人员实现这一生产力转变💪

总结

利用 Cypress（以及上面提到的插件）作为主要开发浏览器的优势在于：

• 减少手动且缓慢的测试，从而节省大量时间
• 最后，你的应用会自动进行测试，并且测试将永远保留
• 完全避免了在编写流程后编写测试的“烦人”过程
• 避免在源代码中添加临时状态和虚假返回