Cypress is a test runner built for the modern web. It has a lot of great features:
- Time travel
- Real-time reloads
- Automatic waiting
- Spies, stubs, and clocks
- Network traffic control
- Screenshots and videos
Setting Up Cypress
Info about Cypress Component Testing can be found here
@nx/cypress package is not installed, install the version that matches your
nx package version.
By default, when creating a new frontend application, Nx will use Cypress to create the e2e tests project.
Creating a Cypress E2E project for an existing project
To generate an E2E project based on an existing project, run the following generator
nx g @nx/cypress:cypress-project your-app-name-e2e --project=your-app-name
Optionally, you can use the
--baseUrl option if you don't want cypress plugin to serve
nx g @nx/cypress:cypress-project your-app-name-e2e --baseUrl=http://localhost:4200
your-app-name with the app's name as defined in your
tsconfig.base.json file or the
name property of your
nx e2e frontend-e2e to execute e2e tests with Cypress.
You can run your e2e test against a production build by using the
nx e2e frontend-e2e --configuration=production
You can use the
--spec flag to glob for test files
# run the tests in the smoke/ directory nx e2e frontend-e2e --spec=**smoke/** # run the tests in smoke/ directory and with dashboard in the file name nx e2e frontend-e2e --spec=**smoke/**,**dashboard.cy**
By default, Cypress will run in headless mode. You will have the result of all the tests and errors (if any) in your terminal. Screenshots and videos will be accessible in
Watching for Changes (Headed Mode)
nx e2e frontend-e2e --watch Cypress will start in headed mode where you can see your application being tested.
Running Cypress with
--watch is a great way to enhance dev workflow - you can build up test files with the application running and Cypress will re-run those tests as you enhance and add to the suite.
nx e2e frontend-e2e --watch
Specifying a Custom Url to Test
baseUrl property provides you the ability to test an application hosted on a specific domain.
nx e2e frontend-e2e --baseUrl=https://frontend.com
devServerTargetare provided, Cypress will expect to have the
baseUrlproperty in the cypress config file, or will error.
If you need to fine tune your Cypress setup, you can do so by modifying
cypress.config.ts in the project root. For instance, you can easily add your
projectId to save all the screenshots and videos into your Cypress dashboard. The complete configuration is documented on the official website.
For adding more dynamic configurations to your cypress configuration, you can look into using setupNodeEvents configuration option.
If you're needing to pass a variable to cypress that you wish to not commit to your repository, i.e. API keys, or dynamic values based on configurations, i.e. API Urls. This is where Cypress environment variables can be used.
There are a handful of ways to pass environment variables to Cypress, but the most common is going to be via the
cypress.env.json file, the env executor option for cypress or the commandline.
cypress.env.json file in the projects root i.e.
apps/my-cool-app-e2e/cypress.env.json. Cypress will automatically pick up this file. This method is helpful for configurations that you want to not commit. Just don't forget to add the file to the
.gitignore and add documentation so people in your repo know what values to popluate in their local copy of the
Using @nx/cypress:cypress env executor option is a good way to add values you want to define that you don't mine commit to the repository, such as a base API url. You can leverage target configurations to define different values as well.
Optionally, you can pass environment variables via the commandline with the
When using the
--env flag, this will not be merged with any values used in the
env executor option.
nx e2e frontend-e2e --env.API_URL="https://api.my-nx-website.com" --env.API_KEY="abc-123"