Playwright Fundamentals

Learning objectives#

• Install Playwright and run tests
• Understand browsers, contexts and pages
• Use codegen to explore locators
• Debug with UI mode and traces

Explanation#

npm init playwright@latest scaffolds a project with config, example tests and browsers (Chromium, Firefox, WebKit).

Each test gets a fresh browser context — like a new incognito profile — so tests never share cookies or storage.

Actions auto-wait for elements to be visible, enabled and stable, removing most manual waits.

npx playwright codegen records actions into code; --ui and traces let you step through failures.

Code example: Search journey#

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

3test('customer can search and open a product', async ({ page }) => {
4  await page.goto('/');
5  await page.getByRole('searchbox', { name: 'Search' }).fill('laptop');
6  await page.keyboard.press('Enter');
7

8  const firstResult = page.getByTestId('result').first();
9  await expect(firstResult).toBeVisible();
10  await firstResult.click();
11

12  await expect(page.getByRole('heading', { level: 1 })).toContainText('Laptop');
13  await expect(page.getByRole('button', { name: 'Add to cart' })).toBeEnabled();
14});
15

16// npx playwright test --project=chromium      npx playwright test --ui      npx playwright show-report

  ✓  [chromium] › search.spec.ts:3:5 › customer can search and open a product (2.1s)
  1 passed (3.0s)

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. baseURL in the config lets page.goto("/") work.
2. Role-based locators find elements like a user would.
3. Each action and expect auto-waits.
4. The HTML report shows steps, screenshots and traces.

Real-world use case#

Common mistakes#

Best practices#

• Set baseURL in config
• Use role and test-id locators
• Turn on traces for retries
• Run tests in parallel

Remember this#

Practice exercise#

1npx playwright test -g "search"

Mini quiz#

Want more? Practise all Automation Testing MCQs · Automation Testing interview questions

Related topics#

My notes#

Saved in this browser.