Awesome
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.