Vitest Browser Mode: Executing Tests in Real Chromium, Firefox, and WebKit Engines
Running unit and component tests inside native browsers via Playwright and WebSockets.
Part 9 in Series — Catch up on the previous article: Snapshot Testing Engine: AST Serializers, File Formatting, and Inline Snapshots (Part 8) before diving into this post.
Simulated DOM environments like jsdom or happy-dom implement browser APIs in JavaScript. However, they cannot render layout geometry, calculate CSS Computed Styles, or execute native Canvas/WebGL pipelines.
Vitest Browser Mode runs unit and component tests inside real browser instances (Chromium, Firefox, WebKit) using Playwright or WebDriver.
// vitest.config.ts for Browser Mode
import { defineConfig } from 'vitest/config';
export default defineConfig({
test: {
browser: {
enabled: true,
name: 'chromium', // 'chromium' | 'firefox' | 'webkit'
provider: 'playwright',
headless: true,
},
},
});
How Browser Mode Works Under the Hood
+-------------------------------------------------------------+
| Vitest Runner |
+-------------------------------------------------------------+
|
WebSocket Protocol (BiDirectional)
|
v
+-------------------------------------------------------------+
| Playwright Browser Instance |
| - Real V8 / JavaScriptCore Engine |
| - Real CSS Layout & Render Tree Engine |
| - Real WebGL, Canvas, and IndexedDB |
+-------------------------------------------------------------+
Tests run inside a real iframe served by Vite’s dev server, giving you true browser native debugging with Chrome DevTools.
Part 10: In-Source Testing & Zero-Overhead Production Dead Code Elimination
Continue to Part 10 →