Schema for internal use only

Please do not extend this schema as it is part of Nx internal usage.

@nx/cypress:cypress-project

Create Cypress Configuration for the workspace.

Adding Cypress to an existing application requires two options. The name of the e2e app to create and what project that e2e app is for.

1nx g configuration --name=my-app-e2e --project=my-app 2

When providing --project option, the generator will look for the serve target in that given project. This allows the cypress executor to spin up the project and start the cypress runner.

If you prefer to not have the project served automatically, you can provide a --base-url argument in place of --project

1nx g configuration --name=my-app-e2e --base-url=http://localhost:1234 2
What about API Projects?

You can also run the configuration generator against API projects like a Nest API. If there is a URL to visit then you can test it with Cypress!

Using Cypress with Vite.js

Now, you can generate your Cypress project with Vite.js as the bundler:

1nx g configuration --name=my-app-e2e --project=my-app --bundler=vite 2

This generator will pass the bundler information (bundler: 'vite') to our nxE2EPreset, in your project's cypress.config.ts file (eg. my-app-e2e/cypress.config.ts).

Customizing the Vite.js configuration

The nxE2EPreset will then use the bundler information to generate the correct settings for your Cypress project to use Vite.js. In the background, the way this works is that it's using a custom Vite preprocessor for your files, that's called on the file:preprocessor event. If you want to customize this behaviour, you can do so like this in your project's cypress.config.ts file:

1import { defineConfig } from 'cypress'; 2import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset'; 3 4const config = nxE2EPreset(__filename, { bundler: 'vite' }); 5export default defineConfig({ 6 e2e: { 7 ...config, 8 async setupNodeEvents(on, config) { 9 // Ensure that `@nx/cypress` events are set up. 10 await config.setupNodeEvents(on, config); 11 12 // Your settings here 13 }, 14 }, 15}); 16

Usage

1nx generate cypress-project ... 2

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

You can specify the collection explicitly as follows:

1nx g @nx/cypress:cypress-project ... 2

Show what will be generated without writing to disk:

1nx g cypress-project ... --dry-run 2

Options

name

Required
string

Name of the E2E Project.

directory

string

A directory where the project is placed.

project

string

The name of the frontend project to test.

baseUrl

string

The address (with the port) which your application is running on.

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.

projectNameAndRootFormat

string
Accepted values: as-provided, derived

Whether to generate the project name and root directory as provided (as-provided) or generate them composing their values and taking the configured layout into account (derived).

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.

skipFormat

Internal
boolean
Default: false

Skip formatting files.

skipPackageJson

Internal
boolean
Default: false

Do not add dependencies to package.json.