我的B端提升之旅

二、Web 前端页面专项测试能力（重中之重，拉开普通测试差距）

1）页面基础交互测试>>需要挨个搜如何测试、测试常见的坑

• 表单：必填校验、长度限制、特殊字符、重复提交、输入框禁用 / 只读、日期控件联动
• 列表：分页、筛选、排序、模糊搜索、批量操作、数据勾选、无数据空状态
• 弹窗：弹窗层级、遮罩、ESC 关闭、点击空白关闭、弹窗嵌套、表单缓存
• 导入 / 导出：超大文件、异常格式文件、空文件、并发导出、导出数据一致性
• 路由：页面刷新、浏览器前进后退、菜单权限、非法 URL 直接访问

2）浏览器兼容测试

Chrome、Edge、Firefox；区分样式错乱、JS 功能失效、布局自适应问题

3）前端缓存问题排查>>session\token 相关问题熟记

LocalStorage、SessionStorage、Cookie；清理缓存后页面数据异常、老数据残留

4）异步渲染场景（面试高频！Web 自动化最容易踩坑）>>阿里的那个支付

接口异步加载、表格延迟渲染、查询防抖、页面加载骨架屏；

 

现象：元素还没渲染完成就操作，偶现操作失效、数据展示空白

5）UI 视觉测试

布局对齐、字体样式、颜色、按钮状态（正常 / 置灰 / 加载中）

三、抓包 & 前端调试能力（必掌握，简历重点写）

1. 浏览器 F12 Developer Tools（核心工具）

• Elements：查看元素 id/class、定位信息、样式排查
• Network：查看请求 URL、请求方式、Header、入参、响应 JSON、接口报错 400/504/403、超时请求
• Console：捕获 JS 报错、前端脚本异常
• Application：Cookie、缓存存储查看

2. 抓包工具 >>这个需要尝试一下
    Charles / Fiddler：修改请求参数、模拟弱网、阻断接口、篡改返回数据、跨域问题复现
3. 网络场景测试：弱网、断网、网络切换、接口超时、重复请求

四、配套服务端 & 数据能力（Web 测试离不开，你已有基础）

1. 接口基础认知：HTTP/HTTPS、GET/POST、状态码、请求头、Token 鉴权
2. 接口测试：Postman 调试，复制前端请求独立测试边界、越权场景
3. MySQL 数据库能力
    多表联查、GROUP BY、HAVING、窗口函数；核对页面展示数据和数据库真实数据一致性
    排查：统计报表错误、数据新增 / 更新不生效、历史数据堆积、分页统计数量不一致
4. 权限测试（B 端后台超级高频）
    RBAC 角色权限、菜单权限、数据权限；水平越权、垂直越权测试

五、Linux 日志排查（必备）

使用 grep、tail、less 检索服务日志；

 页面报错时，根据接口返回的错误信息，去服务器查询后端堆栈，区分前端问题 / 服务端异常。

六、Web 自动化能力（主攻提升方向）

定位：能维护、新增用例、独立排查脚本失败，不用从零开发大型框架

1. 技术栈：Python + Pytest + Playwright（优先）/ Selenium
2. 核心知识点

• 元素定位：xpath、css 选择器（重点！）
• 等待机制：强制 sleep❌、显式等待 WebDriverWait✅（解决偶现找不到元素）
• 常见难点：iframe 内嵌页面、弹窗、新标签页、异步加载、文件上传
• 异常处理：try-except 捕获报错、截图保存失败用例
• 测试报告、用例数据分离（csv/json）

3. 实战目标：搭建一套 Web 后台自动化回归套件，覆盖核心业务流程

七、专项测试加分能力（面试亮点，选择性深耕）

1. 性能基础
    Lighthouse 检测页面加载性能；JMeter 简单接口并发、压测；区分页面慢是前端渲染慢还是后端接口响应慢
2. 安全基础
    XSS 简单注入、URL 越权、敏感信息明文展示、Token 过期处理
3. 兼容性拓展：H5 页面在不同移动端浏览器适配

　　

测试主要考虑几个方面：交互性等等

问题积累

1. B 端后台报表页面，筛选之后列表数据和底部统计数量对不上。通过 F12 查看接口返回值，确认后端统计 SQL 未过滤已删除数据，再用 MySQL 核对数据库原始数据，定位 SQL 缺少 where 条件。

2. 前端缺少防重复提交机制：按钮没有置灰、没有节流限制；容易造成重复创建订单、重复入库。

3. 前端缺少交互友好性：没有 loading 加载动画、没有超时兜底提示；弱网场景用户会以为页面卡死，反复点击。