Angular Academy · Lesson

Writing Playwright Tests

Automate browser flows with Playwright.

Writing Playwright Tests is a free Angular Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Your First Playwright Test

A Playwright test is an async function that receives fixtures like page. You import test and expect from @playwright/test and describe a user scenario.

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

test('opens the home page', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveURL(/.*localhost/);
});

The page Fixture

The page object represents a single browser tab. Every test gets a fresh, isolated page in a clean context, so tests never share cookies or storage by accident.

Navigating with goto

page.goto(url) loads a URL and waits for the page to be ready. Combined with baseURL in config, you can use relative paths.

await page.goto('/login');      // resolves against baseURL
await page.goto('https://example.com'); // absolute also works

Finding Elements with Locators

A locator is a lazy, auto-waiting handle to an element. Prefer semantic locators like getByRole, getByLabel, and getByText over brittle CSS selectors.

const submit = page.getByRole('button', { name: 'Sign in' });
const email = page.getByLabel('Email');

Typing and Clicking

Use fill to set input values and click to press buttons. Playwright auto-waits for elements to be visible and enabled before acting.

await page.getByLabel('Email').fill('ada@example.com');
await page.getByLabel('Password').fill('secret');
await page.getByRole('button', { name: 'Sign in' }).click();

Auto-Waiting Removes Flaky Sleeps

Unlike older tools, Playwright automatically waits for elements and for assertions to become true. You almost never need manual timeouts, which is what makes tests stable.

// No need for: await page.waitForTimeout(2000)
await expect(page.getByText('Welcome back')).toBeVisible();

Grouping Tests with describe

Use test.describe to group related scenarios and share setup with beforeEach.

test.describe('Login flow', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/login');
  });

  test('shows the form', async ({ page }) => {
    await expect(page.getByLabel('Email')).toBeVisible();
  });
});

Testing a Full User Journey

Chain actions to model a complete flow. Each step reads like a script of user behavior.

test('user can log in and see dashboard', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('ada@example.com');
  await page.getByLabel('Password').fill('secret');
  await page.getByRole('button', { name: 'Sign in' }).click();
  await expect(page).toHaveURL(/.*dashboard/);
});

Running the Tests

Run all specs from the CLI. Add --headed to watch the browser, or --ui to open Playwright's interactive test runner.

npx playwright test
npx playwright test --headed
npx playwright test --ui

Debugging Failures

On failure Playwright can capture screenshots, videos, and a trace you replay step-by-step. The trace viewer shows the DOM at every action, making flaky failures easy to diagnose.

npx playwright test --trace on
npx playwright show-trace trace.zip

Test Isolation Matters

Because each test gets its own browser context, do not rely on order or shared state between tests. Set up the data each test needs in its own beforeEach or within the test itself.

Quick Check

Why avoid waitForTimeout?

Recap

A Playwright test uses the page fixture: goto to navigate, semantic locators (getByRole, getByLabel) to find elements, and fill/click to interact. Auto-waiting removes flaky sleeps. Group with describe, run with npx playwright test, and debug with traces.

Frequently asked questions

Is the “Writing Playwright Tests” lesson free?

Yes — the full text of “Writing Playwright Tests” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

What will I learn in “Writing Playwright Tests”?

Automate browser flows with Playwright. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Writing Playwright Tests” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy