【前端+Vitest测试框架】Vitest | Playwright | WebdriverIO | Preview

Vitest 是测试运行器跑单元/组件测试Playwright / WebdriverIO 是浏览器自动化框架做 E2E/组件测试preview 只是 Vitest 浏览器模式里的一个“简易预览提供者”。下面逐个讲再对比区别。一、各自是什么1. Vitest定位Vite 原生的单元/组件测试运行器主打快、ESM 友好、和 Vite 共享配置。环境默认Node jsdom模拟浏览器跑单元测试、组件测试。新增browser 模式真实浏览器跑测试需要指定 providerpreview/playwright/webdriverio。典型场景开发时跑组件/工具函数测试速度快、反馈快。2. Playwright微软定位现代 E2E 组件测试框架自带浏览器驱动内置 Chromium/Firefox/WebKit。特点自动等待、内置截图/录屏、trace 回放稳定性高。可独立用也可作为Vitest browser 模式的 provider。典型场景端到端全流程测试、跨浏览器兼容。3. WebdriverIO定位基于WebDriver 标准协议的E2E/组件测试框架生态成熟、插件多。特点兼容所有 WebDriver 浏览器含 IE支持移动端Appium。可独立用也可作为Vitest browser 模式的 provider。典型场景传统项目、需要兼容旧浏览器/移动端。4. Preview 模式Vitest 内置定位Vitest browser 模式的简易预览 provider非完整自动化框架。特点仅用于本地开发预览打开真实浏览器看测试运行。不支持 headless、多浏览器实例、CDP 高级控制不能用于 CI。典型场景本地调试组件测试快速看一眼真实浏览器效果。二、核心区别一句话版Vitest测试运行器负责“跑测试”默认模拟浏览器快browser 模式需依赖 Playwright/WebdriverIO/preview 提供真实浏览器环境。Playwright全能浏览器自动化独立 E2E/组件测试也可给 Vitest 当“浏览器驱动”现代、稳定、跨浏览器。WebdriverIO标准协议自动化生态强、兼容广含旧浏览器/移动端也可给 Vitest 当驱动。PreviewVitest 专属简易预览仅本地用无高级自动化不能上 CI。三、详细对比表维度VitestPlaywrightWebdriverIOPreviewVitest核心角色测试运行器单元/组件浏览器自动化E2E/组件浏览器自动化E2E/组件Vitest 浏览器预览 provider是否独立框架✅ 独立主跑单元✅ 独立E2E/组件✅ 独立E2E/组件❌ 依附 Vitest真实浏览器默认否jsdombrowser 模式是✅ 是自带驱动✅ 是WebDriver 协议✅ 是仅本地Headless 支持依赖 provider✅ 内置✅ 支持❌ 不支持跨浏览器依赖 provider✅ Chromium/Firefox/WebKit✅ 所有 WebDriver 浏览器❌ 单浏览器移动端支持❌❌✅ Appium❌CI 可用✅用 Playwright/WebdriverIO✅✅❌速度⚡️ 最快jsdom快内置驱动中等协议层快仅预览最佳场景开发时单元/组件测试E2E、跨浏览器、现代项目旧浏览器、移动端、传统项目本地调试组件测试四、常见组合怎么选纯单元/组件快Vitest jsdom默认。组件测试真实浏览器CI 可用Vitest Playwright推荐。组件测试兼容旧浏览器/移动端Vitest WebdriverIO。本地快速预览调试Vitest preview仅开发。独立 E2E直接用Playwright或WebdriverIO。