企业官网建设流程全解析

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。

三、详细对比表

四、常见组合怎么选

1. 纯单元/组件（快）：Vitest + jsdom（默认）。
2. 组件测试（真实浏览器，CI 可用）：Vitest + Playwright（推荐）。
3. 组件测试（兼容旧浏览器/移动端）：Vitest + WebdriverIO。
4. 本地快速预览调试：Vitest + preview（仅开发）。
5. 独立 E2E：直接用Playwright或WebdriverIO。