一、自动化测试概述：从“手动点”到“自动跑”

大家好，我是你们这门课的主讲人。今天咱们聊聊自动化测试的“第一性原理”。

说实话，我见过太多团队，一上来就铺自动化，结果三个月后全废了。为什么？因为没想清楚“为什么做”和“做什么”。这一章，咱们就把这些底层的逻辑掰扯清楚。

1.1 什么是前端自动化测试？

说白了，就是用代码代替人工，去验证你的页面功能对不对。

你想想看，以前测试一个登录按钮，你得手动打开浏览器，输入账号密码，点一下，看跳转。自动化测试呢？写一段脚本，让它自己跑。跑完告诉你：通过，或者失败。

我个人习惯把自动化测试分成三个层次：

• 单元测试：测一个函数、一个组件。比如“这个加法函数，1+1 是不是等于 2”。
• 集成测试：测几个模块一起工作。比如“点击登录按钮后，API 请求发出去没？状态更新了没？”
• E2E 测试：模拟真实用户操作。比如“从打开页面到登录成功，再到退出，整个流程走一遍”。

嗯，这里要注意：很多人把 E2E 当成万能药，其实不是。后面我会详细讲什么时候该用哪个。

1.2 为什么需要自动化测试？

这个问题，我每次面试都会问。答案五花八门，但核心就三点：

1. 回归测试的噩梦：你改了一行代码，怎么知道没把别的地方搞坏？手动测一遍？累死。自动化跑一遍，5分钟搞定。
2. 人总会犯错：我记得有一次，一个同事手动测试了10遍，结果上线还是漏了一个边界条件。自动化测试不会“手滑”。
3. 快速反馈：代码提交后，自动跑测试。失败了？立刻知道。不用等到第二天才发现。

1.3 自动化测试的 ROI 分析

ROI，投入产出比。很多老板会问：“写测试花时间，值不值？”

我给大家算一笔账：

阶段	手动测试成本	自动化测试成本
第一次编写	低（直接点）	高（写脚本）
第二次回归	中（再点一遍）	低（自动跑）
第十次回归	高（点吐了）	几乎为零

你看，短期看自动化投入大，但长期看，它帮你省的是“人力成本”和“时间成本”。

我曾经在一个项目中，前期花了 30% 的时间写测试。结果后期迭代时，每次改完代码，跑一遍测试，半小时搞定。而隔壁团队手动测，要两天。你说哪个划算？

1.4 常见测试类型详解

单元测试

测最小单元。比如一个工具函数、一个 Vue 组件。

举个例子：

// 一个简单的加法函数
function add(a, b) {
  return a + b;
}

// 单元测试
test('add 1 + 2 应该等于 3', () => {
  expect(add(1, 2)).toBe(3);
});

单元测试跑得最快，定位问题也最准。我习惯在写业务代码之前，先把工具函数的单元测试写好。这叫“测试驱动开发”，后面会细讲。

集成测试

测多个模块的协作。比如“点击按钮 -> 发请求 -> 更新页面”。

你想想看，单元测试只保证每个零件没问题，但零件组装起来呢？可能接口对不上，可能状态没同步。集成测试就是干这个的。

// 集成测试示例：点击登录按钮后，检查 API 是否被调用
test('点击登录按钮，应该调用 login API', async () => {
  render(<LoginPage />);
  fireEvent.click(screen.getByText('登录'));
  expect(mockLoginApi).toHaveBeenCalled();
});

E2E 测试

端到端测试。模拟真实用户，从打开浏览器到关闭。

我建议 E2E 只测核心流程。比如“注册 -> 登录 -> 下单 -> 支付”。别什么都往里塞，否则维护成本会让你崩溃。

// E2E 测试示例（使用 Playwright）
test('用户登录流程', async ({ page }) => {
  await page.goto('https://example.com/login');
  await page.fill('#username', 'testuser');
  await page.fill('#password', 'password123');
  await page.click('button[type="submit"]');
  await expect(page.locator('.welcome')).toHaveText('欢迎回来');
});

1.5 小结

这一章咱们聊了：

• 自动化测试是什么：用代码代替人工验证。
• 为什么需要：回归快、减少人为错误、快速反馈。
• ROI 分析：短期投入大，长期收益高。
• 三种测试类型：单元、集成、E2E，各有各的用处。

下一章，咱们会深入讲“如何搭建一个可维护的测试体系”。到时候我会分享一些我在大厂踩过的坑，保证干货满满。

公众号:蓝海资料掘金营，微信deep3321