在现代 Web 应用程序开发中，端到端（E2E）测试是不可或缺的。在此之前，大多数人使用 Selenium 等第三方工具来执行自动化测试，但这些工具的缺点是不太稳定、难以使用和维护。近期，一个叫 Cypress 的新类型工具受到了广泛关注，Cypress 是一个现代的、开源的端到端测试工具，它使用 JavaScript 编写并且专注于用户体验。
在本篇文章中，我们将深入了解 Cypress，学习如何使用它来编写 E2E 测试，并使用示例代码来演示基本用法。
安装 Cypress
在开始学习 Cypress 之前，您需要在本地计算机上安装它。 Cypress 是基于 Node.js 构建的，因此您需要先安装 Node.js 和 npm。如果您还没有安装，请先按照下面的步骤安装它们：
- 安装 https://nodejs.org/ （建议使用最新的长期支持版本）。
- 打开终端窗口，并通过以下命令来检查 Node.js 和 npm 是否安装成功：
node -v npm -v
- 安装 Cypress，使用以下命令：
npm install cypress --save-dev
这样就可以安装 Cypress 相关的依赖项，同时也会在项目目录下创建一个目录名为 "node_modules" 的文件夹，其中包含 Cypress 的所有组件和插件。
创建一个 Cypress 测试
在安装 Cypress 之后，您可以创建您的第一个 Cypress 测试。使用以下命令：
npx cypress open
这将在您的项目根目录中打开 Cypress Test Runner。Cypress Test Runner 是一个交互式的 GUI 工具，可以帮助您编写和调试 Cypress 测试。
接下来，您可以创建一个新的测试文件。在 Cypress Test Runner 窗口中，单击 "New File"，然后输入一个名字，例如 "example_spec.js"。这将在 "cypress/integration" 目录下创建一个新的测试文件，在其中您可以写一些测试用例代码。
在本文中，我们将编写一个测试用例，测试 Google 搜索的正确性。首先，我们需要导入 Cypress 库并编写一个测试用例。
// javascriptcn.com 代码示例
// example_spec.js
describe('My First Cypress Test', () => {
it('Visits Google homepage', () => {
cy.visit('https://www.google.com')
cy.get('input[name="q"]')
.type('Cypress E2E Testing')
cy.get('input[name="btnK"]').click()
cy.url().should('contain', 'search')
})
})在这个测试用例中，我们首先在浏览器中打开 Google 主页，然后输入一些文字到搜索框里（搜索 Cypress E2E Testing），点击搜索按钮，最后验证页面 URL 是否包含 "search" 关键字。
运行 Cypress 测试
在完成测试用例后，我们现在可以在 Cypress Test Runner 中运行该测试。单击 "Run all specs" 按钮，并等待测试运行完成。对于本例，您应该能够看到一个包含测试结果和日志的交互式窗口。
此外，在终端/命令行中，您也可以通过运行以下命令来执行 Cypress 测试：
npx cypress run
该命令将在非交互式模式下运行测试，生成测试报告并将其保存在默认的 "/cypress/results" 目录下。
总结
在本文中，我们已经介绍了如何使用 Cypress 进行 E2E 测试，学习了如何安装 Cypress、创建测试文件以及编写完整的测试用例。Cypress 经过设计，使得编写自动化测试变得更加容易、可读性和维护性更高。结合一个易于使用的 GUI 工具和一个强大的命令行接口，Cypress 已成为一个值得信赖的自动化测试工具，可以帮助开发人员和测试人员更轻松地测试他们的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653279377d4982a6eb5399fe