将 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 秒），它不给我控制权，该进程保持活动状态，所以我无法启动我的纱线命令来运行测试。

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

结果，我真的不知道服务器正确启动后如何启动测试。

谢谢。

Answer 1

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

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

相反，您可以尝试启动服务器和测试，这是赛普拉斯文档推荐的： 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 管道上运行此脚本）