使用 Cypress 和 NuxtJS 并在开始 e2e 测试之前等待服务器启动答案

【问题标题】：Use Cypress with NuxtJS and wait for server startup before starting e2e tests使用 Cypress 和 NuxtJS 并在开始 e2e 测试之前等待服务器启动
【发布时间】：2021-08-09 15:49:09
【问题描述】：

我用 Cypress 建立了一个 NuxtJS 项目。在我的测试中，我会转到我的应用程序的其中一个页面，例如主页 (/)

describe('Index page', function () {
  it('should show index page of app', function () {
    cy.visit('/')
    cy.get('h1.title').contains('frontend')
  })
})

所以我需要启动我的开发服务器才能构建我的 Nuxt 应用程序 (Vue)，然后启动我的 e2e 测试。

问题是当我启动它时（很长，至少 15 秒），它没有给我控制权，进程保持活动状态，所以我无法启动我的 yarn 命令来运行测试。

"scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
    "generate": "nuxt-ts generate",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore",
    "lint": "yarn lint:js && yarn lint:style",
    "test": "jest",
    "e2e": "cypress open",
    "e2e:slient": "yarn run dev & cypress run"
  },

因此，一旦服务器正确启动，我真的不知道如何启动我的测试。

谢谢。

【问题讨论】：

我可能遗漏了什么，但您是否尝试打开第二个控制台来运行测试？
我不能。因为我会设置 Github Actions 以便自动启动测试，所以在服务器启动后，我必须启动测试，但我无法检测到服务器何时启动，因为进程保持活动状态。即使我同时开始测试，如果服务器需要时间启动，我也会有错误：/
你能显示 github 操作 yaml 吗？
我暂时没有设置 github 操作。我只希望能够同时启动服务器然后进行测试。

标签： vue.js cypress e2e-testing package.json nuxtjs

【解决方案1】：

因为 NUXT 在准备好测试之前生成应用程序需要一些时间。

所以你不应该使用“yarn run dev & cypress run”。

相反，您可以通过 cypress 文档推荐的 start-server-and-test 进行尝试： https://docs.cypress.io/guides/continuous-integration/introduction#Boot-your-server

"scripts": {
   "dev": "nuxt-ts",
   "build": "nuxt-ts build",
   "start": "nuxt-ts start",
   "generate": "nuxt-ts generate",
   "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
   "lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore",
   "lint": "yarn lint:js && yarn lint:style",
   "test": "jest",
   "cypress:open": "cypress open",
   "cypress:run": "cypress run",
   "e2e": "start-server-and-test dev http://localhost:3000 cypress:open",
   "pree2e:slient": "npm run build",
   "e2e:silent": "start-server-and-test start http://localhost:3000 cypress:run"
 },
 "devDependencies": {
    .
    .
    .
    "start-server-and-test": "^1.11.5",
  }

添加“pree2e:slient”脚本的原因是强制NUXT在以静默模式开始cypress测试之前构建应用程序（您可以在CI管道上运行此脚本）

【讨论】：

【解决方案2】：

使用pm2 和wait-on 包获得更通用的解决方案

yarn pm2 start "yarn nuxt"
yarn wait-on http://localhost:3000
yarn cypress run
yarn pm2 kill

Pm2 允许在您的服务器上运行多个应用程序。将yarn nuxt 命令发送到 pm2 会在开发模式下运行您的应用程序。 wait-on 等待来自 localhost 的响应，以确保在开始测试之前为您的应用程序提供服务。然后，您可以正常运行 cypress。不要忘记在完成时终止 pm2，否则您的应用程序将继续运行。

【讨论】：