vue.js - 将 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 run dev & cypress run”。

相反，您可以通过 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 管道上运行此脚本)