Run Cypress E2E tests.
@nx/cypress
Package reference
Here is a list of all the executors, generators and migrations available from this package.
Executors
Generators
initInternal
Initialize the
@nx/cypressplugin.Add a Cypress E2E Configuration to an existing project.
component-configurationInternal
Set up Cypress Component Test for a project
Migrate existing Cypress e2e projects to Cypress v11
Convert existing Cypress project(s) using
@nx/cypress:cypressexecutor to use@nx/cypress/plugin.
Migrations
21.0.x
20.8.x
19.6.x
19.4.x
19.1.x
remove-tsconfig-and-copy-files-options-from-cypress-executor
Removes the `tsConfig` and `copyFiles` options from the `@nx/cypress:cypress` executor.
Version: 21.0.0-beta.10
Remove tsConfig and copyFiles Options from Cypress Executor
Removes the previously deprecated and unused tsConfig and copyFiles options from the @nx/cypress:cypress executor configuration in all projects.
Examples
Remove the options from the project configuration:
apps/app1-e2e/project.json
1{
2 "targets": {
3 "e2e": {
4 "executor": "@nx/cypress:cypress",
5 "options": {
6 "cypressConfig": "apps/app1-e2e/cypress.config.ts",
7 "tsConfig": "apps/app1-e2e/tsconfig.json",
8 "copyFiles": "**/*.spec.ts",
9 "devServerTarget": "app1:serve"
10 }
11 }
12 }
13}
14Remove the options from a target default using the @nx/cypress:cypress executor:
nx.json
1{
2 "targetDefaults": {
3 "e2e": {
4 "cache": true,
5 "executor": "@nx/cypress:cypress",
6 "options": {
7 "tsConfig": "{projectRoot}/tsconfig.json",
8 "copyFiles": "**/*.spec.ts"
9 }
10 }
11 }
12}
13Remove the options from a target default using the @nx/cypress:cypress executor as the key:
nx.json
1{
2 "targetDefaults": {
3 "@nx/cypress:cypress": {
4 "cache": true,
5 "options": {
6 "tsConfig": "{projectRoot}/tsconfig.json",
7 "copyFiles": "**/*.spec.ts"
8 }
9 }
10 }
11}
12set-inject-document-domain
Replaces the `experimentalSkipDomainInjection` configuration option with the new `injectDocumentDomain` configuration option.
Version: 20.8.0-beta.0
Requires
| Name | Version |
|---|---|
| cypress | >=14.0.0 |
Set injectDocumentDomain Configuration Option
Replaces the removed experimentalSkipDomainInjection configuration option with the new injectDocumentDomain configuration option when needed. Skipping domain injection is the default behavior in Cypress v14 and therefore, it is required to use the cy.origin() command when navigating between domains. The injectDocumentDomain option was introduced to ease the transition to v14, but it is deprecated and will be removed in Cypress v15. Read more at the migration notes.
Examples
If the experimentalSkipDomainInjection configuration option is present, the migration will remove it. This is to account for the fact that skipping domain injection is the default behavior in Cypress v14.
apps/app1-e2e/cypress.config.ts
1import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
2import { defineConfig } from 'cypress';
3
4export default defineConfig({
5 e2e: {
6 ...nxE2EPreset(__filename, {
7 cypressDir: 'src',
8 bundler: 'vite',
9 webServerCommands: {
10 default: 'pnpm exec nx run app1:dev',
11 production: 'pnpm exec nx run app1:dev',
12 },
13 ciWebServerCommand: 'pnpm exec nx run app1:dev',
14 ciBaseUrl: 'http://localhost:4200',
15 }),
16 baseUrl: 'http://localhost:4200',
17 experimentalSkipDomainInjection: ['https://example.com'],
18 },
19});
20If the experimentalSkipDomainInjection configuration option is present and set to an empty array (no domain injection is skipped), the migration will remove it and will set the injectDocumentDomain option to true.
apps/app1-e2e/cypress.config.ts
1import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
2import { defineConfig } from 'cypress';
3
4export default defineConfig({
5 e2e: {
6 ...nxE2EPreset(__filename, {
7 cypressDir: 'src',
8 bundler: 'vite',
9 webServerCommands: {
10 default: 'pnpm exec nx run app1:dev',
11 production: 'pnpm exec nx run app1:dev',
12 },
13 ciWebServerCommand: 'pnpm exec nx run app1:dev',
14 ciBaseUrl: 'http://localhost:4200',
15 }),
16 baseUrl: 'http://localhost:4200',
17 experimentalSkipDomainInjection: [],
18 },
19});
20If the experimentalSkipDomainInjection configuration option is not present (no domain injection is skipped), the migration will set the injectDocumentDomain option to true.
apps/app1-e2e/cypress.config.ts
1import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
2import { defineConfig } from 'cypress';
3
4export default defineConfig({
5 e2e: {
6 ...nxE2EPreset(__filename, {
7 cypressDir: 'src',
8 bundler: 'vite',
9 webServerCommands: {
10 default: 'pnpm exec nx run app1:dev',
11 production: 'pnpm exec nx run app1:dev',
12 },
13 ciWebServerCommand: 'pnpm exec nx run app1:dev',
14 ciBaseUrl: 'http://localhost:4200',
15 }),
16 baseUrl: 'http://localhost:4200',
17 },
18});
19remove-experimental-fetch-polyfill
Removes the `experimentalFetchPolyfill` configuration option.
Version: 20.8.0-beta.0
Requires
| Name | Version |
|---|---|
| cypress | >=14.0.0 |
Remove experimentalFetchPolyfill Configuration Option
Removes the experimentalFetchPolyfill configuration option that was removed in Cypress v14. Read more at the migration notes.
Examples
apps/app1-e2e/cypress.config.ts
1import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
2import { defineConfig } from 'cypress';
3
4export default defineConfig({
5 e2e: {
6 ...nxE2EPreset(__filename, {
7 cypressDir: 'src',
8 bundler: 'vite',
9 webServerCommands: {
10 default: 'pnpm exec nx run app1:dev',
11 production: 'pnpm exec nx run app1:dev',
12 },
13 ciWebServerCommand: 'pnpm exec nx run app1:dev',
14 ciBaseUrl: 'http://localhost:4200',
15 }),
16 baseUrl: 'http://localhost:4200',
17 experimentalFetchPolyfill: true,
18 },
19});
20replace-experimental-just-in-time-compile
Replaces the `experimentalJustInTimeCompile` configuration option with the new `justInTimeCompile` configuration option.
Version: 20.8.0-beta.0
Requires
| Name | Version |
|---|---|
| cypress | >=14.0.0 |
Replace the experimentalJustInTimeCompile Configuration Option with justInTimeCompile
Replaces the experimentalJustInTimeCompile configuration option with the new justInTimeCompile configuration option. Read more at the migration notes.
Examples
If the experimentalJustInTimeCompile configuration option is present and set to true, the migration will remove it. This is to account for the fact that JIT compilation is the default behavior in Cypress v14.
apps/app1/cypress.config.ts
1import { defineConfig } from 'cypress';
2
3export default defineConfig({
4 component: {
5 devServer: {
6 framework: 'angular',
7 bundler: 'webpack',
8 },
9 experimentalJustInTimeCompile: true,
10 },
11});
12If the experimentalJustInTimeCompile configuration option is set to false and it is using webpack, the migration will rename it to justInTimeCompile.
apps/app1/cypress.config.ts
1import { defineConfig } from 'cypress';
2
3export default defineConfig({
4 component: {
5 devServer: {
6 framework: 'angular',
7 bundler: 'webpack',
8 },
9 experimentalJustInTimeCompile: false,
10 },
11});
12If the experimentalJustInTimeCompile configuration is set to any value and it is using Vite, the migration will remove it. This is to account for the fact that JIT compilation no longer applies to Vite.
apps/app1/cypress.config.ts
1import { defineConfig } from 'cypress';
2
3export default defineConfig({
4 component: {
5 devServer: {
6 framework: 'react',
7 bundler: 'vite',
8 },
9 experimentalJustInTimeCompile: false,
10 },
11});
12update-component-testing-mount-imports
Updates the module specifier for the Component Testing `mount` function.
Version: 20.8.0-beta.0
Requires
| Name | Version |
|---|---|
| cypress | >=14.0.0 |
Update Component Testing mount Imports
Updates the relevant module specifiers when importing the mount function and using the Angular or React frameworks. Read more at the Angular migration notes and the React migration notes.
Examples
If using the Angular framework with a version greater than or equal to v17.2.0 and importing the mount function from the cypress/angular-signals module, the migration will update the import to use the cypress/angular module.
apps/app1/cypress/support/component.ts
1import { mount } from 'cypress/angular-signals';
2import './commands';
3
4declare global {
5 namespace Cypress {
6 interface Chainable<Subject> {
7 mount: typeof mount;
8 }
9 }
10}
11
12Cypress.Commands.add('mount', mount);
13If using the Angular framework with a version lower than v17.2.0 and importing the mount function from the cypress/angular module, the migration will install the @cypress/angular@2 package and update the import to use the @cypress/angular module.
package.json
1{
2 "name": "@my-repo/source",
3 "dependencies": {
4 ...
5 "cypress": "^14.2.1"
6 }
7}
8apps/app1/cypress/support/component.ts
1import { mount } from 'cypress/angular';
2import './commands';
3
4declare global {
5 namespace Cypress {
6 interface Chainable<Subject> {
7 mount: typeof mount;
8 }
9 }
10}
11
12Cypress.Commands.add('mount', mount);
13If using the React framework and importing the mount function from the cypress/react18 module, the migration will update the import to use the cypress/react module.
apps/app1/cypress/support/component.ts
1import { mount } from 'cypress/react18';
2import './commands';
3
4declare global {
5 namespace Cypress {
6 interface Chainable<Subject> {
7 mount: typeof mount;
8 }
9 }
10}
11
12Cypress.Commands.add('mount', mount);
1320.8.0-package-updates
Version: 20.8.0-beta.0
Requires
| Name | Version |
|---|---|
| cypress | >=13.0.0 <14.0.0 |
Packages
| Name | Version | Always Add to package.json |
|---|---|---|
| cypress | ^14.2.1 | Update only |
| @cypress/vite-dev-server | ^6.0.3 | Update only |
| @cypress/webpack-dev-server | ^4.0.2 | Update only |
update-19-6-0-update-ci-webserver-for-vite
Update ciWebServerCommand to use static serve for the application.
Version: 19.6.0-beta.4
19.4.1-package-updates
Version: 19.4.1-beta.0
Requires
| Name | Version |
|---|---|
| cypress | ^13.0.0 |
Packages
| Name | Version | Always Add to package.json |
|---|---|---|
| cypress | ^13.13.0 | Update only |
19.1.0-package-updates
Version: 19.1.0-beta.0
Requires
| Name | Version |
|---|---|
| cypress | ^13.0.0 |
Packages
| Name | Version | Always Add to package.json |
|---|---|---|
| cypress | ^13.8.0 | Update only |
| @cypress/webpack-dev-server | ^3.8.0 | Update only |