Skip to main content

Playwright in Angular Projects – Complete Guide

1. What is Playwright?​

Playwright is a modern end-to-end testing framework developed by Microsoft.
It automates browsers via the Chrome DevTools Protocol (CDP) and other browser APIs, with native support for:

  • Chromium (Chrome, Edge)
  • Firefox
  • WebKit (Safari engine)

It can run tests headless (no visible browser) or headed (browser UI visible), and supports parallel execution, mobile emulation, and API testing.

2. Why Use Playwright?​

Benefits:​

  • True cross-browser testing (including Safari via WebKit, which Cypress doesn’t support).
  • Auto-waiting: No more manual wait calls; Playwright waits for elements to be ready.
  • Isolated browser contexts: Tests don’t interfere with each other.
  • Fast execution with parallel test runners.
  • Built-in tracing: You can replay tests with screenshots, network logs, console logs.
  • Single API for multiple languages (JavaScript/TypeScript, Python, Java, C#).

3. When to Choose Playwright​

  • You must support multiple browsers, especially Safari/WebKit.
  • You want reliable automation that’s less flaky than Selenium/WebDriver.
  • You’re running tests in CI/CD pipelines and need speed.
  • You also need API-level tests alongside UI tests.
  • You want built-in test recording to bootstrap test writing.

4. How to Use Playwright in Angular​

Step 1 – Install Playwright​

ng add playwright-ng-schematics

This will:

  • Install @playwright/test.
  • Create a playwright.config.ts.
  • Set up the e2e target in angular.json.
  • Install browser binaries (Chromium, Firefox, WebKit).

If you want to install manually:

npm install -D @playwright/test
npx playwright install

Step 2 – Understand Project Structure​

After adding Playwright, you’ll see:

e2e/
  example.spec.ts      # Sample test
  playwright.config.ts # Config file

Step 3 – Writing a Test​

Example (e2e/app.spec.ts):

import { test, expect } from '@playwright/test';

test('homepage has title', async ({ page }) => {
  await page.goto('http://localhost:4200');
  await expect(page).toHaveTitle(/My Angular App/i);
});

Step 4 – Running Tests​

Run via Angular CLI:

ng e2e

Or directly:

npx playwright test

Run in headed mode (see browser UI):

npx playwright test --headed

Run a single file:

npx playwright test e2e/app.spec.ts

Step 5 – Debugging & Tracing​

Run with debug mode:

npx playwright test --debug

Enable tracing in config:

use: {
  trace: 'on-first-retry',
},

View trace:

npx playwright show-trace trace.zip

Step 6 – Angular-Specific Tips​

  • Serve your app before testing
    Playwright doesn’t auto-serve Angular apps. You can:

    • Start Angular dev server in one terminal: 
      ng serve
    • Run Playwright in another terminal: 
      npx playwright test
    • Or configure angular.json so ng e2e starts both.

  • Test Angular routes by navigating directly:

    await page.goto('http://localhost:4200/dashboard');

  • Handle Angular async data: Playwright auto-waits for elements, so you usually don’t need waitFor unless waiting for non-DOM events.

5. Playwright CLI Commands​

CommandDescription
npx playwright testRun tests
npx playwright codegen <url>Record actions and generate code
npx playwright installInstall browsers
npx playwright show-traceView a recorded trace
npx playwright test --project=webkitRun only on WebKit

6. When Playwright Might Not Be Ideal​

  • If you need a visual interactive runner (Cypress offers a better GUI).
  • If your team is already deeply invested in WebDriver-based infrastructure.
  • If you only test Chrome/Chromium (Puppeteer may be simpler).

7. Summary​

Playwright is a fast, reliable, cross-browser E2E tool that works great with Angular, especially if you care about Safari/WebKit coverage and flaky-test reduction.