Why Playwright + Vitest is the Future of Web Testing

Cypress had its moment. Selenium still works. But if you're starting a new project today and choosing a web testing stack, the combination of Playwright + Vitest deserves serious attention.

Here's why this pairing is becoming the go-to for modern frontend teams.

What Playwright Gets Right (That Cypress Doesn't)

1. True Multi-Browser Support

Playwright runs against Chromium, Firefox, and WebKit (Safari engine) out of the box. Cypress's Firefox support is limited and WebKit support arrived only recently — and only on paid plans.

# Run against all browsers in one command
npx playwright test --project=chromium --project=firefox --project=webkit

2. No iframe or Multi-Tab Restrictions

Cypress notoriously struggles with iframes and multiple tabs. Playwright handles both natively:

// Switch to a new tab
const [newPage] = await Promise.all([
  context.waitForEvent('page'),
  page.click('a[target="_blank"]')
]);
await newPage.waitForLoadState();
await expect(newPage).toHaveURL(/dashboard/);

3. Auto-Waiting That Actually Works

Playwright waits for elements to be visible, stable, and actionable before interacting — no waitFor, sleep, or arbitrary delays needed in 99% of cases.

// This just works — no manual wait needed
await page.click('button[data-testid="submit"]');
await expect(page.locator('.success-toast')).toBeVisible();

Where Vitest Comes In

Vitest is a unit/integration test runner built on Vite. It's fast (native ESM, no transpilation overhead), Jest-compatible, and pairs naturally with modern React/Vue/Svelte setups.

The key insight: you don't need two separate test tools anymore.

Vitest     → Unit tests, component tests, integration tests
Playwright → E2E tests, visual regression, multi-browser

Both use a similar API surface. Your team learns one pattern for assertions, mocking, and setup — and applies it across both layers.

// Vitest unit test
import { describe, it, expect } from 'vitest'
import { formatDate } from './utils'

describe('formatDate', () => {
  it('formats ISO string to readable date', () => {
    expect(formatDate('2024-01-15')).toBe('Jan 15, 2024')
  })
})

// Playwright E2E test — same `expect` API
import { test, expect } from '@playwright/test'

test('shows formatted date on dashboard', async ({ page }) => {
  await page.goto('/dashboard')
  await expect(page.locator('.date-display')).toContainText('Jan 15, 2024')
})

Component Testing: Where They Overlap Nicely

Playwright now has an experimental Component Testing mode for React, Vue, and Svelte. It lets you test components in a real browser — not jsdom — which catches rendering bugs that unit tests miss.

// playwright/ct — component test
import { test, expect } from '@playwright/experimental-ct-react'
import { Button } from './Button'

test('renders disabled state correctly', async ({ mount }) => {
  const component = await mount(<Button disabled label="Submit" />)
  await expect(component).toBeDisabled()
  await expect(component).toHaveCSS('opacity', '0.5')
})

This is the gap Vitest's jsdom environment can't fully cover — and Playwright fills it.

The Setup (Minimal)

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install -D vitest @testing-library/react
npm install -D @playwright/test
npx playwright install

vitest.config.ts

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './src/test/setup.ts',
  },
})

playwright.config.ts

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

export default defineConfig({
  testDir: './e2e',
  use: { baseURL: 'http://localhost:5173' },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
  ],
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:5173',
    reuseExistingServer: !process.env.CI,
  },
})

Is This Stack Perfect?

No. Fair criticisms:

Playwright's learning curve is steeper than Cypress for beginners
Component testing is still experimental and occasionally rough
Vitest's ecosystem is younger than Jest's — some plugins and matchers lag behind
Debugging Playwright failures locally is less visual than Cypress's time-travel debugger (though Trace Viewer closes this gap significantly) Use this stack when: you're on a modern Vite-based project, your team is comfortable with TypeScript, and you need real multi-browser coverage.

Written by Yash| Senior SDET catching failures other layers miss — cross-validating UI, API, DB simultaneously and test infrastructure.

推荐订阅源

DEV Community