Playwright + Angular CLI

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!