NX

Running Playwright tests with NX

Running Playwright tests in an Nx project with Currents

Nx is a build system with monorepo support and powerful integrations. Playwright tests executions in Nx can be done by using @nx/playwright plugin.

This example repository showcases all the implementation described here.

To use the nx playwright plugin, Currents client must be set as reporter option in the playwright.config file.

Here a quick example:

import { nxE2EPreset } from '@nx/playwright/preset';
import { defineConfig, devices } from '@playwright/test';
import { CurrentsConfig, currentsReporter } from '@currents/playwright';

const currentsConfig: CurrentsConfig = {
  recordKey: process.env.CURRENTS_RECORD_KEY,
  projectId: process.env.CURRENTS_PROJECT_ID,
};

const nxConf = nxE2EPreset(__filename);
export default defineConfig({
  ...nxConf,
  reporter: [currentsReporter(currentsConfig)],
  ...
  ...
});

See a more scalable example for multiple projects here

In order to execute the tests, our example project.json file includes the e2e target and Playwright plugin as executor property.

{
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "name": "e2e-02",
  "projectType": "application",
  "sourceRoot": "apps/e2e-02/src",
  "targets": {
    "e2e": {
      "executor": "@nx/playwright:playwright",
      "options": {
        "skipInstall": true,
        "output": "{workspaceRoot}/playwright-report/{projectName}",
        "config": "{projectRoot}/playwright.config.ts"
      }
    }
  }
}

The command to execute the tests with Playwright is:

CURRENTS_RECORD_KEY=recordkey \
CURRENTS_PROJECT_ID=projectid \
CURRENTS_CI_BUILD_ID=`date +%s` \
nx run-many -t e2e  --parallel=2 --verbose

This will create a run execution in Currents reporting the tests results.

Using --last-failed flag

For executing only the failed tests according to a previous run, add the --last-failed flag to the execution command.

CURRENTS_RECORD_KEY=recordkey \
CURRENTS_PROJECT_ID=projectid \
CURRENTS_CI_BUILD_ID=`date +%s` \
nx run-many -t e2e  --parallel=2 --verbose --last-failed

For a more detailed explanation on last failed CI setup, see here

Orchestration in a single project

It is possible to orchestrate the Playwright tests in a single nx project by using the same ci-build-id across multiple machines.

This is showcased in the e2e-03 nx project and the project.json file is slightly different than for the other projects.

{
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "name": "e2e-03",
  "projectType": "application",
  "sourceRoot": "apps/e2e-03/src",
  "targets": {
    "or8n-discover": {
      "executor": "nx:run-commands",
      "options": {
        "cwd": "apps/e2e-03",
        "commands": [
          {
            "command": "npx pwc-p discover --pwc-discovery-file tests.txt"
          }
        ]
      }
    },
    "or8n": {
      "executor": "nx:run-commands",
      "options": {
        "cwd": "apps/e2e-03",
        "commands": [
          {
            "command": "npx pwc-p run"
          }
        ]
      }
    }
  }
}

Key differences with other nx projects in the example repository:

• executor property has the value nx:run-commands.

• A command property is added within options. This executes npx pwc-p run for orchestration. See Orchestration Setup.

• Reporter config in playwright.config file is not needed

• Orchestration runs the full suite by default — use or8n-discover first to filter tests

To locally execute orchestration nx project:

CURRENTS_RECORD_KEY=recordkey \
CURRENTS_PROJECT_ID=projectid \
CURRENTS_CI_BUILD_ID=unique-id \
nx run-many -t or8n

Or with discovery (for filtered runs):

CURRENTS_RECORD_KEY=recordkey \
CURRENTS_PROJECT_ID=projectid \
CURRENTS_CI_BUILD_ID=unique-id \
nx run-many -t or8n-discover -- --grep @smoke && nx run-many -t or8n -- --pwc-discovery-file tests.txt

name: Run or8n Tests

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
  workflow_dispatch:

jobs:
  e2e_tests:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        shard: [1, 2, 3]

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Install Dependencies
        run: npm install

      - name: Reset NX
        run: npx nx reset

      - name: Run All E2E Tests
        env:
          CURRENTS_PROJECT_ID: ${{secrets.CURRENTS_PROJECT_ID}}
          CURRENTS_RECORD_KEY: ${{secrets.CURRENTS_RECORD_KEY}}
          CURRENTS_CI_BUILD_ID: ${{ github.run_id }}-${{ github.sha }}
        run: npx nx run-many -t or8n