返回 Bug 管理与缺陷分析
Main Track / Tutorial 06

Web 功能测试实战教程

不只检查按钮能不能点,还要验证浏览器中的交互、请求、状态、权限与后端数据共同完成正确业务。

9 个章节商城 Web 全流程页面 + 请求 + 数据
01

建立 Web 功能测试模型

用户看到的是整条链路
一次下单跨越多个验证面
页面交互输入与反馈
浏览器状态Cookie 与缓存
HTTP 请求参数与响应
业务数据订单与库存

每次操作至少问四件事

  • 操作前:用户、数据和页面处于什么状态?
  • 操作中:控件是否可用,重复操作会怎样?
  • 操作后:页面提示、跳转和展示是否正确?
  • 系统侧:请求、业务码和关键数据是否一致?
页面显示“成功”不是终点。创建订单接口即使返回 HTTP 200,也要继续核对业务码、订单状态、金额与库存。
02

从登录表单练输入与提交

字段规则 + 组合状态

登录表单测试点

对象覆盖角度当……时,……用例
账号空值、格式、长度、前后空格、大小写当账号为空时,页面提示必填且不发送登录请求
密码空值、边界长度、可见切换、粘贴当密码错误时,页面提示安全且不暴露账号状态
验证码过期、错误、重复使用、刷新当验证码过期时,登录失败并允许重新获取
提交回车、双击、加载中、超时当连续点击登录时,只发出一次有效请求

可执行步骤

  1. 记录字段必填、格式、长度和默认值。
  2. 用等价类与边界值准备输入。
  3. 组合账号、密码、验证码的合法与非法状态。
  4. 使用点击、回车和重复点击提交。
  5. 核对错误定位、已填内容保留和请求是否发送。
03

测试商品列表、搜索和分页

结果集必须稳定一致
列表结果由四个条件共同决定
查询词搜什么
筛选保留什么
排序先显示什么
分页本页显示什么

列表类页面检查

功能重点用例示例
搜索精确、模糊、空词、特殊字符当搜索不存在的商品时,展示空状态而不是旧结果
筛选单选、组合、重置、无结果当价格与品牌组合筛选时,结果同时满足两个条件
排序升降序、相同值、空值当按价格升序时,同价商品分页间不重复丢失
分页首页、末页、页大小、数据变化当删除末页最后一条数据时,回到有效页码
分页正确不只看页码。要验证总数、页大小、排序稳定性,以及翻页时没有重复和遗漏。
04

验证登录、下单、支付、退款主流程

主路径与异常路径
商城核心交易流程
登录建立身份
下单锁定价格库存
支付确认资金结果
退款回退资金与状态

主路径

  • 当账号有效时,登录成功并回到原访问页。
  • 当库存充足时,提交后生成一笔金额正确的订单。
  • 当支付成功时,订单更新并可以查看支付记录。
  • 当满足退款条件时,退款申请成功并展示进度。

异常路径

  • 当登录过期时,下单被拦截并可恢复操作。
  • 当库存刚好被抢完时,不创建无效订单。
  • 当支付超时时,不把未知结果展示为失败并允许重复扣款。
  • 当重复退款时,只保留一笔有效申请。
05

验证页面、接口和数据权限

隐藏按钮不等于安全
权限必须贯穿三层
页面入口只展示可用操作
接口鉴权拒绝伪造请求
数据隔离只能访问授权记录
审计记录关键操作可追溯

越权测试步骤

  1. 准备用户 A 和用户 B,并分别创建订单。
  2. 用 A 登录并正常打开自己的订单。
  3. 把 URL 或请求中的订单 ID 换成 B 的订单。
  4. 确认页面拒绝、接口拒绝且不返回 B 的数据。
  5. 检查日志是否记录越权尝试,数据没有被修改。

关键用例

  • 当游客访问订单详情时,系统要求登录且不泄露订单摘要。
  • 当用户 A 请求用户 B 的订单时,系统拒绝并返回安全提示。
  • 当普通用户伪造客服退款操作时,接口拒绝且订单不变。
06

测试上传、下载、链接和跳转

文件也有业务边界

退款凭证与下载测试

对象测试点预期
上传类型允许图片,拒绝脚本与伪装扩展名前后端都校验,提示明确
上传大小0 B、上限内、等于上限、超过上限边界规则一致,不残留半文件
文件名中文、空格、超长、特殊字符安全保存与显示,不产生路径穿越
下载权限、名称、类型、内容完整性仅授权用户可下载正确文件
跳转站内、支付沙箱、返回地址目标正确,失败可回到安全页面
上传测试只能使用无害测试文件。不要上传真实恶意程序,也不要在没有授权的环境做攻击性验证。
07

处理刷新、前进后退和缓存

浏览器状态会改变结果
同一页面可能同时存在多份状态
服务端订单真实状态
页面内存当前交互状态
本地存储登录与购物车
浏览器缓存资源与响应

容易遗漏的浏览器行为

  • 当刷新订单确认页时,不重复创建订单。
  • 当支付后点击后退时,不回到可再次支付的旧状态。
  • 当退出登录时,前进后退不能看到敏感订单内容。
  • 当商品价格更新时,刷新后展示新价格,提交以服务端校验为准。
  • 当多标签页同时退款时,状态能同步或明确提示冲突。
08

使用 DevTools 定位页面问题

从现象到证据

四个常用面板

面板检查内容适合定位
Elements元素状态、禁用属性、错误提示按钮看似禁用但仍能触发
Network方法、参数、响应、Timing页面失败究竟有没有请求
Console脚本错误与警告点击后前端异常中断
ApplicationCookie、Storage、缓存登录态、购物车或旧资源异常

定位“提交订单无反应”

  1. 打开 Network 和 Console,清空本轮记录。
  2. 点击一次提交并确认按钮状态。
  3. 没有请求时检查表单校验与 Console。
  4. 有请求时检查方法、参数、HTTP 状态与业务码。
  5. 记录 request_id,再核对订单和库存数据。
  6. 用同一证据链编写缺陷,不凭页面现象归因。
09

完成一次 Web 商城回归

按真实工作执行

练习

  1. 准备游客、普通用户 A、用户 B 和客服四种身份。
  2. 按“当……时,……”格式编写 12 条用例。
  3. 覆盖登录表单、商品搜索、分页和下单。
  4. 覆盖重复支付、退款、越权与浏览器前进后退。
  5. 选择一个失败场景,用 DevTools 建立证据链。
  6. 输出通过、失败、阻塞和剩余风险。

页面

  • 控件状态正确
  • 边界提示明确
  • 跳转路径正确
  • 刷新后状态合理

业务

  • 主流程闭环
  • 异常可恢复
  • 权限不越界
  • 重复操作幂等

证据

  • 请求可追踪
  • 业务结果已核对
  • 数据一致
  • 缺陷可复现