@ensono-stacks/cypress

Using the @ensono-stacks/cypress plugin can help you get started with testing using cypress. Built upon the @nx/cypress plugin, Ensono Stacks provides additional capabilities to help you hit the ground running!

Additionally, cypress tests can be added to your deployment pipelines through the various deployment generators.

tip

Visit the Frontend Testing in an Nx monorepo and Testing with cypress user guides for more information!

Setting up @ensono-stacks/cypress

Install the @ensono-stacks/cypress plugin with the following command:

npm

npm install --save-dev @ensono-stacks/cypress@latest

yarn

yarn add --dev @ensono-stacks/cypress@latest

Executors and Generators

To see a list of the plugin capabilities run the following command:

nx list @ensono-stacks/cypress

View additional information about a plugin capability through the following command:

nx g @ensono-stacks/cypress:[generator-executor-name] --help

Generators

@ensono-stacks/cypress:init

Create a cypress test project for your chosen application

The init generator adds cypress e2e tests to the application you choose.

Usage

nx g @ensono-stacks/cypress:init

Upon calling the init generator you will be presented with the following question:

• What app would you like to generate a test project for?
  • The name of the existing application to generate a test project for

Command line arguments

The following command line arguments are available:

Option	Description	Type
--project	The name of the application to generate a test project for	string

Generator Output

The init generator will create a new test project within your chosen application containing an example test and predefined configuration for the monorepo and the individual test project.

Generated files

.
├── apps
│   ├── <app-name>
│   │   ├── cypress
│   │   │   ├── e2e
│   │   │   │   ├── example.cy.ts #Example tests using cypress
│   │   │   ├── fixtures
│   │   │   │   ├── example.json #Example fixture/test data
│   │   │   ├── support
│   │   │   │   ├── commands.ts #Example custom commands for cypress
│   │   │   │   ├── e2e.ts #Configuration for cypress and test reporting
│   │   │   ├── tsconfig.json #Typescript configuration for cypress
│   │   ├── project.json #Updated with target for cypress and reporting
│   │   ├── tsconfig.json #Typescript configuration updated for cypress exclusions
└── cypress.config.base.ts #Shared cypress configuration across projects

note

Visit the Testing with cypress documentation for further details!

@ensono-stacks/cypress:init-deployment

Add cypress E2E tests to your deployment pipelines

The init-deployment generator adds e2e testing to pre-existing deployment pipelines, including test reporting and artefact uploads.

Prerequisites

1. The @ensono-stacks/workspace:init-deployment has been executed, producing the required deployment files for the workspace

Usage

nx g @ensono-stacks/cypress:init-deployment

Generator Output

build/taskctl/tasks.yaml

# New e2e:ci task definition will be added to the tasks.yaml, defining what target should be ran for projects when executing the e2e task
e2e:ci:
    description: Run e2e tests in ci
    command:
      - npx nx affected --base="$BASE_SHA" --target=e2e --parallel=1

taskctl.yaml

# New e2e:ci task will be added to the taskctl pipeline, adding e2e tests following unit testing
- task: e2e:ci
    depends_on: test:ci

# Generate HTML report for all affected projects
- task: Bash@3
            condition: and(succeededOrFailed(),eq(variables.HASTESTRESULTS, 'true'))
            displayName: Generate Reports
            inputs:
              targetType: inline
              script: npx nx affected --base="$BASE_SHA" --target=html-report
                --configuration=ci --parallel=1
# New test reporting steps will be added to the azuredevops pipeline
- task: PublishTestResults@2
    # Configuration for publishing test results
- task: PublishPipelineArtifact@1
    # Configuration for publishing pipeline artefacts

@ensono-stacks/cypress:accessibility

Adds axe accessibility tests to your test project

The accessibility generator installs the required plugins for conducting accessibility testing with cypress. Additionally, this will configure your test project to enable proper test reporting from axe while providing you with an example set of test cases.

Usage

nx g @ensono-stacks/cypress:accessibility

Command line arguments

The following command line arguments are available:

Option	Description	Type
--project -p	The name of the test project to add accessibility tests to	string

Generator Output

Scaffolding accessibility testing will add two dependencies to the package.json:

1. axe-core - The accessibility test engine
2. cypress-axe - Cypress integration with the accessibility test engine

Additionally, an example accessibility test will be generated, showcasing how to utilise axe to scan your application for accessibility violations:

Generated files

.
├── apps
│   ├── <app-name>
│   │   ├── cypress
│   │   │   │   ├── support
│   │   │   │   │   ├── e2e.ts #Terminal logging function configured
│   │   │   │   ├── e2e
│   │   │   │   │   ├── axe-accessibility.cy.ts #Example accessibility test using cypress
│   │   ├── cypress.config.js #setupNodeEvents configured for logging with terminal logging function
├──   tsconfig.cy.json #cypress-axe declared as a type
└──────────

note

Visit the Accessibility Testing documentation for further details!

Executors

@nx/cypress:cypress

Enables you to execute your cypress tests

The cypress executor is an executor provided by @nx/cypress and enables you to run your e2e tests.

Usage

The following command will run all of the cypress tests within your applications cypress test folder, as part of the executor it will automatically spin up a web server on local host for the corresponding application.

nx e2e <app-name>

Command line arguments

See the @nx/cypress plugin page for a list of up to date command line arguments