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.
This skill teaches Vitest browser mode setup, configuration, and testing patterns.
Browser mode runs tests in actual browsers instead of Node.js environments, enabling:
Vitest 4.x requires separate provider packages:
npm install -D vitest @vitest/browser-playwright
Use when: Need Chromium, Firefox, and WebKit support with modern APIs
npm install -D vitest @vitest/browser-webdriverio
Use when: Need broader browser compatibility or existing WebDriverIO infrastructure
npm install -D vitest @vitest/browser-preview
Use when: Local development preview (not recommended for CI)
For detailed provider setup with all options, see references/provider-setup.md
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,
},
},
});