https://github.com/jfgreffier/playwright-ng-schematics
Adds Playwright Test to your Angular project
https://github.com/jfgreffier/playwright-ng-schematics
Last synced: about 21 hours ago
JSON representation
Adds Playwright Test to your Angular project
- Host: GitHub
- URL: https://github.com/jfgreffier/playwright-ng-schematics
- Owner: playwright-community
- License: apache-2.0
- Created: 2024-07-01T17:41:52.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-07T16:08:17.000Z (about 1 year ago)
- Last Synced: 2024-10-07T16:10:12.419Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/playwright-ng-schematics
- Size: 507 KB
- Stars: 8
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-playwright - Playwright Angular Schematic - Adds Playwright Test to your Angular project. (Integrations)
- awesome-angular - playwright-ng-schematics - Adds Playwright Test to your Angular project. (Testing / E2E)
- fucking-awesome-angular - playwright-ng-schematics - Adds Playwright Test to your Angular project. (Testing / E2E)
README
# Playwright Angular Schematic
[](https://www.npmjs.com/package/playwright-ng-schematics)
[](https://playwright.dev/)
[](https://github.com/mxschmitt/awesome-playwright)
Adds [Playwright Test](https://playwright.dev/) 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
## Installation
Run the following to add Playwright to your Angular project. `ng add` will pick the correct version of this schematic automatically
```bash
ng add playwright-ng-schematics
```
Once installed, you can run the tests
```bash
npm run e2e
```
## Requirements
Angular 18+
## Usage
### Run tests
You can also use the Angular CLI `ng` to run your tests
```bash
ng e2e
```
You can use almost the same command-line interface options that exist for Playwright (see [Playwright Docs](https://playwright.dev/docs/test-cli) or use `ng e2e --help`), such as UI mode
```bash
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.
```bash
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.
### 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.
```json title="angular.json"
"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.
```ts title="playwright.config.ts"
// ...
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
```bash
ng generate playwright-ng-schematics:e2e ""
```
or with CLI prompt of the name
```bash
ng generate playwright-ng-schematics:e2e
```
## Migrating from Protractor
Still using Protractor ?
Read the [Migrating from Protractor](https://playwright.dev/docs/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.