@nx/cypress:cypress-e2e-configuration

Add a Cypress configuration to an existing project.

This is a generator to add a cypress e2e configuration to an existing project.

nx g cypress-e2e-configuration --project=my-cool-project --devServerTarget=some-app:serve

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

nx g cypress-e2e-configuration --project=my-cool-project --devServerTarget=some-app:serve --directory=e2e

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.

Feature Based Testing

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 cypress-e2e-configuration generator can help you accomplish this in your workspace.

nx g cypress-e2e-configuration --project=feature-cart --devServerTarget=fancy-app:serve
nx g cypress-e2e-configuration --project=feature-user --devServerTarget=fancy-app:serve
nx g cypress-e2e-configuration --project=feature-dashboard --devServerTarget=fancy-app:serve

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

Usage

nx generate cypress-e2e-configuration ...

nx g e2e ... #same

By default, Nx will search for cypress-e2e-configuration in the default collection provisioned in workspace.json.

You can specify the collection explicitly as follows:

nx g @nx/cypress:cypress-e2e-configuration ...

Nx 15 and lower use @nrwl/ instead of @nx/

Show what will be generated without writing to disk:

nx g cypress-e2e-configuration ... --dry-run

Options

project

Required

string

The project to add a Cypress configuration to

devServerTarget

string

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.

port

oneOf [string, number]

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.

baseUrl

string

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.

bundler

string

Default: webpack

Accepted values: vite, webpack, none

The Cypress bundler to use.

js

boolean

Default: false

Generate JavaScript files rather than TypeScript files.

linter

string

Default: eslint

Accepted values: eslint, none

The tool to use for running lint checks.

setParserOptionsProject

boolean

Default: false

Whether or not to configure the ESLint parserOptions.project option. We do not do this by default for lint performance reasons.

rootProject

Hidden

boolean

Default: false

Create a application at the root of the workspace

skipFormat

boolean

Default: false

Skip formatting files.

skipPackageJson

boolean

Default: false

Do not add dependencies to package.json.