Playwright Angular Schematic

Adds Playwright Test to your Angular project

Installation

Run the following to add Playwright to your Angular project

ng add playwright-ng-schematics

Once installed, you can run the tests

npm run e2e

Usage

Run tests

You can also use the Angular CLI ng to run your tests

ng e2e

Some command-line interface options are available; such as UI mode

ng e2e --ui

For a list of accepted arguments, use ng e2e --help. If you need more options and control on the CLI, the best solution is to use npx playwright test directly.

Start an Angular development server

If a devServerTarget option is specified, the builder will launch an Angular server and will automatically set the PLAYWRIGHT_TEST_BASE_URL environment variable.

        "e2e": {
          "builder": "playwright-ng-schematics:playwright",
          "options": {
            "devServerTarget": "my-app:serve",
            "ui": true
          },
          "configurations": {
            "production": {
              "devServerTarget": "my-app:serve:production"
            }
          }
        }

You still can make use of Playwright's baseURL option and mix it with PLAYWRIGHT_TEST_BASE_URL env variable.
The example below shows projects using PLAYWRIGHT_TEST_BASE_URL (set by devServerTarget) or another base URL.

  // ...
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'], baseURL: process.env['PLAYWRIGHT_TEST_BASE_URL'] },
    },

    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'], baseURL: 'http://example.com' },
    },
  ]

Create a test file

Create a new empty test

ng generate playwright-ng-schematics:e2e "<TestName>"

Migrate from Protractor

Read the Migrating from Protractor guide on the official Playwright website.

Contribute

• Small, incremental changes are easier to review.
• Conventional Commits. NO EMOJI

License

This project is licensed under an Apache-2.0 license.