Learn a simple technique to perform automated tests in different environments, overwriting the Cypress configuration
Resuming the series "Pinches of Cypress", I decided to bring a simple but recurring theme in discussion forums about testing automation.
Imagine that you need to run the same set of end-to-end tests against a local development environment, in a staging environment, and then in production.
Let's say the URLs for the environments are as follows:
And in the Cypress configuration file, the baseUrl property has the value http://localhost:8000. That is, it points to the local development environment.
In the package.json file, we could have the following scripts:
"scripts": {
"test": "cypress run",
"test:staging": "cypress run --config baseUrl=https://example.com/my-app-staging",
"test:prod": "cypress run --config baseUrl=https://example.com/my-app"
}
Finally, at the terminal, or even in a continuous integration pipeline, execute the following commands to run the tests against the different environments.
-
npm test(ornpm t- short version) - to run tests against the local development environment -
npm run test:staging- to run the tests against the staging environment - and
npm run test:prod- to run the tests in production
That's it!
And just as baseUrl can be overwritten, so can other configurations.
Tell me, what else would you like to see in the series "Pinches of Cypress"?
This post was originally published in Portuguese on the Talking About Testing blog.
Want to go deeper?
I built a hands-on learning platform to take you from your first test to a complete end-to-end testing workflow with confidence. You'll find interactive lessons, coding challenges, and quizzes that cover real user interactions, accessibility checks, network mocking, API testing, and the automatic running of tests in CI/CD.
New courses are added over time, so there's always more to explore.
Top comments (4)
Maybe this helps someone:
changing the mailHogUrl parameter with using --config flag doesn't work if you are using the cypress-mailhog package.
But it works if you set the mailHogUrl as an Environment variable 🎉 Then in the npm script we can call it with using --env flag:
--env mailHogUrl=your-custom-mailhog-url
That's a great tip! Thanks for sharing, @sheenavanpunk .
Useful tip!
Does the same logic work for any parameter from cypress.json file? For example, I have a mailhog url that I would need to alter in different environments.
--config parameter_name
Hi, @sheenavanpunk ,
I know you can change other configurations via the command line too. I'd recommend giving it a try.