Describe how to run server and tests and shutdown

[bahmutov]

Often see this question

Hi, what is the recommended say to start your normal dev server before cypress run? 
I tried an NPM script as "test": "yarn start; yarn cypress run" but running into 
background-process issues and the server isn't closed afterwards.

Need to show two ways we do it: via run-p --race server test using npm-run-all and using https://github.com/bahmutov/start-server-and-test

[brian-mann]

We explain exactly that in the CI document.

https://docs.cypress.io/guides/guides/continuous-integration.html#Booting-Your-Server

And also in the Best Practices.

https://docs.cypress.io/guides/references/best-practices.html#Web-Servers

Maybe should also go in the Usage FAQ.

[bahmutov]

In continuous integration we tell how to do 2 separate commands

## background your server
npm start &

## poll the server over and over again
## until it's been booted
wait-on http://localhost:8080

## and now run cypress
cypress run

Not how to do what we usually do (run-p --race or start ... wait). Same in best practices.

[rwieruch]

Not sure about the status quo of best practice here, but I used start-server-and-test from the CI documentation for my local testing as well. Just wanted to leave the comment here, because when I searched for this topic, I came across this issue :)

  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
    "test:cypress": "start-server-and-test start http://localhost:8080 cypress",
    "cypress": "cypress run"
  },

[bahmutov]

There is a message in your output “something is already running in port 3000” maybe that’s why it is hanging

…

Sent from my iPhone

On Jun 8, 2018, at 09:14, Ray ***@***.***> wrote: @brian-mann @bahmutov @rwieruch that solution works on my local machine, but through Jenkins in RHLS, when it gets to the cypress test script portion, it just hangs. My scripts are: "start": "npm-run-all -p watch-css start-ts", "cy:jenkins": "cypress run", "cy:acc-jenkins": "start-server-and-test start http://localhost:3000 cy:jenkins", Jenkins output: 06:07:09 + yarn run cy:acc-jenkins 06:07:10 yarn run v1.7.0 06:07:10 $ start-server-and-test start http://localhost:3000 cy:jenkins 06:07:10 starting server using command "npm run start" 06:07:10 and when url "http://localhost:3000" is responding 06:07:10 running tests using command "cy:jenkins" 06:07:10 06:07:10 > ***@***.*** start /home/jenkins/workspace/eline_Trial_ray9656_jenkins-NG3XYFMPMVMXX2NMTHE46UX65Q2XF23EKS6Y3CHOGJF67LD23I2Q/builder 06:07:10 > npm-run-all -p watch-css start-ts 06:07:10 06:07:11 06:07:11 > ***@***.*** watch-css /home/jenkins/workspace/eline_Trial_ray9656_jenkins-NG3XYFMPMVMXX2NMTHE46UX65Q2XF23EKS6Y3CHOGJF67LD23I2Q/builder 06:07:11 > npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive 06:07:11 06:07:11 06:07:11 > ***@***.*** start-ts /home/jenkins/workspace/eline_Trial_ray9656_jenkins-NG3XYFMPMVMXX2NMTHE46UX65Q2XF23EKS6Y3CHOGJF67LD23I2Q/builder 06:07:11 > react-scripts-ts start 06:07:11 06:07:11 06:07:11 > ***@***.*** build-css /home/jenkins/workspace/eline_Trial_ray9656_jenkins-NG3XYFMPMVMXX2NMTHE46UX65Q2XF23EKS6Y3CHOGJF67LD23I2Q/builder 06:07:11 > node-sass-chokidar src/ -o src/ 06:07:11 06:07:12 DEPRECATION WARNING: Passing 220px, a non-string value, to unquote() 06:07:12 will be an error in future versions of Sass. 06:07:12 on line 196 of /home/jenkins/workspace/eline_Trial_ray9656_jenkins-NG3XYFMPMVMXX2NMTHE46UX65Q2XF23EKS6Y3CHOGJF67LD23I2Q/builder/src/styles/mixins.scss 06:07:12 Something is already running on port 3000. 06:07:12 DEPRECATION WARNING: Passing 220px, a non-string value, to unquote() 06:07:12 will be an error in future versions of Sass. 06:07:12 on line 196 of /home/jenkins/workspace/eline_Trial_ray9656_jenkins-NG3XYFMPMVMXX2NMTHE46UX65Q2XF23EKS6Y3CHOGJF67LD23I2Q/builder/src/styles/mixins.scss 06:07:12 DEPRECATION WARNING: Passing 20ch, a non-string value, to unquote() 06:07:12 will be an error in future versions of Sass. 06:07:12 on line 196 of /home/jenkins/workspace/eline_Trial_ray9656_jenkins-NG3XYFMPMVMXX2NMTHE46UX65Q2XF23EKS6Y3CHOGJF67LD23I2Q/builder/src/styles/mixins.scss 06:07:12 DEPRECATION WARNING: Passing 220px, a non-string value, to unquote() 06:07:12 will be an error in future versions of Sass. 06:07:12 on line 196 of /home/jenkins/workspace/eline_Trial_ray9656_jenkins-NG3XYFMPMVMXX2NMTHE46UX65Q2XF23EKS6Y3CHOGJF67LD23I2Q/builder/src/styles/mixins.scss 06:07:12 Wrote 112 CSS files to /home/jenkins/workspace/eline_Trial_ray9656_jenkins-NG3XYFMPMVMXX2NMTHE46UX65Q2XF23EKS6Y3CHOGJF67LD23I2Q/builder/src/ 06:07:14 06:07:14 > ***@***.*** cy:jenkins /home/jenkins/workspace/eline_Trial_ray9656_jenkins-NG3XYFMPMVMXX2NMTHE46UX65Q2XF23EKS6Y3CHOGJF67LD23I2Q/builder 06:07:14 > cypress run 06:07:14 06:07:14 I have also tried: "cy:jenkins-": "cypress run --spec cypress/integration/accessibility/**/* > ./cypress-accessibility-results.html ", to see if any outputs were being printed to the file. The file is created, but nothing gets written to it. On the local machine, everything works as expected (script runs, file is created, when localhost is loaded, starts the cypress test and gets printed in the terminal and/or the output file), but neither works on the vm. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[bchagay]

@brian-mann I think you totally missed the server portion in your docs.

See here ---> https://docs.cypress.io/guides/getting-started/testing-your-app.html#Step-2-Visit-Your-Server

Please advise

Thank you

[praneetha-ck-robo]

Not sure about the status quo of best practice here, but I used start-server-and-test from the CI documentation for my local testing as well. Just wanted to leave the comment here, because when I searched for this topic, I came across this issue :)

  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
    "test:cypress": "start-server-and-test start http://localhost:8080 cypress",
    "cypress": "cypress run"
  },

How do I add flags for the cypress command in this case?
i.e I would run npm run cypress -- --record --key <record-key> if I had to run cypress alone. Now, if I am running npm run test:cypress, how would I pass the record flag? how would it identify to which command among the multiple ones we are passing the flag?

[NateRadebaugh]

@praneetha-ck-robo in the example you quoted, the start-server-and-test command appears to be passing three parameters: start script (start), server address, test script (cypress).

To add flags for the cypress command, you add the flags to the cypress script.

Something like this:

 "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
    "test:cypress": "start-server-and-test start http://localhost:8080 cypress",
    "cypress": "cypress -- --record --key <record-key>"
  }

[bahmutov]

Note: since start-server-and-test v1.8.0 it supports any commands, not just NPM scripts. And because npx and yarn add node_modules/.bin to the PATH automatically, you can use locally installed NPM tools. Thus from the CI script file it is often easier to do something like this:

(you have omitted cypress run command BTW, also we advise to pass the record key as environment variable CYPRESS_RECORD_KEY so it stays hidden from logs)

# your CI config file
# "start" script is assumed by default, so I will skip it
# port 8080 will expand into http://localhost:8080
npx start-server-and-test 8080 'cypress run --record'

https://github.com/bahmutov/start-server-and-test#npx-and-yarn

[praneetha-ck-robo]

@praneetha-ck-robo in the example you quoted, the start-server-and-test command appears to be passing three parameters: start script (start), server address, test script (cypress).

To add flags for the cypress command, you add the flags to the cypress script.

Something like this:

 "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
    "test:cypress": "start-server-and-test start http://localhost:8080 cypress",
    "cypress": "cypress -- --record --key <record-key>"
  }

Yeah, that is what I ended up doing for now, but I would not like to add the record key flag inside the script. Would like to include them while executing the command on the fly. Any way that I can specify that the flag is for the third parameter?

[bahmutov]

@praneetha-ck-robo you can pass the record key (just like any Cypress CLI config argument) via an environment variable CYPRESS_RECORD_KEY. In fact I prefer the environment variable because it is safer (the key will not be accidentally shown in the CI log) See https://docs.cypress.io/guides/references/configuration.html#Environment-Variables