企业官网建设流程全解析

大家好，我是陪你系统复习的老周。

前面讲了测试基础认知、用例设计方法、缺陷管理，今天进入实战篇——Web 功能测试。很多刚入行的同学拿到一个页面不知道从哪下手测，东点一下西点一下，漏测一堆；已经入行的同学呢，测了几年还是"点点点"，没有体系。

今天给你一份从页面导航到兼容性的完整测试清单，新人照着做不遗漏，老人用它查漏补缺打磨深度。

一、Web功能测试是什么？

Web 功能测试就是验证网页的每个功能是否按照需求正常工作。核心思路是：把页面拆成一个个可测的元素和交互，逐个验证。

一个典型的 Web 页面包含这些可测对象：

• 导航栏、菜单、链接
• 按钮、表单、输入框
• 下拉框、复选框、单选框
• 搜索、分页、排序
• 文件上传下载
• 弹窗、提示信息

二、页面功能测试点清单

导航与链接：

• 每个导航菜单能否正确跳转到对应页面
• 面包屑导航是否准确
• 页面内锚点链接是否定位正确
• 外部链接是否在新标签页打开
• 失效链接是否有友好提示（404 页面）

按钮：

• 按钮点击后是否触发正确操作
• 按钮状态（可点/不可点/加载中）是否正确
• 重复快速点击是否会重复提交
• 按钮文案是否与操作一致

搜索与筛选：

• 输入关键词能否正确搜索
• 空关键词搜索是否有提示
• 特殊字符、超长字符串搜索是否正常
• 多条件组合筛选结果是否正确
• 搜索结果分页、排序是否正常

上传下载：

• 支持的文件格式能否正常上传
• 不支持的格式是否有明确提示
• 大文件上传是否有进度条和超时处理
• 下载的文件内容是否正确、能否正常打开
• 文件名含中文/特殊字符是否正常

三、表单怎么测（最容易出Bug的地方）

表单是 Web 测试的重中之重，几乎所有 Bug 都藏在这里。

输入框测试点：

• 必填项为空时提交，是否有校验提示
• 输入合法数据能否正常提交
• 输入边界值（最小长度-1、最小长度、最大长度、最大长度+1）
• 输入特殊字符（<script>alert(1)</script>测 XSS、SQL 注入字符' or 1=1--）
• 输入前后空格是否自动 trim
• 粘贴超长文本是否截断或报错

下拉框/复选框/单选框：

• 下拉选项是否完整、默认值是否正确
• 必选下拉未选时提交是否校验
• 复选框全选/反选/取消是否正常
• 单选框能否切换、是否互斥
• 动态联动下拉（选省份后加载城市）是否正确

表单提交：

• 提交成功后是否有成功提示、是否跳转或清空
• 提交失败时已填数据是否保留（不要让用户重填）
• 网络异常时提交是否有友好提示
• 重复提交（双击提交按钮、刷新页面）是否产生重复数据

四、兼容性测试

同一个页面在不同环境下可能表现完全不同。

浏览器兼容性：

• 主流浏览器：Chrome、Firefox、Safari、Edge
• 国内特殊：360 浏览器、QQ 浏览器（双核模式）
• 重点检查：CSS 样式错乱、JS 报错、布局错位

分辨率与响应式：

• 常见分辨率：1920×1080、1366×768、移动端 375×667
• 缩放浏览器窗口，布局是否自适应
• 横向滚动条是否异常出现
• 小屏幕下内容是否被遮挡

操作系统：

• Windows / macOS 字体渲染差异
• 移动端 iOS / Android 触摸交互

五、易用性测试

功能正常不代表好用。易用性关注用户体验：

• 操作流程是否符合用户习惯（如登录后跳首页还是来源页）
• 错误提示是否清晰、告诉用户怎么改
• 按钮位置是否合理、是否容易误点
• 加载慢时是否有 loading 动画，不让用户以为卡死
• Tab 键切换焦点顺序是否合理
• 快捷键支持（如 Enter 提交表单）

六、常见Web缺陷清单

七、实战案例：登录功能完整测试点

以最常见的登录功能为例，展示完整的测试思路：

正常场景：

• 正确的用户名+密码，登录成功跳转首页
• 记住密码功能，下次自动填充

异常场景：

• 用户名或密码为空，提示"请输入用户名/密码"
• 用户名正确、密码错误，提示"用户名或密码错误"
• 用户名不存在，提示同上（不要提示"用户名不存在"，防止枚举）
• 密码连续错误 N 次，锁定账号或出验证码
• 验证码错误/过期，提示并刷新

安全场景：

• 密码输入框是否为密文（type=password）
• 登录请求中密码是否加密传输
• 退出登录后浏览器后退能否回到登录后页面
• SQL 注入测试：用户名输入' or '1'='1
• XSS 测试：用户名输入<script>alert(1)</script>

性能与体验：

• 登录响应时间是否可接受（一般 < 2 秒）
• 登录失败后密码框是否清空、用户名是否保留
• 登录中按钮是否置灰，防止重复提交

经验总结

给新人的建议：

• 拿到页面先画思维导图，把所有可测元素列出来再逐个测，不要凭感觉点
• 边界值和异常场景是 Bug 高发区，正常流程反而不容易出问题
• 每个输入框都问自己：空了会怎样？超长会怎样？特殊字符会怎样？
• 测完一个功能写测试用例，下次回归直接用

给老人的进阶点：

• 从"功能对不对"升级到"用户体验好不好"，关注易用性和性能
• 学习接口测试配合 Web 测试，前后端问题快速定位（后面会讲）
• 建立自动化回归用例，把重复的功能测试自动化（Selenium/Playwright）
• 关注安全测试基础（XSS、CSRF、越权），这是测试岗的加分项

口诀

Web测试拆元素，导航按钮和表单； 输入框测空边界，特殊字符不能忘； 下拉复选和单选，联动校验要测全； 兼容性看浏览器，分辨率下查错乱； 重复提交防重复，权限越权是红线； 正常异常加安全，登录功能是样板。

Web 功能测试的核心就是拆解+穷尽+边界。把页面拆成最小可测单元，每个单元覆盖正常、异常、边界、安全四类场景，基本就不会漏测。

下周二我们讲接口测试——HTTP 协议、Postman 实战、接口异常怎么定位，这是测试工程师从手工走向自动化的关键一步，敬请关注。

如果这篇对你有帮助，欢迎点赞、收藏、关注，咱们每周二四六一篇测试实战，新人打基础、老人磨实战。

#软件测试 #测试工程师 #Web测试 #功能测试 #兼容性测试 #测试用例 #手工测试 #软件测试入门