DEV Community

Darlan Alves
Darlan Alves

Posted on • Edited on

5

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
Enter fullscreen mode Exit fullscreen mode

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": {}
          }
        },
// ...
Enter fullscreen mode Exit fullscreen mode

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"
  // ...
}

Enter fullscreen mode Exit fullscreen mode

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!

AWS Q Developer image

Your AI Code Assistant

Ask anything about your entire project, code and get answers and even architecture diagrams. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Start free in your IDE

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay