When will you use this?

Use when you are ready to put the app online for users or employers to see.

• Shipping means tests pass, build succeeds, and Docker or Azure hosts the static files.
• Companies run CI so broken code never reaches users.

Real-world: cross-browser payment test

Fintech runs Playwright in CI on Chromium, Firefox, WebKit — payment iframe tested in all three.

Production-style code

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

test('UPI payment flow', async ({ page }) => {
  await page.goto('/checkout');
  await page.getByLabel('Amount').fill('500');
  await page.getByRole('button', { name: 'Pay with UPI' }).click();
  await expect(page.getByText('Payment successful')).toBeVisible();
});

What happens in production: Playwright is default for modern cross-browser CI — parallel shards keep pipeline fast.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

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

test('homepage has title', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveTitle(/My App/);
  await page.getByRole('link', { name: 'Login' }).click();
  await expect(page).toHaveURL(/login/);
});

Line-by-line walkthrough

How it works (big picture)

• page.goto navigates.
• getByRole matches RTL-style queries.
• expect auto-waits until condition or timeout.

Do this on your computer

1. npm init playwright@latest
2. Run npx playwright test
3. Add one test per critical flow.
4. Read the real-world section and name which part of the app uses this topic.
5. Run the example locally and confirm the same behavior in the browser.
6. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

• Change text or labels in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error message, then fix it.

Remember

Playwright = multi-browser E2E. Auto-wait reduces flakiness. Good for CI pipelines.

Common questions