Run Cypress for e2e, integration and component testing.
Options can be configured in project.json when defining the executor, or when invoking it. Read more about how to configure targets and executors here: https://nx.dev/reference/project-configuration#targets.
Depending on your testing type, the Cypress executor is configured in different ways. The following are sample configurations that are created via the configuration and cypress-component-configuration generators.
"targets": {
"e2e": {
"executor": "@nx/cypress:cypress",
"options": {
"cypressConfig": "apps/app-e2e/cypres.config.ts",
"devServerTarget": "my-react-app:serve",
"testingType": "e2e"
}
}
}
API testing with Cypress is the same setup as e2e testing. Just change which devServerTarget is used!
If devServerTarget is provided, the url returned from started the dev server will be passed to cypress as the baseUrl option.
Defining a baseUrl in the executor options will override the inferred baseUrl from the devServerTarget.
The baseUrl defined in the Cypress config file is the last value used if no url is found in the devServerTarget or executor options.
When running in CI it doesn't make sense to start up a dev server since there aren't changes to watch for.
You can use @nx/web:file-server to serve the pre-built static files of your frontend project.
In some frontend application, add a 'static-serve' target.
"serve-static": {
"executor": "@nx/web:file-server",
"options":{
"buildTarget": "frontend:build"
}
}
In the e2e application add a configuration to change devServerTarget to point to the static-serve from the frontend application
"e2e": {
//...
"configurations": {
"ci": {
"devServerTarget": "frontend:serve-static"
}
}
}
The same can be done for backend node apps with @nx/js:node executor
nx e2e my-app-e2e --configuration=ci
Using executor configurations offers flexibility to set environment variables
"targets": {
"e2e": {
"executor": "@nx/cypress:cypress",
"options": {
"cypressConfig": "apps/app-e2e/cypres.config.ts",
"devServerTarget": "my-react-app:serve",
"testingType": "e2e"
},
"configurations": {
"qa": {
"env": {
"API_URL": "https://api.qa.company.com"
}
},
"dev": {
"env": {
"API_URL": "http://localhost:3333/api"
}
}
}
}
}
Read more on different ways to use environment variables for cypress executor
The path of the Cypress configuration json file.
The address (with the port) which your application is running on.
The browser to run tests in.
A unique identifier for a run to enable grouping or parallelization.
Dev server target to run tests against.
trueWhether or not the Cypress Test Runner will stay open after running tests in a spec file.
A key-value Pair of environment variables to pass to Cypress runner.
A named group for recorded runs in the Cypress dashboard.
falseDisplays the browser instead of running headlessly. Set this to true if your run depends on a Chrome extension being loaded.
A String or Array of glob patterns used to ignore test files that would otherwise be shown in your list of tests. Cypress uses minimatch with the options: {dot: true, matchBase: true}. We suggest using https://globster.xyz to test what files would match.
The key cypress should use to run tests in parallel/record the run (CI only).
falseWhether or not Cypress should run its tests in parallel (CI only).
Pass a specified port value to the devServerTarget, if the value is 'cypress-auto' a free port will automatically be picked for the devServerTarget.
falseIf passed, Cypress output will not be printed to stdout. Only output from the configured Mocha reporter will print.
falseWhether or not Cypress should record the results of the tests.
The reporter used during cypress run.
The reporter options used. Supported options depend on the reporter. https://docs.cypress.io/guides/tooling/reporters#Reporter-Options
A comma delimited glob string that is provided to the Cypress runner to specify which spec files to run. i.e. **examples/**,**actions.spec**.
falseSkip dev-server build.
e2ecomponent, e2eSpecify the type of tests to execute.
A comma delimited list to identify a run with.
falseRecompile and run tests when files change.
Extra properties of any type may be provided to this object.
A regex string that is used to choose what additional integration files to copy to the dist folder.
No longer used since cypress supports typescript out of the box. If specified, it will be ignored.
falseHide the browser instead of running headed.
Cypress runs headless by default. Use the --watch flag to control head/headless behavior instead.
The path of the Cypress tsconfig configuration json file.
This option no longer has any effect. Cypress supports typescript out of the box. Add any options directly to <projectRoot>/tsconfig.json or <projectRoot>/cypress/tsconfig.json