Introduction to Playwright

Understand what Playwright is, why it's the future of E2E testing, and set up your first project.

🤔 What is Playwright?

Playwright is an open-source end-to-end testing framework created by Microsoft. It lets you write automation scripts that control a real browser — clicking buttons, filling forms, navigating pages — exactly like a real user would.

💡 Think of it as a robot that can perfectly mimic ANY action a user performs in a browser — and it never gets tired or makes mistakes.

⚔️ Playwright vs The Competition

Feature	🎭 Playwright	Selenium	Cypress
Multi-browser	✅ All 3	✅ All	⚠️ Limited
Auto-wait	✅ Built-in	❌ Manual	✅ Built-in
API Testing	✅ Yes	❌ No	⚠️ Limited
Speed	🚀 Very Fast	🐌 Slow	⚡ Fast
Mobile Emulation	✅ Yes	⚠️ Grid only	❌ No

⚙️ Setting Up Your First Project

Install Node.js

# Download from nodejs.org
node --version # should show v18+

Create a Playwright Project

npm init playwright@latest
# Follow the prompts to set up

Run Your First Test

npx playwright test
npx playwright show-report

🧪 Your First Test Script

example.spec.ts

TypeScript

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

test('has title', async ({ page }) => {
  // Navigate to the page
  await page.goto('https://playwright.dev/');

  // Expect the page title to contain "Playwright"
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Click the "Get started" link
  await page.getByRole('link', { name: 'Get started' }).click();

  // Verify the URL changed
  await expect(page).toHaveURL(/.*intro/);
});

page.goto() navigates the browser to a URL

expect() makes assertions about the page state

getByRole() finds elements by their semantic role

Each test() runs in isolation — no shared state

📝 Module Quiz

Test Your Knowledge

Score 70%+ to advance to the next module

Question 1 of 4

0 answered

Q1. Who created and maintains Playwright?

Q2. Which command installs Playwright browsers during project setup?

Q3. Which browsers does Playwright support out of the box?

Q4. What is the key advantage of Playwright's auto-wait?