Rescope @nrwl to @nx
@nx/cypressSee schema
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.

nx g cypress-project --name=my-app-e2e --project=my-app

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

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

You can also run the cypress-project 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:

nx g cypress-project --name=my-app-e2e --project=my-app --bundler=vite

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:

import { defineConfig } from 'cypress'; import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset'; const config = nxE2EPreset(__filename, { bundler: 'vite' }); export default defineConfig({ e2e: { ...config, setupNodeEvents(on, config): { config.setupNodeEvents(on); // Your settings here } }, });
Nx 15 and lower use @nrwl/ instead of @nx/

Usage

nx generate cypress-project ...

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

You can specify the collection explicitly as follows:

nx g @nx/cypress:cypress-project ...
Nx 15 and lower use @nrwl/ instead of @nx/

Show what will be generated without writing to disk:

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

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.

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

boolean
Default: false

Skip formatting files.

skipPackageJson

boolean
Default: false

Do not add dependencies to package.json.

standaloneConfig

Deprecated
boolean
Default: true

Split the project configuration into <projectRoot>/project.json rather than including it inside workspace.json.

Nx only supports standaloneConfig