"Playwright Series #1: What Is Playwright and Why It Beats Everything Else"

The Playwright Series

This is the first post in a hands-on, zero-to-production Playwright series. Each post builds on the previous one. By the end you'll have a complete, production-grade test automation framework.

Here's the full roadmap:

1. What Is Playwright and Why It Beats Everything Else ← you are here
2. Your First Playwright Test — Browsers, Pages and Navigation
3. Locators — The Right Way to Find Elements
4. Assertions — Expect, Soft Assertions and Custom Matchers
5. Page Object Model — Structuring Tests for Scale
6. Network Interception and API Mocking
7. Authentication — Sessions, Storage State and Multi-User Testing
8. Visual Testing — Screenshots and Pixel-Perfect Comparisons
9. Parallel Execution, Sharding and Reporting
10. CI/CD Integration — GitLab, GitHub Actions and Docker

What Is Playwright?

Playwright is an open-source browser automation framework built by Microsoft. It lets you write tests that control a real browser — clicking buttons, filling forms, navigating pages — exactly as a real user would.

What separates Playwright from everything that came before it:

• All browsers, one API — Chromium, Firefox and WebKit (Safari engine) from a single test file
• Auto-waiting — no more sleep(2000) hacks; Playwright waits for elements to be ready before acting
• Network interception — intercept, modify or mock any HTTP request from your tests
• Parallel by default — tests run in parallel across multiple workers out of the box
• Tracing — record a full video, screenshot timeline and network log of every test run

Why Not Selenium?

Selenium is 20 years old. It works, but it was designed in an era of synchronous web apps. You feel that age:

Why Not Cypress?

Cypress solved many Selenium problems but introduced its own constraints:

• No multi-tab support — Playwright handles multiple tabs and windows natively
• No cross-browser — Cypress only supports Chromium-based browsers and Firefox (no Safari)
• No multi-domain — Cypress historically struggled with navigating across different origins in one test
• JavaScript only — Playwright supports TypeScript, JavaScript, Python, Java and C#

Why Not WebdriverIO?

WebdriverIO is excellent and worth learning, but Playwright wins on:

• Simpler setup (no separate driver management)
• Better auto-waiting implementation
• Native trace viewer
• Faster test execution

Installing Playwright

You need Node.js 18 or higher. Check your version:

node --version
# should output v18.x.x or higher

Create a new project and run the Playwright installer:

mkdir my-playwright-project
cd my-playwright-project
npm init -y
npm init playwright@latest

The installer asks a few questions:

✔ Do you want to use TypeScript or JavaScript? › TypeScript
✔ Where to put your end-to-end tests? › tests
✔ Add a GitHub Actions workflow? › false  (we'll cover CI in Part 10)
✔ Install Playwright browsers? › true

Say yes to installing browsers. This downloads Chromium, Firefox and WebKit — about 300MB total. Only needed once per machine.

What Got Created

After installation your project looks like this:

my-playwright-project/
├── tests/
│   └── example.spec.ts      ← sample test Playwright generates
├── playwright.config.ts      ← all configuration lives here
├── package.json
└── node_modules/

Your First Look at playwright.config.ts

Open playwright.config.ts. The defaults are sensible, but let's understand the key parts:

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

export default defineConfig({
  // Where your test files live
  testDir: './tests',

  // Run tests in parallel
  fullyParallel: true,

  // Retry failed tests once in CI
  retries: process.env.CI ? 1 : 0,

  // Number of parallel workers
  workers: process.env.CI ? 2 : undefined,

  // Test timeout (30 seconds per test)
  timeout: 30_000,

  // Reporter — list in dev, HTML report in CI
  reporter: [['list'], ['html', { open: 'never' }]],

  use: {
    // Base URL so you can write await page.goto('/login') instead of full URL
    baseURL: 'http://localhost:3000',

    // Capture trace on first retry
    trace: 'on-first-retry',

    // Take screenshot on failure
    screenshot: 'only-on-failure',
  },

  // Run tests against these browsers
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox',  use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit',   use: { ...devices['Desktop Safari'] } },
  ],
});

Running the Sample Test

Run the sample test Playwright generated:

npx playwright test

You'll see output like:

Running 6 tests using 6 workers

  ✓  tests/example.spec.ts:3:5 › has title (1.2s)
  ✓  tests/example.spec.ts:3:5 › has title (chromium) (1.2s)
  ✓  tests/example.spec.ts:3:5 › has title (firefox) (1.8s)
  ✓  tests/example.spec.ts:3:5 › has title (webkit) (2.1s)
  ...

6 passed (5.3s)

All three browsers. No setup. No driver management. It just works.

Viewing the HTML Report

After the run, open the HTML report:

npx playwright show-report

This opens a browser with a full breakdown of every test, browser, timing and any screenshots.

The Playwright VS Code Extension

If you use VS Code, install the official Playwright extension:

1. Open Extensions (Cmd+Shift+X / Ctrl+Shift+X)
2. Search Playwright Test for VSCode (Microsoft)
3. Install

The extension gives you:

• Run/debug individual tests with a click
• Built-in test recorder (generate test code by clicking through a page)
• Inline test results

Useful CLI Commands to Know

# Run all tests
npx playwright test

# Run a specific file
npx playwright test tests/login.spec.ts

# Run tests matching a name pattern
npx playwright test --grep "checkout"

# Run only on one browser
npx playwright test --project=chromium

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

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

# Open the interactive UI mode
npx playwright test --ui

# Generate a test by recording clicks
npx playwright codegen https://example.com

--ui mode is particularly useful — it's an interactive test runner that shows you the browser, lets you filter and rerun tests, and updates in real time as you save files.

What's Next

In Part 2 we write our first real test from scratch — navigating to a page, interacting with elements, and making assertions. We'll also understand the anatomy of a test file and how test, expect and page work together.

The code from this series is buildable step by step — each part adds to the previous one.