Getting Started with Playwright 🎭

The Story of Your New Superpower

Imagine you’re a detective. Your job? Make sure websites work perfectly before real people use them. But checking every button, every form, every page… by hand? That would take forever!

Enter Playwright — your robot assistant that clicks, types, and checks websites automatically. It’s like having a tireless helper who never sleeps and never makes mistakes.

What is Playwright?

Think of Playwright like a remote-controlled robot that can browse websites just like you do.

graph TD
    A[You Write Instructions] --> B[Playwright Reads Them]
    B --> C[Robot Opens Browser]
    C --> D[Robot Clicks & Types]
    D --> E[Robot Checks Everything]
    E --> F[Robot Reports Back]

Simple Example:

You tell Playwright: “Go to Google, type ‘puppies’, click search.”

Playwright does exactly that — in Chrome, Firefox, AND Safari — all at once!

Real Life Uses:

• 🛒 Check if “Add to Cart” button works
• 🔐 Test if login page accepts correct passwords
• 📱 Make sure website looks good on phones

Why “Playwright”?

A playwright writes scripts for actors. You write scripts, browsers act them out!

Playwright vs Selenium 🥊

Let’s compare two popular testing tools.

The Key Difference

Selenium is like an older, experienced worker — reliable but sometimes slow.

Playwright is the new kid who learned from Selenium’s mistakes. It waits automatically when pages load. No more “element not found” errors!

// Playwright auto-waits!
await page.click('button');

// Selenium needs manual waits
driver.wait(until.elementIsVisible(button));
driver.click(button);

Playwright vs Cypress 🆚

Both are modern testing tools. Here’s how they differ:

When to Choose What?

Pick Playwright if:

• You need all browsers
• You use Python or .NET
• You test apps with popups/tabs

Pick Cypress if:

• You only test in Chrome
• You want built-in dashboard
• Your team knows only JavaScript

Installing Playwright 📦

This is the fun part! Just ONE command does everything.

Step 1: Make Sure You Have Node.js

Open your terminal and type:

node --version

You should see something like v18.0.0. If not, download Node.js first!

Step 2: Create Your Project

mkdir my-first-tests
cd my-first-tests
npm init -y

Step 3: Install Playwright

npm init playwright@latest

Magic happens! This command:

• ✅ Downloads Playwright
• ✅ Downloads browsers (Chrome, Firefox, Safari)
• ✅ Creates example tests
• ✅ Sets up config file

What You’ll See

The installer asks a few questions:

? Do you want TypeScript? (Y/n)
? Where to put tests? (tests)
? Add GitHub Actions? (y/N)

Just press Enter to accept defaults!

Playwright CLI Commands ⌨️

The CLI (Command Line Interface) is your control panel. Here are the essential commands:

🏃 Running Tests

# Run all tests
npx playwright test

# Run one test file
npx playwright test login.spec.ts

# Run in headed mode (see browser)
npx playwright test --headed

🌐 Browser Selection

# Only Chrome
npx playwright test --project=chromium

# Only Firefox
npx playwright test --project=firefox

# Only Safari
npx playwright test --project=webkit

🛠️ Helpful Tools

# Open Test Generator (records clicks!)
npx playwright codegen google.com

# Show test report
npx playwright show-report

# Update browsers
npx playwright install

🐛 Debugging

# Debug mode (step through tests)
npx playwright test --debug

# See trace of failed test
npx playwright show-trace trace.zip

Project Structure Setup 📁

After installation, your folder looks like this:

my-first-tests/
├── tests/
│   └── example.spec.ts    ← Your tests live here
├── tests-examples/
│   └── demo-todo-app.spec.ts
├── playwright.config.ts   ← Settings file
├── package.json
└── package-lock.json

graph TD
    A[my-first-tests] --> B[tests/]
    A --> C[playwright.config.ts]
    A --> D[package.json]
    B --> E[example.spec.ts]
    B --> F[login.spec.ts]
    B --> G[cart.spec.ts]

Organizing Tests

As your project grows, organize like this:

tests/
├── auth/
│   ├── login.spec.ts
│   └── signup.spec.ts
├── shopping/
│   ├── cart.spec.ts
│   └── checkout.spec.ts
└── common/
    └── helpers.ts

Pro Tip: Keep related tests together in folders!

playwright.config.ts File ⚙️

This file is the brain of your testing setup. It tells Playwright HOW to run tests.

Basic Structure

import { defineConfig } from '@playwright/test';

export default defineConfig({
  // Where are your tests?
  testDir: './tests',

  // Run tests in parallel
  fullyParallel: true,

  // Retry failed tests
  retries: 2,

  // How many tests at once
  workers: 4,
});

Important Settings Explained

Browser Configuration

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: { browserName: 'chromium' },
    },
    {
      name: 'firefox',
      use: { browserName: 'firefox' },
    },
    {
      name: 'webkit',
      use: { browserName: 'webkit' },
    },
  ],
});

Adding Base URL

export default defineConfig({
  use: {
    baseURL: 'https://mywebsite.com',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },
});

Now page.goto('/') goes to https://mywebsite.com/!

Your First Test 🎉

Let’s write a real test! Create tests/first.spec.ts:

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

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

  // Check the title
  await expect(page).toHaveTitle(/Playwright/);
});

Run it:

npx playwright test first.spec.ts

✅ Congratulations! You just ran your first Playwright test!

Quick Recap 🎯

What’s Next? 🚀

You now have Playwright installed and understand the basics. Next, you’ll learn:

• Writing more complex tests
• Finding elements on pages
• Handling forms and buttons
• Taking screenshots

Remember: Every expert was once a beginner. You’ve taken the first step! 🌟