Adds Playwright Test to your Angular project

• Installs Playwright Test
• Set up ng e2e for you
• Adds configuration to angular.json for easy integration into your existing project
• ng generate e2e tests

Run the following to add Playwright to your Angular project. ng add will pick the correct version of this schematic automatically

ng add playwright-ng-schematics

Once installed, you can run the tests

npm run e2e

Angular 18+

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

ng e2e

You can use almost the same command-line interface options that exist for Playwright (see Playwright Docs or use ng e2e --help), such as UI mode

ng e2e --ui # or npm run e2e -- --ui

To specify particular test files, usually done like this npx playwright test tests/todo-page/ tests/landing-page/, you have to prepend the --files argument.

ng e2e --files tests/todo-page/ --files tests/landing-page/

The -c option is used to choose an Angular configuration. If you also want to specify a Playwright configuration, use --config instead.

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 new empty test

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

or with CLI prompt of the name

ng generate playwright-ng-schematics:e2e

Still using Protractor ?

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

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

This project is licensed under an Apache-2.0 license.