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 configuration --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 configuration --name=my-app-e2e --base-url=http://localhost:1234

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:

nx g configuration --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,
    async setupNodeEvents(on, config) {
      // Ensure that `@nx/cypress` events are set up.
      await config.setupNodeEvents(on, config);

      // Your settings here
    },
  },
});

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 ...

Show what will be generated without writing to disk:

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

Options

name

Required

string

Name of the E2E Project.

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.