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

Question

I set up a NuxtJS project with Cypress. In my tests, I go to one of the pages of my application, for example the home page (/)

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

So I need to launch my development server to be able to build my Nuxt application (Vue) and then launch my e2e tests.

The problem is that when I launch it (which is quite long, at least 15 seconds), it doesn't give me control, the process remains active so I can't launch my yarn command to run the tests.

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

As a result, I really don't know how to launch my tests once the server is properly launched.

Thank you.

I might missed something, but did you try to open a second console to run tests? — Eugene Karataev, Nov 26 '20 at 06:47
I can't. Because I'll set up Github Actions in order to start tests automatically, so after the server is started, I've to start tests, but I'm not able to detect when the server is started because the process stay active. And even if I start tests in the same time, if the server take time to boot, I'll have an error :/ — Sir Mishaa, Nov 26 '20 at 06:51
I don't have set up github actions for the moment. I only want to be able to start server then tests in the same time. — Sir Mishaa, Nov 26 '20 at 21:19

nmDat · Accepted Answer · 2021-07-16T04:00:53.827

Because NUXT will take time when generating application before ready for testing.

So you SHOULDN'T use "yarn run dev & cypress run".

Instead, you can try by start-server-and-test, which recommended by cypress documentation: 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",
  }

The reason of adding "pree2e:slient" script is to force the NUXT to build app before starting the cypress testing in slient mode (you might run this script on CI pipelines)

score 1 · Answer 2 · answered Aug 09 '21 at 07:49

Use the pm2 and wait-on packages for a more general solution

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

Pm2 allows multiple applications to run on your server. Sending the yarn nuxt command to pm2 runs your application in dev mode. wait-on waits for a response from localhost to ensure you application is being served before staring tests. You then run cypress as normal. Dont forget to kill pm2 on finish otherwise your application will continue to run.

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

2 Answers2