NX Playwright integration as a package in mono repo

This post is intended for people who are having trouble integrating Playwright e2e as a separate package within the NX mono repository.

Naturally, one way to handle this is to have a playwright in its own package and package.json file and node_modules inside that specific folder, but doing so eliminates the node_modules centralization within a mono repository. ... a few more benefits that the NX mono repository offers.

Version

• NX <= 17
• Playwright <= 1.45

Context

NX provide a plugin called as @nx/playwright using it commands we can create a e2e app automatically, unfortunately This is not a case for NX-17

Here is the solution which worked for me

Setting up playwright E2E as NX mono repo package
We took the following actions to integrate playwright as an NX package because the @nx/playwright plugin, which is available to set the e2e folder within an NX mono repository, did not function well with the way the project was currently built up.

Final Folder structure : /apps/<e2e-package-name>

STEP -1 Run command below commands

1. npm install playwright --save-dev
2. npx playwright install
3. npm i -D @playwright/test

STEP -2 create a folder and files

1. create a folder apps/<e2e-package-name>
2. create apps/<e2e-package-name>/tests folder and add below file as example.spec.ts

import { test, expect } from '@playwright/test';

test('page has title', async ({ page }) => {
  await page.goto('http://goolee.com');
  await expect(page).toHaveTitle(/Google/);
});

• create <e2e-package-name>/playwright.config.ts

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests', // Directory for test files
  fullyParallel: true,
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
//  webServer: {
//    command: 'npx nx serve my-app', // Command to start the app
//    url: 'http://localhost:8765',
//    timeout: 120 * 1000,
//    reuseExistingServer: !process.env.CI,
//  },
});

STEP -3 setup command to execute

• create a <e2e-package-name>/project.json

{
    "name": "`<e2e-package-name>`",
    "root": "apps/`<e2e-package-name>`",
    "sourceRoot": "apps/`<e2e-package-name>`/src",
    "projectType": "application",
    "targets": {
      "e2e": {
        "executor": "nx:run-commands",
        "options": {
          "command": "npx playwright test",
          "forwardAllArgs": true
        }
      }
    }
  }

STEP - 4 Run the command to execute e2e from Root directory

• npx nx run :e2e OR
• npx nx run :e2e --headed

Please note

• Replace the URL in example.spec.ts it will work on local / eternal website.
• Also replace <e2e-package-name> with your package name to make all the step executable.