Looking for a way to run your Playwright specs with Angular CLI?
Here's how:
Install a module to run a command after the CLI serves your project:
npm i -D @dot-build/serve-and-run-angular
In your angular.json
, create a new entry for Playwright. This assumes your project already has another target you use for local development, which runs with ng serve
, and that your project name is my-project
.
// ...
"projects": {
"my-project": {
// ...
"architect": {
"playwright": {
"builder": "@dot-build/serve-and-run-angular:run",
"options": {
"devServerTarget": "my-project:serve",
"command": "npm",
"args": ["run", "playwright"]
},
"configurations": {
"production": {}
}
},
// ...
Now you go to package.json
and create new scripts that will run Playwright specs and your project together:
// ...
"scripts": {
"e2e": "ng run my-project:playwright",
// or whatever command you use for run Playwright here
"playwright": "npx playwright test"
// ...
}
Now, you can set up Playwright in your project following their documentation.
If you want to watch file changes and keep executing the specs, you can pass --watch
to the Angular CLI.
Example: ng run my-project:playwright --watch
That's all I have for today!
Happy coding!
Top comments (0)