将 Cypress 与 NuxtJS 一起使用，并在开始 e2e 测试之前等待服务器启动

Question

我用 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"
  },

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

谢谢。

Answer 1

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

所以你不应该使用"yarn 运行 dev & cypress 运行".

相反，您可以通过 start-server-and-test 尝试，这是 cypress 文档推荐的： 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 管道上）

Answer 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 运行s 您处于开发模式的应用程序。 wait-on 等待本地主机的响应以确保您的应用程序在开始测试之前得到服务。然后你运行 cypress 正常。不要忘记在完成时杀死 pm2，否则您的应用程序将继续运行.

将 Cypress 与 NuxtJS 一起使用，并在开始 e2e 测试之前等待服务器启动

Use Cypress with NuxtJS and wait for server startup before starting e2e tests

vue.js

e2e-testing

package.json

cypress

nuxtjs