如何使用流行的 Cypress 框架测试 Vue 应用

介绍

本文将介绍如何使用 Cypress 测试 Vue.js 应用。文中以一个用 Vue.js 创建的简单待办事项应用为例进行说明。

本文并未深入探讨 Cypress 的测试方法，Cypress 官方文档是更好的参考资料。本文并非简单地解释 Cypress 的概念和工作原理，而是通过一个可运行的（简单但实用的）应用程序来演示如何将 Cypress 与 Vue.js 结合使用。

Cypress 拥有许多强大的功能，使用起来非常方便。但同时，它也是一把双刃剑。正是这些丰富的功能，有时反而会让人在寻找合适的断言来编写测试时感到困惑。因此，我在这里分享一下我在寻找合适的测试条件时的思考过程。

该应用不会进行全面测试。只会测试基本功能，足以确保基本功能正常运行。

设置应用程序

由于本文重点在于编写测试，因此我们不会花太多时间在创建应用程序本身上。这是一个简单的待办事项应用程序，所以我只添加了基本功能——添加任务、划掉任务和删除任务。此外，还有一些附加功能，例如不允许添加空任务和不允许添加重复任务。如果您需要，可以对其进行重构，使其能够处理重复任务。

这是待办事项应用的代码。它非常简洁，样式也不多。但它能正常运行，这就足够我们开始编写测试了。那么，让我们开始编写测试吧。首先，我们需要安装 Cypress。

安装和设置 Cypress

使用 npm 安装 Cypress：

现在我们已经将 Cypress 安装为开发依赖项，可以开始编写测试了。如果您是第一次使用 Cypress，请按照文档中的步骤操作。

在项目中首次启动 Cypress 时，它会创建大量测试用例来帮助我们入门。我们实际上并不需要这些测试用例，所以可以将其删除。

安装 Cypress 后，会创建一个同名的新文件夹，其中也包含一些我之前提到的测试文件夹。虽然可以删除所有这些测试文件夹，但请保留一个名为 `<tests>` 的文件夹integration。这是因为 Cypress 会在这个文件夹内查找测试文件。我尝试在这个文件夹之外创建一个测试文件，但它没有显示在 Cypress 的用户界面中。我不确定是不是我漏掉了什么步骤，或者是否有其他方法可以解决这个问题。如果有人知道，请在下方评论区留言告诉我 🙂

至于测试文件的命名，虽然 Cypress 文档似乎将所有示例文件都命名为something_spec.js`.js`（即都以 `.js` 结尾_spec.js），但这并非必须。只要是 JavaScript 文件，你可以随意命名。不过，请确保使用有意义的名称，而不是随意命名。如果你已经有一套命名系统，那就太好了！

写作测试

应用已准备就绪，Cypress 也已安装配置完毕。现在是时候开始编写测试了。

我们编写的第一个测试是检查待办事项是否被添加。查看应用程序代码，我们可以将任务输入到输入框中，点击按钮，任务就会被添加到无序列表中。因此，我们可以通过在输入框中输入内容并点击按钮来创建待办事项。

我之前用 Jest 为我的 Vue 应用编写测试，还写过一篇相关的文章。在编写这个测试时，我沿用了编写 Jest 测试的思路。在 Jest 中，Vue 组件会被导入，然后挂载等等。然而，在 Cypress 中，我找不到类似的功能。直到我看到一个使用 `Cypress` 的示例visit()。我立即打开控制台，使用 `Cypress 3.x` 命令启动了应用npm run serve。这个命令适用于 Vue 3.x，所以如果你使用的是 Vue 2.x，则应该是 `Cypress 3.x`。由于我可以通过 localhost 在浏览器中访问该应用，所以我使用了 localhost 作为 `Cypress 3.x`npm run start的地址cy.visit()。

太棒了！Cypress 可以像我一样访问应用页面。现在剩下的就是选择输入框、输入任务，然后点击按钮了。

it这是大多数测试库用来编写测试用例的术语。你可以阅读我的文章，其中有更详细的解释。

在这里，我们通过本地主机访问应用程序，找到输入框cy.get()并开始输入内容。要输入内容，我们只需调用 ` cy.type()add_input ()` 函数cy.get()。然后，我们以同样的方式找到按钮，并通过调用 `add_button()` 函数点击它cy.click()。现在剩下的就是检查待办事项是否真的被添加到列表中了。

我一开始想获取整个列表，但后来意识到我们只是在检查我们创建的任务是否已被添加。既然我们只检查这一个任务，我就直接cy.get()查找包含该任务的列表元素。

现在看起来很简单，对吧！这是你第一次使用Cypress进行测试！

我们不能就此止步，继续进行。我们的第二个测试是检查点击任务后是否会将其划掉。

我们在第一次测试中已经访问过应用页面并创建了一个待办事项，所以这次我们只需要点击它并检查它是否已被勾选。点击它的方法和第一次测试一样，使用 `getTodo()` 方法获取cy.get()它。然后，我们通过链式调用 `getTodo()` 来指定要查找的任务cy.contains()。接下来，我们像点击按钮一样，通过链式调用 `getTodo()` 来点击它cy.click()。

最后，为了检查它是否被划掉，我们再次获取具体的任务，然后断言它具有类completed。

如果你再看一下我们的应用代码，会发现我们编写了一些 CSS，给带有 `<class>` 类的元素添加了completed删除线文本装饰。你可以更全面地测试一下，检查该任务是否真的应用了这些 CSS。这样就能确保即使在某些情况下，`<class>` 类completed被添加了，但 CSS 没有生效，测试也能正常工作。你可以在 Cypress 文档中搜索相关的断言。这也能很好地帮助你熟悉文档的阅读。

现在进行最终测试，我们将检查是否可以通过点击按钮删除任务。

cy.get()这次的测试非常简单。我们使用链式调用获取按钮click()。最后，我们获取特定任务并断言它不包含任务内容。至此，我们完成了所有测试，并确保应用程序的基本功能正常运行。

这里汇总了我们编写的所有测试用例：

结论

您可能已经注意到，尽管我们的整个应用程序都是用 Vue 编写的，但我们的测试中只涉及 HTML 元素，甚至没有用到任何 Vue.js。这是因为 Cypress 的设计初衷就是如此。以 Jest 为例，React 应用和 Vue 应用的测试编写方式截然不同。在我看来，Cypress 的设计理念是独立于任何特定的框架。无论您的应用采用组件化架构、使用服务器还是采用无服务器架构，Cypress 都旨在测试应用在浏览器中的运行情况。它模拟了普通用户实际使用应用时的行为。您无需导入或挂载任何组件。

综上所述，我们已经完成了所有测试的编写。我们创建了一个极简的待办事项应用，并使用 Cypress 为其编写了测试。Cypress 提供了一些非常棒的测试工具和功能。如果你还没试过，那就太可惜了。