Using Browser Mode | Skills Pool

Skill-Datei

Using Browser Mode

Set up Vitest browser mode with Playwright or WebDriverIO providers, use page and userEvent APIs, test components. Use when testing browser-specific code or UI components.

djankies0 Sterne25.11.2025

Beruf
Kategorien: Testing

Skill-Inhalt

This skill teaches Vitest browser mode setup, configuration, and testing patterns.

Browser Mode Overview

Browser mode runs tests in actual browsers instead of Node.js environments, enabling:

Real browser APIs (DOM, fetch, localStorage, etc.)
Visual regression testing
Component testing with real rendering
User interaction testing

Provider Packages

Vitest 4.x requires separate provider packages:

Playwright Provider (Recommended)

npm install -D vitest @vitest/browser-playwright

Use when: Need Chromium, Firefox, and WebKit support with modern APIs

WebDriverIO Provider

Verwandte Skills

npm install -D vitest @vitest/browser-webdriverio

npm install -D vitest @vitest/browser-preview

import { defineConfig } from 'vitest/config';
import { playwright } from '@vitest/browser-playwright';

export default defineConfig({
  test: {
    browser: {
      enabled: true,
      provider: playwright(),
      instances: [{ browser: 'chromium' }],
      headless: true,
    },
  },
});