前言：前端学习测试的1天
一、测试用例
-
理解透彻需求：
「吃透需求」是写用例的第一前提、需求是测试用例的唯一依据，测试用例的本质，是验证功能是否符合需求。 -
什么是测试用例，他是用来做什么的？
描述：为验证功能是否符合需求，设计的一套「可执行、可复现、可追溯」的标准化检查清单
做什么（专业）：全场景覆盖，避免漏测 、可复用、可回归，降低迭代成本 、明确责任归属，高效定位问题 、可追溯、可审计，符合质量体系
做什么（个人）：按前端、后端问题分类、按功能是否异常或缺失、后期方便其他人参照测试用测测试或迭代开发
-
测试用例-企业标准版，纯界面测试功能是否异常的记录
-
给我们前端同学的补充说明
日常写功能时，脑子里的「检查步骤」，整理成文档就是测试用例；
专业测试的用例，会覆盖你前端代码的所有逻辑（参数校验、异常处理、页面渲染等），提前对齐用例，能避免上线前被卡 bug；
接口测试用例、UI 测试用例是两类核心用例，分别对应后端逻辑和前端逻辑，是定位前后端问题的核心依据。
二、浏览器抓包自测
-
使用场景：
（个人）前端 / 测试人员排查接口问题【接口是否请求、请求是否响应正确、响应不正确时检查传参是否正确，传参正确接口响应异常，后端问题反馈...】
（专业）
1.看接口是否成功发出（前端是否触发请求）
2.看接口传参是否正确（前端传参格式、内容是否符合要求）
3.看接口响应是否正确（后端返回状态码、业务逻辑、数据是否符合预期）
4.看界面最终展示是否正确（前端是否正确处理后端返回，渲染页面 / 提示）
-
如何打开抓包？
打开浏览器开发者工具（F12 / 右键检查）→ 切换到 Network 面板 → 勾选 Preserve log（保留日志）→ 点击 Fetch/XHR 过滤接口
补充说明：勾选Preserve log：防止页面跳转清空日志，避免漏抓请求【例如：跳转页面或刷新时需要保留之前的接口请求不消失，必须勾选】
勾选Fetch/XHR过滤：只看接口，不被 CSS/JS/ 图片等静态资源干扰
-
前端抓包进阶技巧（对标专业测试）
1.复制 cURL 命令：右键接口 → Copy → Copy as cURL (base)，直接粘贴到 Postman/Apifox，1:1 复现接口请求，请求不成功可让后端排查
2.精准过滤接口：在 Filter 输入框输入接口关键词（如login/api），只看目标接口，避免被其他请求干扰
3.禁用缓存排查：勾选「Disable cache」，强制刷新页面，排查缓存导致的接口异常
4.查看请求发起源：点击「Initiator」标签，定位是哪行前端代码触发的请求，快速定位 bug 位置
补充说明两种 cURL 到底有什么区别？
copy as cURL (base)
= 通用版 / Mac / Linux / 在线接口工具 用的格式干净、不带系统特殊符号，跨平台通用。
copy as cURL (cmd)
= Windows 老式 cmd 终端 专用版里面加了很多 Windows 才能识别的符号，不能直接用在在线工具。