首先说明一下，这篇文章是关于一个 JavaScript 项目的，具体来说，是关于我的博客iamdeveloper.com 的。
在网站托管方面，我使用Netlify。他们的工具非常棒，而且设置起来也很容易，提交 PR 和推送到 master 分支都会自动创建部署。如果你想了解 Netlify，我强烈建议你看看他们非常优秀的文档。
如果你负责管理代码仓库，肯定遇到过项目依赖项更新的问题。有很多优秀的工具可以帮你搞定这项工作。Dependabot 就是其中之一（恭喜被GitHub 收购！）。如果你想了解如何设置 Dependabot，可以查看他们的文档。Dependabot 会在你的代码仓库中创建拉取请求 (Pull Request)，然后你可以手动合并它们。我当时就是这么做的，因为我想在合并依赖项更新的拉取请求之前先进行测试。即使 Dependabot 已经自动创建了拉取请求，手动合并仍然会很繁琐耗时。
Dependabot 有一个设置，可以自动合并它生成的 PR。这听起来很棒，但实际上并不理想，因为仅仅通过单元测试（或者根本没有测试！😱）就合并，并不能让人完全放心。度假期间，我心想，不如干脆把Cypress添加到我的持续集成/持续交付(CI/CD) 流水线中，进行端到端 (e2e) 测试。我在工作中就用过 Cypress，它确实是一个很棒的工具。如果你是 Cypress 的新手，我强烈建议你阅读一下他们的文档。
如果您不熟悉端到端测试，简单来说，就是编写一些模拟用户访问您网站的测试用例。例如，一个端到端测试可以点击商品并将其添加到购物车。在开发阶段，Cypress 提供了一个强大的任务运行器，允许您针对 Chrome 浏览器运行端到端测试（其他浏览器的支持也即将推出）。它是一个 Electron 应用，让您能够使用浏览器中常用的所有开发者工具。在持续集成/持续交付 (CI/CD) 环境中，Cypress 运行时，会针对无头浏览器（目前仅支持 Chrome）执行测试。
掌握了这些信息后，让我们把所有内容整合起来。最后一点需要说明的是，我的博客是基于 Gatsby 构建的，所以部分配置会与 Gatsby 相关。不过，本文的主要内容也适用于其他项目。
我的网站托管在GitHub上，所以我们将介绍 GitHub 上的设置。如果您使用其他服务，例如GitLab，设置方法也类似。
在代码仓库主页，点击“设置”选项卡。然后点击“分支”部分，创建分支保护规则。
就我而言，由于我使用了 Netlify 和Snyk，我希望在合并之前这两个状态检查都通过。点击“保存更改”按钮。
既然我们目前正在讨论一个 JavaScript 项目，那么让我们添加一些 npm 脚本，以便让 Cypress 在本地开发中运行起来。
npm install cypress -D（由于它是开发依赖项，因此需要添加 -D 参数）。npm install fkill-cli -D "scripts": {
...
"prebuild": "CI=1 npm i cypress",
"e2e": "cypress run",
"e2e:dev": "CYPRESS_baseUrl=http://localhost:8000 cypress open"
"build":"gatsby build",
"postbuild":"gatsby serve & npm run e2e && fkill:9000",
"develop":"gatsby develop",
...
},
我们先来看e2e:dev脚本。这个脚本的作用是启动 Cypress 的测试运行器。这里设置了环境变量CYPRESS_baseUrl，因为我们想要覆盖 cypress.json 文件中的值。cypress.json 文件中存储的值是我们 CI/CD 流水线将要使用的值。如果您想了解更多关于 cypress.json 配置文件的信息，可以查看他们非常优秀的文档。
好了，我们来运行 Cypress 任务运行器。在命令行中运行 `cypress taskrunner` npm run e2e:dev。启动通常需要 5-10 秒。由于这是您第一次运行，Cypress 会cypress在项目根目录创建一个文件夹，其中包含一些示例文件，帮助您快速上手。您可以稍后删除这些文件，也可以保留它们作为学习工具。现在我们来停止任务运行器。您可以手动退出，或者直接CTRL + C在启动它的命令行中按下 `npm start`。
为了演示，我们这里只创建一个简单的测试。在cypress/integration名为 `<filename>` 的文件夹中创建一个名为 `<filename>` 的文件smoke.spec.js。打开该文件并添加以下内容：
describe('Smoke test site', () => {
it('Should load the main page', () => {
cy.visit('/');
});
});
保存文件。由于我们是在 Gatsby 网站的环境下，让我们运行以下命令启动 Gatsby 本地开发服务器npm run develop。该命令实际上就是运行以下 Gatsby CLI 命令：gatsby develop。网站构建完成后，它将在 8000 端口（默认端口）上运行。
npm run e2e:dev让我们通过命令行再次启动任务运行器。smoke.spec.js现在，在任务运行器中，测试文件应该出现在测试文件列表中。点击它即可开始运行测试。
如果你的 Gatsby 网站正在运行，那么测试应该会通过。
恭喜，你太棒了！接下来，你应该编写更多测试用例，直到你确信所有测试都通过后，就可以发布产品了。
现在我们可以重新审视一下仓库的 Dependabot 配置了。让我们修改设置，允许自动合并所有依赖项的 PR（或者根据您的喜好进行配置）。
好的，接下来我们来做一些额外的配置，让 Cypress 能够作为 CI/CD 流水线的一部分运行。prebuild之所以需要这个脚本，是因为至少在 Netlify 上，你无法缓存二进制文件。更多信息请参阅这篇文章：《在 Netlify 上测试 | Gatsby + Netlify + Cypress.io》。
"prebuild": "CI=1 npm i cypress",
e2e我们将使用该脚本在 CI/CD 流水线中运行 Cypress。它会在无头浏览器中运行所有端到端测试文件。
"e2e": "cypress run",
这段build脚本是我用来搭建网站的。把它放在这里只是为了解释一下postbuild。😉 如果你还不知道，你可以在 npm 脚本上运行 pre 和 post 脚本。更多信息，请参阅npm 文档。
"postbuild":"gatsby serve & npm run e2e && fkill:9000",
在我们的postbuild脚本中，我们希望在容器中运行 Gatsby 网站。Gatsby CLI提供了一系列强大的命令，其中包括gatsby serve一个用于在 9000 端口（默认端口）启动网站的命令。服务器启动的同时，我们也需要启动端到端测试。这就是我们e2e脚本的作用所在。测试在容器中运行完毕后（希望一切顺利 😉），我们需要优雅地停止网站。这时 fkill CLI 就派上用场了。由于这是一个构建后步骤，后续流程将继续在 Netlify 部署环境中进行，最终网站将上线。如果存在依赖项更新的 PR，此检查将会通过，并且由于 Dependabot 配置为自动合并 PR，我们实现了依赖项更新的完全自动化。
如果你想在我的网站上查看完整的设置，请查看我在 GitHub 上的代码仓库。
nickytonline / nickytdotco这是Nick Taylor网站的源代码，该网站使用Eleventy静态网站生成器构建。它采用了Andy Bell的Hylia模板。我对其进行了一些调整，以后可能还会进行更多修改，但首先要感谢Andy提供的出色模板。
npm install
npm start
npm run production
cd dist
npx serve
本项目包含两个独立的许可证：
内容许可：目录中的所有博客文章、文章和其他书面内容src/blog均根据知识共享署名 4.0 国际许可 (CC BY 4.0) 获得许可。