Playwright Architecture & Setup
Playwright is Microsoft's modern browser automation library that has quickly become the industry's preferred alternative to Selenium for new projects. It supports Chromium, Firefox, and WebKit (Safari) with a single API, has built-in auto-waiting, and handles modern web patterns (Single Page Apps, shadow DOM, iframes) far more elegantly than Selenium. It's the default choice for new E2E frameworks at companies like Microsoft, GitHub, and Shopify.
Why Playwright Over Selenium for New Projects
- Auto-Wait: Playwright automatically waits for elements to be actionable before interacting — no explicit wait code needed for 90% of cases
- Multi-Browser: Single API for Chromium, Firefox, and WebKit (Safari) — no driver management
- Isolation: Each test gets a fresh browser context (incognito mode equivalent) — true test isolation by default
- Network Interception: Built-in request/response mocking without third-party libraries
- Modern App Support: Handles shadow DOM, web components, and SPAs better than Selenium
- Trace Viewer: Built-in time-travel debugger — replay any test failure as a video with full DOM snapshots
- API Testing: Playwright can also test REST APIs in the same test suite alongside browser tests
Playwright Setup and First Test
# ══════════════════════════════════════════════════════════════
# SETUP
# ══════════════════════════════════════════════════════════════
# npm init -y
# npm install -D @playwright/test
# npx playwright install ← downloads Chromium, Firefox, WebKit
# Example: playwright.config.ts
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
testDir: './tests',
timeout: 30000, // 30s per test (default)
expect: { timeout: 5000 }, // 5s for expect assertions
fullyParallel: true, // Run all tests in parallel
retries: 2, // Retry failed tests 2 times (CI)
reporter: 'html', // HTML report at playwright-report/
use: {
baseURL: 'https://staging.myapp.com',
screenshot: 'only-on-failure', // Auto-capture on failure
video: 'retain-on-failure', // Record video on failure
trace: 'on-first-retry', // Trace on first retry
},
projects: [
{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },
{ name: 'firefox', use: { ...devices['Desktop Firefox'] } },
{ name: 'webkit', use: { ...devices['Desktop Safari'] } },
{ name: 'Mobile', use: { ...devices['iPhone 13'] } }, // Mobile emulation
],
});
// ── FIRST PLAYWRIGHT TEST ─────────────────────────────────────
// tests/login.spec.ts
import { test, expect } from '@playwright/test';
test.describe('Authentication', () => {
test('login with valid credentials navigates to dashboard', async ({ page }) => {
// Navigate
await page.goto('/login');
// Fill form — Playwright auto-waits for elements to be ready
await page.fill('[data-testid="email-input"]', 'alice@test.com');
await page.fill('[data-testid="password-input"]', 'Test@1234');
await page.click('[data-testid="login-btn"]');
// Assert — no explicit waits needed; Playwright handles it
await expect(page).toHaveURL(/.*dashboard/);
await expect(page.locator('.welcome-message')).toContainText('Welcome, Alice');
});
test('shows error for invalid credentials', async ({ page }) => {
await page.goto('/login');
await page.fill('#email', 'wrong@test.com');
await page.fill('#password', 'wrongpass');
await page.click('button[type="submit"]');
// Assert error message appears
await expect(page.locator('.error-toast')).toBeVisible();
await expect(page.locator('.error-toast')).toHaveText('Invalid email or password');
// Verify still on login page
await expect(page).toHaveURL(/.*login/);
});
});
// Run with: npx playwright test
// Show report: npx playwright show-reportCommon Mistakes
- Adding explicit waits unnecessarily — Playwright's auto-wait handles 90% of timing issues; adding await page.waitForTimeout(2000) defeats the purpose
- Not using data-testid attributes — Playwright recommends role-based or data-testid locators over CSS class names
- Running tests sequentially — Playwright is built for parallelism; fullyParallel: true dramatically speeds up large test suites
- Ignoring the trace viewer — Playwright's trace viewer is the fastest way to debug failures; always enable 'on-first-retry' in CI
Tip
Tip
Practice Playwright Architecture Setup in small, isolated examples before integrating into larger projects. Breaking concepts into small experiments builds genuine understanding faster than reading alone.
Write test first → make it pass → clean up → repeat
Practice Task
Note
Practice Task — (1) Write a working example of Playwright Architecture Setup from scratch without looking at notes. (2) Modify it to handle an edge case (empty input, null value, or error state). (3) Share your solution in the Priygop community for feedback.
Quick Quiz
Common Mistake
Warning
A common mistake with Playwright Architecture Setup is skipping edge case testing — empty inputs, null values, and unexpected data types. Always validate boundary conditions to write robust, production-ready software testing code.
Key Takeaways
- Playwright is Microsoft's modern browser automation library that has quickly become the industry's preferred alternative to Selenium for new projects.
- Auto-Wait: Playwright automatically waits for elements to be actionable before interacting — no explicit wait code needed for 90% of cases
- Multi-Browser: Single API for Chromium, Firefox, and WebKit (Safari) — no driver management
- Isolation: Each test gets a fresh browser context (incognito mode equivalent) — true test isolation by default