在前端开发中，自动化测试和持续集成是不可或缺的环节，可以减少手动测试的工作量，提高开发效率和代码质量。在本文中，我们将介绍如何使用 Cypress 和 GitHub Actions 实现自动化测试和持续集成。
Cypress 简介
Cypress 是现代化的 Web 应用自动化测试工具，使用 JavaScript 进行编写测试脚本。它具有以下优点：
- 快速测试：Cypress 可以非常快地测试应用，它会在测试运行期间启动浏览器，并通过它与应用进行交互。这意味着测试用例的编写速度极快。
- 易于调试：Cypress 提供了丰富的命令行工具和可视化界面来帮助开发人员快速定位问题和调试测试用例。
- 可靠性：Cypress 可以模拟真实用户与应用的交互，测试用例会遵循相同的路径通过应用。这样的测试方法更准确，可以发现更多的问题。
GitHub Actions 简介
GitHub Actions 是一个持续集成和持续部署的服务，它可以与你的代码库无缝集成，通过 GitHub 界面执行自动化工作流以构建、测试和部署你的代码。它的优点如下：
- 简单易用：GitHub Actions 集成了 GitHub 界面，使得创建和管理自动化工作流操作变得更加简单。
- 可扩展性：GitHub Actions 提供了一个强大的 API 来定制自动化工作流操作，可以与现有 CI/CD 工具集成。
- 大量的操作：GitHub Actions 提供了大量的操作来执行不同的操作，比如构建和部署应用、发布到 Docker Hub 和 Kubernetes 等。
实现
现在我们将介绍如何结合 Cypress 和 GitHub Actions 创建自动化测试和持续集成。在本文中，我们将使用一个简单的 Vue 项目进行演示。在开始之前，请确保你已经安装 Cypress 和 Vue CLI。
- 创建 Vue 项目
首先，我们需要创建一个简单的 Vue 项目。请运行以下命令：
vue create my-project
在创建过程中选择默认选项。完成后，进入项目目录：
cd my-project
在这个新创建的项目中，我们首先需要添加一个新的 npm 依赖：Cypress。运行以下命令来进行安装：
npm install --save-dev cypress
在我们添加 Cypress 的依赖后，我们可以通过以下命令运行 Cypress：
./node_modules/.bin/cypress open
这将启动一次 Cypress 的运行，Cypress 会自动查找 cypress/integration 目录下的测试用例。
在我们的项目中，我们将创建一个 cypress/integration 目录来存放测试用例文件。这些测试用例文件与 Vue 应用程序一起测试。
- 创建测试用例
在我们的应用程序中，我们将创建一个简单的进度条组件，它会根据应用程序的状态展示进度。我们的测试用例将验证组件渲染和功能。
在项目根目录下，创建一个名为 ProgressBar.vue 的新文件：
-- -------------------- ---- -------
----------
-----
---- --------------------------------
---- -------
---------------------
------- -------------- --- --------------
------
------
-----------
--------
------ ------- -
----- --------------
------ -
---------- --------
------ -------
---------- ------
--
--------- -
---------------- -
------ ------------------------- - ---------- - ----
-
-
-
---------然后，我们将在 ProgressBar.spec.js 中编写测试用例。在 cypress/integration 目录中创建一个名为 ProgressBar.spec.js 的文件，并添加以下内容：
-- -------------------- ---- -------
----------------------- -- -- -
------------- -- -
-------------
--
---------- -- ---- -- -- -
----------------------------------------------- -----
--
-------------- ------- -- ----- -- -- -
----------------------------------
------------- -- ---- - ------
----------------------------------------------- ------
--
-------------- ------- -- ----- -- -- -
----------------------------------
------------- -- ---- - ------
----------------------------------
------------- -- ---- - ------
----------------------------------------------- ------
--
-------------- ------- -- ----- -- -- -
----------------------------------
------------- -- ---- - ------
----------------------------------
------------- -- ---- - ------
----------------------------------
------------- -- ---- - ------
----------------------------------------------- ------
--
------------ -- ------------ -- -- -
----------------------------------
------------- -- ---- - -------
----------------------------------------------- -------
--
--在这个测试用例中，我们检查 ProgressBar 组件在加载时是否显示正确的进度百分比。
我们为每个测试用例使用了 cy.wait() 命令，在每次点击按钮后等待 1 秒。这样，我们可以确保测试用例正在测试加载进度。最后一个测试用例等待 4 秒钟，因为 ProgressBar 组件完成后需要 4 秒钟，我们需要等待一下。
- 配置 GitHub Actions
现在，我们将配置 GitHub Actions 自动化工作流操作，通过自动执行测试用例、构建和部署应用代码，使得每次提交后，自动构建和自动部署到生产环境环境。
在 GitHub 代码仓库中，我们可以创建一个 .github/workflows 目录，并在其中创建一个名为 cypress.yml 的 YML 文件，添加以下内容：
-- -------------------- ---- -------
----- ------- -----
---
-----
---------
- ----
-----
------------
-------- -------------
------
- ----- -------------------
- ----- --- -------
----- ---------------------
-----
------------- ------
- ----- ------- ------------
---- --- -------
- ----- --- -----
---- --- --- --------
在这个配置中，我们使用 GitHub Actions 环境运行 Ubuntu，并且针对 main 分支设置回调事件，当推送分支的时候，自动化执行工作流。在工作流内，我们首先检查代码，使用 Node.js 安装运行环境，接着使用 npm 安装依赖，最后执行测试（npm run test:e2e）。
为了让 npm run test:e2e 命令能够正确地运行，并测试每次推送的代码，我们需要将其添加到 package.json 中的 scripts 对象。在 package.json 对象中，添加一个测试脚本到 scripts 对象中：
"scripts": {
"test:e2e": "cypress run --headless",
},这个测试脚本会运行 Cypress 并将测试结果输出到终端日志。
- 运行自动化测试和持续集成
现在，我们已经准备好使用 Cypress 和 GitHub Actions 进行自动化测试和持续集成，运行以下命令将代码推送到远程仓库：
git add . git commit -m "add progress bar component and e2e test" git push
现在，GitHub Actions 开始自动检查我们的代码仓库，并且执行自动化测试和构建。
如果一切顺利，工作流操作启动并且测试运行成功。测试结果会在控制台日志中输出。当工作流结束时，测试报告和测试数据将被保存到项目中指定的目录中。
总结
在本文中，我们介绍了如何使用 Cypress 和 GitHub Actions 实现自动化测试和持续集成，以及如何创建一个简单的进度条组件和测试用例。这个带有示例的文章详细介绍了如何使用 Cypress 和 GitHub Actions 进行自动化测试和持续集成，希望可以帮助你加强你的测试工作流程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ea95c3f6b2d6eab35748f9