This article was originally published on
AIQEAcademy
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:
Feature Selenium Playwright
Auto-waiting ❌ Manual WebDriverWait ✅ Built-in everywhere
Network mocking ❌ Requires proxy setup ✅ Native page.route()
Parallel execution ❌ Grid setup required ✅ Built-in workers
Trace viewer ❌ None ✅ Full timeline recorder
Setup time Hours Minutes
Flakiness High Low
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:
Open Extensions (Cmd+Shift+X / Ctrl+Shift+X)
Search Playwright Test for VSCode (Microsoft)
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.
Read more free tutorials at AIQEAcademy
Top comments (0)