CODEWITHSUNDEEP
vue.jscypresse2e-testingpackage.jsonnuxt.js
Sir Mishaa
Sir Mishaa

Reputation: 580

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

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.

enter image description here

"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.

Upvotes: 5

Views: 4397

Answers (2)

GWed
GWed

Reputation: 15653

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.

Upvotes: 1

nmDat
nmDat

Reputation: 769

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)

Upvotes: 10

Related Questions