@ensono-stacks/playwright

Using the @ensono-stacks/playwright plugin can help you get started with testing using playwright, with it's comprehensive feature set this plugin helps you capitalise on those features by accelerating your setup process and providing examples to get you started.

Additionally, playwright 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 Playwright user guides for more information!

Setting up @ensono-stacks/playwright

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

npm
yarn

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

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

Executors and Generators

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

nx list @ensono-stacks/playwright

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

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

Generators

@ensono-stacks/playwright:init

Create a playwright test project for your chosen application

The init generator creates a playwright project for the application you choose.

Usage

nx g @ensono-stacks/playwright: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 (named <app-name>-e2e)

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 for your chosen application containing an example test and predefined configuration for the monorepo and the individual test projects. By default the init generator will configure both a baseline playwright configuration and an individual project base playwright configuration.

Generated files
.
├── apps
│   ├── <app-name>-e2e
│   │   ├── src
│   │   │   ├── example.spec.ts #Example tests using playwright
│   │   ├── playwright.config.ts #Example playwright configuration catering for multiple browsers and devices
│   │   ├── project.json #Configuration for the project, including various NX targets
│   │   ├── tsconfig.e2e.json #E2E typscript config file
│   │   ├── tsconfig.json #typscript config file
│   │   ├── .eslintrc.json #Linting configuration for the e2e project
└── playwright.config.base.ts

note

Visit the Testing with Playwright documentation for further details!

@ensono-stacks/playwright:init-deployment

Add Playwright E2E tests to your deployment pipelines

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

Prerequisites

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

Usage

nx g @ensono-stacks/playwright: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
- task: version:prod
    depends_on: e2e:ci

# New test reporting steps will be added to the azuredevops pipeline
- script: |-
    # Install playwright added to setup step 
    npx playwright install --with-deps
- task: PublishTestResults@2
    # Configuration for publishing test results
- task: PublishPipelineArtifact@1
    # Configuration for publishing pipeline artefacts

@ensono-stacks/playwright:accessibility

Adds axe accessibility tests to your test project

The accessibility generator installs @axe-core/playwright and configures an example accessibility test

Usage

nx g @ensono-stacks/playwright: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:

@axe-core/playwright - The accessibility test engine
axe-result-pretty-print - Result formatter

Additionally, an example accessibility test will be generated, showcasing how to utilise both axe and axe-result-pretty-print to scan your application for accessibility violations:

Generated files
.
├── apps
│   ├── <app-name>-e2e
│   │   ├── src
│   │   │   ├── axe-accessibility.spec.ts #Example accessibility test using playwright
└──────────

note

Visit the Accessibility Testing documentation for further details!

@ensono-stacks/playwright:visual-regression

Adds native or cloud based visual regression to your test suite

The visual-regression generator provides you with the option to scaffold visual regression tests and configuration through a cloud based provider or Playwrights native visual comparison API.

Usage

nx g @ensono-stacks/playwright:visual-regression

Upon calling the visual-regression generator you will be presented with a number of options:

What type of visual regression tests would you like to use?
- native: Generate visual regression tests using Playwrights native visual comparison api
- applitools: Generate visual regression tests using the @applitools/eyes-playwright plugin and scaffold an example visual regression test batch

Command line arguments

The following command line arguments are available:

Option	Description	Type	Accepted Values	Default
--project, -p	The name of the existing playwright test app to enhance	string
--type, -t	Method used to conduct visual testing	string	[choices: "native", "applitools"]	none

Generator Output

Playwright with native visual comparisons

Opting to scaffold native visual testing will make a number of amendments to your test projects configuration:

playwright.config.ts snapshot configuration: Configuration for your visual tests
playwright-visual-regression.spec.ts: Sample test showcasing how to perform visual testing using playwrights native visual comparison api.
project.json: Additional task set up to enable you to run your visual regression tests using the playwright:jammy container

Generated files
.
├── apps
│   ├── <app-name>-e2e
│   │   ├── src
│   │   │   ├── playwright-visual-regression.spec.ts #Example visual test using playwright
└──────────

note

Visit the Playwright with visual comparisons documentation for further details!

Playwright with Applitools Eyes

Opting to scaffold visual testing with applitools will make a number of amendments to your test projects configuration:

@applitools/eyes-playwright: Dependency added to package.json
playwright.config.ts project configuration: Standalone project configuration to isolate visual tests with Applitools Eyes
applitools-eyes-grid.spec.ts: Sample test showcasing how to perform visual testing using the Applitools Eyes Grid.

Generated files
.
├── apps
│   ├── <app-name>-e2e
│   │   ├── src
│   │   │   ├── applitools-eyes-grid.spec.ts #Example visual test using playwright
└──────────

note

Visit the Playwright with Applitools Eyes documentation for further details!

@ensono-stacks/playwright:visual-regression-deployment

Configure visual regression testing within your deployment pipeline

The visual-regression-deployment generator configures your pipeline to enable visual regression testing either natively, or through a cloud based provider.

Usage

nx g @ensono-stacks/playwright:visual-regression-deployment

Upon calling the visual-regression-deployment generator you will be presented with a number of options:

What type of visual regression tests would you like to use?
- native
- applitools

You should select the type of visual regression tests which you created through the @ensono-stacks/playwright:visual-regression generator.

Command line arguments

The following command line arguments are available:

Option	Description	Type	Accepted Values	Default
--type, -t	Method used to conduct visual testing	string	[choices: "native", "applitools"]	none

Generator Output

Playwright with native visual comparisons

Opting to scaffold native visual testing will make a number of amendments to your test projects configuration:

Generated files
.
├── build
│   ├── azDevOps
│   │   ├── azuredevops-updatesnapshots.yaml #Pipeline to capture and update baseline images within the CI
└──────────

build/taskctl/tasks.yaml
# New update snapshots task definition to update snapshots for all affected projects
e2e:updatesnapshots:
    description: Run e2e snapshot updates in ci
    command:
      - npx nx affected --base="$BASE_SHA" --target=e2e --parallel=1
        --skip-nx-cache --update-snapshots --grep @visual-regression

taskctl.yaml
# Update snapshots task added to taskctl.yaml which can be called by adding a comment to pull requests
updatesnapshots:
    - task: e2e:updatesnapshots

note

Visit the Updating your baseline images documentation for further details!

Playwright with Applitools Eyes

Opting to scaffold visual testing with applitools will make a small change your test projects configuration:

build/azDevOps/azuredevops-stages.yaml
- task: AzureCLI@2
    displayName: build_deployment_${{ parameters.environment }}
        env:
            GH_TOKEN: $(GH_TOKEN)
            APPLITOOLS_API_KEY: $(APPLITOOLS_API_KEY) # API key for applitools api added

note

Visit the Playwright with Applitools Eyes documentation for further details!

Executors

@mands/nx-playwright:playwright-executor

Enables you to execute your playwright tests

The playwright-executor executor is a third party executor provided by @mands and enables you to run your e2e tests.

Usage

The following command will run all of the playwright tests within your e2e 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>-e2e

Command line arguments

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

Setting up @ensono-stacks/playwright​

Executors and Generators​

Generators​

@ensono-stacks/playwright:init​

Usage​

Command line arguments​

Generator Output​

@ensono-stacks/playwright:init-deployment​

Prerequisites​

Usage​

Generator Output​

@ensono-stacks/playwright:accessibility​

Usage​

Command line arguments​

Generator Output​

@ensono-stacks/playwright:visual-regression​

Usage​

Command line arguments​

Generator Output​

Playwright with native visual comparisons​

Playwright with Applitools Eyes​

@ensono-stacks/playwright:visual-regression-deployment​

Usage​

Command line arguments​

Generator Output​

Playwright with native visual comparisons​

Playwright with Applitools Eyes​

Executors​

@mands/nx-playwright:playwright-executor​

Usage​

Command line arguments​

Setting up @ensono-stacks/playwright

Executors and Generators

Generators

@ensono-stacks/playwright:init

Usage

Command line arguments

Generator Output

@ensono-stacks/playwright:init-deployment

Prerequisites

Usage

Generator Output

@ensono-stacks/playwright:accessibility

Usage

Command line arguments

Generator Output

@ensono-stacks/playwright:visual-regression

Usage

Command line arguments

Generator Output

Playwright with native visual comparisons

Playwright with Applitools Eyes

@ensono-stacks/playwright:visual-regression-deployment

Usage

Command line arguments

Generator Output

Playwright with native visual comparisons

Playwright with Applitools Eyes

Executors

@mands/nx-playwright:playwright-executor

Usage

Command line arguments