DEV Community

Alex Spinov
Alex Spinov

Posted on

Playwright Has a Free Testing Framework That Tests 3 Browsers at Once — Auto-Wait, Trace Viewer, Codegen

#testing #webdev #playwright #automation

The E2E Testing Problem

Cypress: only Chrome (until recently). Selenium: slow and flaky. Both: managing waits and timeouts is painful.

Playwright tests Chrome, Firefox, and WebKit in parallel. Auto-waits for elements. Built-in trace viewer for debugging.

What Playwright Gives You

Auto-Wait (No More Sleep/waitFor) 

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

test('user can submit form', async ({ page }) => {
  await page.goto('https://myapp.com');
  await page.fill('#email', 'test@example.com');
  await page.fill('#password', 'secret123');
  await page.click('button[type=submit]');

  // Auto-waits for element to appear
  await expect(page.locator('.welcome')).toContainText('Welcome');
});
Enter fullscreen mode Exit fullscreen mode

Playwright auto-waits for elements to be visible, enabled, and stable before acting.

Test Generator 

npx playwright codegen https://myapp.com
Enter fullscreen mode Exit fullscreen mode

Opens a browser. You click around. Playwright generates the test code.

Parallel Across Browsers 

// playwright.config.ts
export default defineConfig({
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
    { name: 'mobile', use: { ...devices['iPhone 14'] } },
  ],
});
Enter fullscreen mode Exit fullscreen mode

One test file → runs on 4 browser configurations in parallel.

API Testing 

test('API returns users', async ({ request }) => {
  const response = await request.get('/api/users');
  expect(response.ok()).toBeTruthy();
  const users = await response.json();
  expect(users.length).toBeGreaterThan(0);
});
Enter fullscreen mode Exit fullscreen mode

Visual Comparisons 

test('homepage matches screenshot', async ({ page }) => {
  await page.goto('https://myapp.com');
  await expect(page).toHaveScreenshot('homepage.png');
});
Enter fullscreen mode Exit fullscreen mode

Trace Viewer 

npx playwright test --trace on
npx playwright show-trace trace.zip
Enter fullscreen mode Exit fullscreen mode

Step-by-step replay with screenshots, DOM snapshots, network logs, and console output.

Authentication State 

// Save auth state once
const context = await browser.newContext({ storageState: 'auth.json' });
// Reuse across all tests — no login per test
Enter fullscreen mode Exit fullscreen mode

Quick Start 

npm init playwright@latest
npx playwright test
Enter fullscreen mode Exit fullscreen mode

Why This Matters

E2E tests shouldn't be flaky. Playwright's auto-wait and multi-browser support mean your tests work the first time, on every browser.

Testing data-driven apps? Check out my web scraping actors on Apify Store — test with real-world data. For custom solutions, email spinov001@gmail.com.

Top comments (0)