Vitest 是测试运行器（跑单元/组件测试）；Playwright / WebdriverIO 是浏览器自动化框架（做 E2E/组件测试）；preview 只是 Vitest 浏览器模式里的一个"简易预览提供者"。下面逐个讲，再对比区别。
一、各自是什么
1. Vitest
- 定位 ：Vite 原生的单元/组件测试运行器 ，主打快、ESM 友好、和 Vite 共享配置。
- 环境 ：
- 默认：Node + jsdom（模拟浏览器），跑单元测试、组件测试。
- 新增：browser 模式 （真实浏览器跑测试），需要指定 provider：
preview/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 当驱动。
- Preview ：Vitest 专属简易预览 ，仅本地用，无高级自动化，不能上 CI。
三、详细对比表
| 维度 | Vitest | Playwright | WebdriverIO | Preview（Vitest） |
|---|---|---|---|---|
| 核心角色 | 测试运行器（单元/组件） | 浏览器自动化（E2E/组件） | 浏览器自动化（E2E/组件） | Vitest 浏览器预览 provider |
| 是否独立框架 | ✅ 独立（主跑单元） | ✅ 独立（E2E/组件） | ✅ 独立（E2E/组件） | ❌ 依附 Vitest |
| 真实浏览器 | 默认否（jsdom）；browser 模式是 | ✅ 是（自带驱动） | ✅ 是（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。