前端自动化测试实战：Vitest单元测试与Playwright端到端测试配置

前端项目缺少自动化测试，回归全靠手工点页面，改一个公共组件要全量回归一遍。Vitest定位单元测试与组件测试，Playwright负责端到端流程验证，两者组合可以覆盖从函数逻辑到用户操作链的完整测试层次。本文给出从零配置到落地的完整方案。

Vitest单元测试：组件与逻辑层快速验证

Vitest兼容Jest的API，基于Vite构建，配置极轻。测试重点是纯函数、状态管理和组件渲染结果。以Vue3项目为例，安装vitest、@vue/test-utils后，在vite.config.ts加入test配置，测试文件与被测模块放同一目录的__tests__下：

// 一个表单校验函数的单元测试
import { describe, it, expect } from 'vitest'
import { validatePassword } from '@/utils/validate'

describe('validatePassword', () => {
  it('长度不足时返回错误', () => {
    expect(validatePassword('abc').ok).toBe(false)
  })
  it('缺少数字时返回错误', () => {
    expect(validatePassword('abcdefgh').ok).toBe(false)
  })
  it('合法密码通过校验', () => {
    expect(validatePassword('Abcdef12').ok).toBe(true)
  })
})

组件测试用mount挂载组件，断言渲染结果和事件触发。注意组件测试不是端到端测试，不要在里面验证路由跳转和真实请求，接口用mock统一拦截，保证测试稳定快速。

Playwright端到端测试：关键链路自动化

Playwright在真实浏览器里驱动页面，支持Chromium、Firefox、WebKit。安装后先写配置文件，指定测试目录、baseURL和浏览器项目：

// playwright.config.ts
import { defineConfig } from '@playwright/test'

export default defineConfig({
  testDir: './e2e',
  timeout: 30000,
  use: {
    baseURL: 'http://localhost:5173',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  projects: [
    { name: 'chromium', use: { browserName: 'chromium' } },
  ],
})

典型用例：登录、列表加载、下单支付完整流程。用page.goto访问页面，用getByRole/getByPlaceholder定位元素，断言用expect(locator).toBeVisible()等自动等待断言，避免手工sleep：

test('用户登录后进入工作台', async ({ page }) => {
  await page.goto('/login')
  await page.getByPlaceholder('请输入账号').fill('admin')
  await page.getByPlaceholder('请输入密码').fill('admin123')
  await page.getByRole('button', { name: '登 录' }).click()
  await expect(page.getByText('工作台')).toBeVisible()
})

Playwright的自动等待是最大优势：默认等待元素可交互再操作，网络空闲判断后断言，测试不会因为渲染时序产生偶发失败。

测试分层与执行策略

测试金字塔在前端同样适用：单元测试覆盖率和执行速度最优，写业务核心函数和纯逻辑；组件测试覆盖组件渲染与内部状态；端到端测试覆盖关键用户链路，数量控制在20条以内。CI中单元测试在push阶段执行，端到端在构建完成后跑，用playwright install自动下载浏览器。本地跑watch模式频繁回归，CI用npx playwright test –workers=2控制并发。

Mock策略与测试数据管理

前端测试最大的痛点是不稳定，根源在接口和系统时间。所有网络请求统一走MSW或Vitest的vi.mock拦截，返回固定fixture数据；日期、随机数这类不确定输入在测试里固定注入；涉及上传下载的用例，用Playwright的page.route拦截响应。测试数据放fixtures目录，按场景分文件，命名与接口一一对应，避免用例之间共享可变数据造成串扰。