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!