如何一口气启动Cypress测试、Vue前后端?

How to start Cypress test, Vue front-end, and back-end in one go?

我想在 Vue.js 应用程序上使用 Cypress 设置 E2E 测试。当我开始 Cypress 测试时,它警告我 Vue 应用程序(在 localhost:8080 上)不是 运行,起初我有点吃惊。正如我所想的那样,Vue 应用程序会随着 Cypress 测试的开始而自动启动(自动地?;)。但是 - 事实证明 - 它不会这样做。

我现在想做的是创建一个测试脚本,它将启动 Cypress 测试、Vue.js 前端应用程序和后端 Node.Js/Express 应用程序, 一致。 (目前前后端应用不是很大,所以启动它们应该不会花那么长时间。当它们变大时,我很可能会为后端调用添加存根。)

但是,我不知道该怎么做!我可以手动启动它们,但这似乎很麻烦。而且我无法想象这无法在某些脚本或其他代码或配置的帮助下完成。

根据我收集到的信息,我认为我需要创建某种 Webpack 脚本来实现这一点,但这就是我所能找到的(我几乎没有 Webpack 经验,这无济于事)任何一个...)。 我如何创建一个(shell?)脚本来完成这个?

我相信您必须查看 Cypress 文档 - https://docs.cypress.io/guides/guides/continuous-integration.html#Boot-your-server

内容摘录如下,

许多人通过 运行 如下命令来处理这种情况:

npm start & cypress run // Do not do this

问题是 - 如果您的服务器启动需要时间会怎样?无法保证下一个命令运行时 (cypress run) 您的 Web 服务器已启动且可用。因此,您的 Cypress 测试可能会在准备好访问之前开始并尝试访问您的本地服务器。

解决方案

幸运的是,有一些解决方案。您可以使用更好的选项,而不是引入任意等待(如 sleep 20)。

wait-on 模块

使用等待模块,您可以阻止 cypress run 命令的执行,直到您的服务器启动。

npm start & wait-on http://localhost:8080

cypress run