Run Your First Playwright Test — Navigate & Assert Title

1. Anatomy of a Playwright test

• Every test lives inside a test('description', async ({ page }) => { ... }) block.
• page is a fixture that represents a browser tab.

2. Step 1 — Create the spec file

Inside the tests/ folder create first-test.spec.ts.

3. Step 2 — Write the test

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

test('homepage has the right title', async ({ page }) => {
  await page.goto('https://playwright.dev');
  await expect(page).toHaveTitle(/Playwright/);
});

4. Step 3 — Run it

npx playwright test first-test --headed

You should see a Chromium window open, navigate, and close within ~3 seconds.

5. Step 4 — Read the report

npx playwright show-report

Opens an HTML report with timeline, trace, and screenshots.

6. Common mistakes

• Forgetting await before page.goto — the assertion runs before navigation completes.
• Hard-coded sleeps instead of auto-waiting — use Playwright's built-in retries.

7. Hands-on task

Change the URL to https://softwaretestpilot.com and assert the title contains "SoftwareTestPilot".

await page.goto('https://softwaretestpilot.com');
await expect(page).toHaveTitle(/SoftwareTestPilot/);

8. What's next

Continue to Module 01 / Lab 4: Read a failing test with the trace viewer.