@nx/cypress:configuration
Add a Cypress configuration to an existing project.
The State of JS survey is live, featuring a monorepo tools sectionThe State of JS survey is live, featuring a monorepo tools sectionVote for us
Add a Cypress configuration to an existing project.
This is a generator to add a cypress e2e configuration to an existing project.
1nx g @nx/cypress:configuration --project=my-cool-project --devServerTarget=some-app:serve
2
Running this generator, adds the required files to run cypress tests for a project, Mainly a cypress.config.ts
file and default files in the <project-root>/cypress/
directory. Tests will be located in <project-root>/cypress/e2e/*
by default.
You can customize the directory used via the --directory
flag, the value is relative to the project root.
For example if you wanted to place the files inside an e2e
folder
1nx g @nx/cypress:configuration --project=my-cool-project --devServerTarget=some-app:serve --directory=e2e
2
Providing a --devServerTarget
is optional if you provide a --baseUrl
or the project you're adding the configuration to has a serve
target already. Otherwise, a --devServerTarget
is recommend for the @nx/cypress:cypress
executor to spin up the dev server for you automatically when needed.
This generator helps in creating feature based e2e/integration testing setups where you can place the feature tests in the same project as the feature library. This differs from creating a separate e2e project that contained all tests for an application which can easily cause more tests to run than is strictly necessary.
Take the following workspace where the feature-cart
project is affected.
In this case, if tests for the all the feature-*
projects where contained in the fancy-app-e2e
project, then all of those features will be tested in the app, when only the feature-cart
tests need to run.
Running these e2e/integration tests more often than they should results in longer CI times.
Brining those e2e test closer to each feature can result is lowering CI times since we don't need to test those features if they did not change.
Building this way leaves the fancy-app-e2e
for mostly smoke type testing instead of more in-depth feature testing.
Using the @nx/cypress:configuration
generator can help you accomplish this in your workspace.
1nx g @nx/cypress:configuration --project=feature-cart --devServerTarget=fancy-app:serve
2nx g @nx/cypress:configuration --project=feature-user --devServerTarget=fancy-app:serve
3nx g @nx/cypress:configuration --project=feature-dashboard --devServerTarget=fancy-app:serve
4
Each project will now get their own e2e
target, where the feature project is only concerned with itself. This allows for more focused tests without worrying about forcing unrelated tests to also run.
It's important to remember that these feature tests are still going to be leveraging the same app to run the tests against so if you plan to run in parallel, you can leverage using a file server and the ability for @nx/cypress:cypress
executor to pass through a port or find a free port to allow running tests in parallel. Read more about the --port flag
1nx generate configuration ...
2
1nx g cypress-e2e-configuration ... #same
2
By default, Nx will search for configuration
in the default collection provisioned in workspace.json.
You can specify the collection explicitly as follows:
1nx g @nx/cypress:configuration ...
2
Show what will be generated without writing to disk:
1nx g configuration ... --dry-run
2
The project to add a Cypress configuration to
A devServerTarget,'<projectName>:<targetName>[:<configName>], that will be used to run tests against. This is usually the app this project will be used in. Pass --baseUrl if you wish to not use a devServerTarget.
cypress
A directory where the project is placed relative from the project root
Set the 'port' option on the e2e target. It's recommend to set a different port so you can run tests e2e targets in parallel. Most dev servers support using '0' to automatically find a free port. The value 'cypress-auto' can be used if the underlying dev server does not support automatically finding a free port.
The address (with the port) which your application is running on. If you wish to start your application when running the e2e target, then use --devServerTarget instead.
webpack
vite
, webpack
, none
The Cypress bundler to use.
false
Generate JavaScript files rather than TypeScript files.
true
Whether or not this project uses JSX.
eslint
eslint
, none
The tool to use for running lint checks.
false
Whether or not to configure the ESLint parserOptions.project
option. We do not do this by default for lint performance reasons.
false
Create a application at the root of the workspace
false
Skip formatting files.
false
Do not add dependencies to package.json
.