web 端页面测试，最常见的是基本控件的测试，只有了解常见的控件和其测试方法，才能掌握测试要点，避免漏测情况发生。根据日常工作总结，将控件和常见逻辑集合在一起，总结了几个控件类测试查场景如下。

导航条

导航描述了用户在一个页面内操作的方式，在不同的用户接口控制之间，例如按钮、对话框、列表和窗口等；或在不同的连接页面之间。导航测试经常考虑如下几点。

1. 导航是否直观，简单明了，直接反应系统的主要功能。
2. 导航的风格与其他菜单，展示等风格是否一致
3. 导航的链接跳转是否正确
4. 导航条 tab 间的来回跳转，是否正确。
5. 链接如果带参数，跳转到不同页面，传递的参数是否正确
6. 导航条之外的公共内容，在导航条不同 tab 内的展示应该保持一致，且功能正确性检查。
7. 不同的导航条达到同样的目的，检查不同导航条跳转过来时内容是否一致。
8. 导航条各级之间有上下级关系时，进入下级页面，再返回，是否能正常返回上级页面。

导航条常见和 URL 跳转检查一起组成一定的功能。除了考虑导航条基本的功能外，还需要检查：

1. 各个导航之间的相互影响，如果两个导航连接使用的 js 模块不一致，涉及到页面加载，页面展示等的检查。
2. 导航条与其他控件组合在一起时，在不同的页面上，看到的导航条是否一致等检查。

输入框

输入框分为文本输入框，数字输入框。一般使用在填写输入的内容上，比如名称，属性等，有新建和编辑类两种。在检查的时候需要关注一些输入框的特性：

1. 输入的字符长度是否符合要求，输入最小长度，最小长度-1，最大长度，最大长度 +1，以及超长的字符检查是否符合预期
2. 输入特殊字符，特别是&、单引号’、空格检查是否能保存。
3. 输入内容前后带空格的，能否自动过滤处理。
4. 不输入内容，保存，是否有错误提醒
5. 输入注入的字符串，比如 null，js 代码，html 代码等，是否能保存。
6. 数字输入框还要检查边界值，负数，分数，非数字，0，科学计数法，字母与数字结合，16 进制，8 进制，货币性输入，小数点位数检查等情况等情况

另外，输入框在逻辑上需要关注以下几点：

1. 信息的唯一性，比如一些名称的检查要求唯一性。
2. 编辑类的输入框，要检查鼠标移出后点击，能否从输入框移出焦点。
3. 有自动带入功能的输入框，要检查自动带入数据的正确性。

按钮

按钮一般用户功能的确认，涉及到功能与 db 等的存储情况是否符合预期。常见测试场景如下：

1. 按钮是否可点，有弹出框的弹出框是否符合预期。
2. 自然状态、鼠标悬浮和按钮按下状态下，按钮的状态
3. 按钮的功能实现是否正常（存储 db，与其他模块交互等是否正常）
4. 按 enter 键操作按钮，功能是否正常。
5. 按 tab 键，能否在不同的按钮或其他控件间切换。
6. 一些按钮只能点击一次的情况，点击一次后，再操作，是否仍能点击。
7. 错误信息提醒是在前端 js 判断，还是后台判断，点击按钮后，提示话术显示正确。
8. 取消功能的按钮，是否能正常关闭页面，取消后回到的页面是否符合预期。

下拉框

下拉框一般多个一起出现，实现筛选功能。需要注意筛选后是否立即生效，以及组合筛选的情况结果是否符合预期。常见测试点如下：

1. 默认显示是否正确，比如有的显示全部，有的默认选中某一项，有的显示 “请选择”
2. 切换 item，下拉框显示项内容和排序是否正确，不同浏览器，下拉框显示是否有变形等。
3. 下拉框中选项超出设定值的，是否有滑动条，上下滑动，还是左右滑动等。
4. 下拉框弹出时，鼠标点击控件外区域/选项/下拉框，下拉框能否收回
5. 当下拉框选项很多时，是否有被底层覆盖的情况，
6. 下拉框数据被存储后，其他地方显示时，传递的数据正确性检查。比如下拉框选项按数字传递，而其他页面显示时应该显示对应的文字。
7. 组合筛选的情况，有级联操作的，只有选择了前一个数据后，才能进行下一个的选择。比如省市之间，只有选择了省份，才能继续选择市，否则市不可选。
8. 组合下拉框实现的筛选功能正确性检查。

下拉框，列表，筛选框等经常一起组成筛选的功能。需要关注以下几点：

1. 选择不同的选项，列表中展示筛选的结果，内容，默认排序等检查。
2. 组合条件时，列表中内容检查。

列表

列表是列表框，主要是较多的同类型数据的展现。列表需要注意数据的全面性，条数，内容正确性等，常见测试点如下：

1. 列表长度，宽度是否合理，如果太长，太宽，有没有竖向和横向滚动条。
2. 列表表头帮助信息是否完整，比如 title 旁边是否有小问号支持。
3. 列表每行每个字段可显示内容多样性检查是否正确。
4. 列表数据为空时，显示是否正确。
5. 列表翻页功能是否正确。
6. 列表列排序功能是否正常。
7. 列表其他附加功能（比如：删除、新增，编辑，下载等）是否正常。
8. 是否有全选功能，全选功能检查
9. 列表和翻页，筛选的组合检查，翻页后，再做筛选，是否会自动跳到第一页。
10. 列表和翻页，排序的组合检查，翻页后，筛选，是否仍是对全部数据的排序。
11. 列表 和翻页的组合检查，翻页后，对页面数据做编辑，是否能保存成功，是否仍停留在当前页。
12. 列表切换的功能检查，比如在列表 1 和列表 2 在同一区域展示，展示 1 时不展示里 2.当在列表 1 编辑物料后，切换到列表 2，再切换回列表 1，检查编辑的物料是否生效。

单选框

单选框实现多个中选择一个的功能，常见测试点如下：

1. 默认是否有选中
2. 是否只能选中一个
3. 选中后的功能是否正确。
4. 与接口交互传递的值正确性检查

复选框

实现多选功能，常见测试点如下：

1. 多个复选框一个都不选
2. 多个复选框全部选中
3. 多个复选框部分被选中
4. 当复选框太多时，是否提供全选和全不选的功能
5. 复选框与其他组合时，比如选中某个复选框，就出现某种效果，检查不同组合时的展示情况。

左右选择框

一些场景，使用左右选择框选择数据，左侧是待选择数据，右侧是已经选择的数据，右侧可删除。常见测试点如下：

1. 左侧数据展示区数据是否符合预期
2. 左侧数据为空时是否展示正确
3. 左侧数据过多时是否有滚动条。
4. 左侧能否展开，展开后显示数据是否正确。首次进入是否展开。
5. 添加左侧数据到右侧后，右侧数据是否默认展开。
6. 添加一条左侧数据到右侧，左侧数据置灰检查，右侧数据正确性检查
7. 添加全部数据到右侧，左侧数据置灰检查，正确性检查。
8. 右侧删除一条数据，左侧对应数据不再置灰，数据正确性检查
9. 右侧删除全部，左侧数据不再置灰，正确性检查
10. 两侧数据是否有个数提示，有的话，添加和删除后，个数提示是否正确。
11. 添加大量数据，确认后，检查处理的速度。

时间框

用于选择时间，有起始时间和结束时间，有的有选择时间的快捷键。

1. 日期选择功能是否正确（包括年、月、日的选择是否正确）
2. 起、止时间选择（起始时间不能晚于结束时间）
3. 年、月、日的时间限制（比如：年-1900 至今，月-1~12，日 - 平月、闰月）
4. 时间框展示在不同浏览器下，不同分辨率是否正确。
5. 时间框快捷操作和左侧选择时间的对应关系检查，比如选择昨天，左侧的时间是否自动选择昨天的日期。
6. 时间框选择时间后，确定，检查传递的值是否正确，尤其检查是否包含当天，比如最近一个月，是否包含今天等。
7. 时间框和筛选框交互，选择时间框后，再选择其他的筛选框，时间框选择的内容应该保持不变。
8. 截止时间不能早于开始时间。
9. 时间框为公用控件时，要考虑当某一处修改时，其他地方是否会受到影响。

树形

用于收起和展开功能。检查点如下：

1. 各层级用不同图标表示，最下层节点无加减号
   
2. 提供全部收起、全部展开功能
   
3. 如有需要提供搜索与右键功能，如提供需有提示信息
   
4. 展开时，内容刷新正常
5. 显示数据的个数是否正确，和数据库中数据做对比。

图表类检查

• 曲线图：

1. 图表的维度符合预期。
2. 图表有时间轴的，检查时间轴的间隔是否符合预期。
3. 某一天无数据，其他天有数据时，图表展示是否正常。
4. 对比曲线图时，一般通过颜色区分不同曲线的意义。
5. 鼠标悬浮到曲线上，能展示当前点的数据。
6. 和时间框组合，选择不同的时间，折线图的数据是否自动变化，且显示正确。
7. 实时折线图，检查实时的数据是否正常展示。

• 圆环图：

环形图一般显示为百分占比，测试点如下：

1. 图的百分比值是否显示正常
2. 图中心显示的数字长度检查，过长是不是能正常显示
3. 非 0 的百分比，环形占比是否符合预期
4. 显示多个项的百分比时，各项的颜色是否与提示一致。
5. 100% 占比和 0% 占比时的显示情况检查。
6. 鼠标浮动到对应项上，是否有浮层提示对应的值，同时检查值是否显示正确。
7. 选择不同的时间框，图形内容是否随时间变化，变化值是否正确。

• 树形图：

1. 树形图展开和关闭是否正常。
2. 树形图展开多层，一屏放不下时，是否有滚动条。
3. 树形图展开多层，是否能全部展开，上下是否显示正常。
4. 树形图无数据时显示情况
5. 只有单层时和多层时的显示情况。
6. 选择不同的时间框，图形内容是否随时间变化，变化值是否正确。

• 地图：

1. 地图中的数据块的数据是否和存储的一致。
2. 鼠标移动到某一块，悬浮层内容显示检查。
3. 选择不同的时间框，图形内容是否随时间变化，变化值是否正确。
4. 地图一般和其他的表格数据配合使用，检查各区域的数据是否和图表中数据一致。
5. 没数据的情况，地域的颜色显示。

• 柱状图：

1. 数据为空时的显示
2. 多个柱状差异比较大时的显示，比如一个数据是 1000，一个时 1，检查页面显示情况。
3. 柱状图的范围区分是否符合预期
4. 鼠标悬浮时，浮层的显示内容检查。选择不同的时间框，图形内容是否随时间变化，变化值是否正确。

文件类

分为文件上传和文件下载，分别如下：

• 文件上传，需要注意以下几点：

1. 文件类型正确、大小合适，是否能正确上传，交互是否正确。
2. 文件类型正确，大小不合适，文件过大，检查处理速度，进度条情况是否符合预期。
3. 上传空文件。
4. 上传超大文件，检查是否能正确处理。
5. 文件类型错误，提示话术是否正确。
6. 上传一个正在使用中的文件
7. 文件名是否可以手工输入，手动输入存在/不存在的文件地址来上传，输入文件名称来上传
   
8. 连续多次选择不同的文件，查看是否上传最后一次选择的文件
9. Excel 文件类型时，表格列数符合要求，表格列数多于期望的列数，少于期望的列数等条件检查。各列的类型符合预期，不符合预期，有空行，有重复字段等检查。

• 文件下载，需要注意以下几点：

1. 右键是否可以正常下载文件
2. 使用工具下载文件，是否可正常下载，保存到本地是否正常显示
3. 对于本机没有安装工具的文件是否能正常打开，能否给出正确提示
4. 对于直接在页面内打开的内容是否能正常显示，页面美观性检查
5. 下载的次数是否会被记录
6. 后台设置了下载权限的文件，是否可以被正常下载

图片类

比如上传，下载图片等，测试点如下：

1. 上传图片，检查文件类型适合与不适合校验。
2. 上传图片，文件大小适合于不适合，空文件校验。
3. 上传正确的符合要求的图片。
4. 上传一个正在使用中的图片（即打开该图片，在上传该图片），上传成功
5. 手动输入存在和不存在的图片地址，上传校验
6. 上传成功，缩略图显示是否正确，上传失败，是否有错误原因提示
7. 二次上传，是否会覆盖上次结果
8. 需要多张图片的，使用同一张图片，是否会提示图片重复
9. 上传时间检查，大图片文件，上传响应时间。
10. 下载图片大小，类型检查。
11. 下载图片是否能正常打开。

URL 检查类

有输入 URL 和 URL 跳转的，注意以下检查点：

1. url 是否与主域一致性的检查。
2. URL 长度限制检查
3. 修改 url 中的 get 参数，检查是否还能抓取成功。
4. URL 的链接是否能到达指定的页面
5. 涉及到一些安全性选择的登录还要在 url 中校验 http 和 https 协议请求是否正常；
6. 涉及到埋点等功能的 url 测试，还要注意点击的方式，比如单击，右键打开，直接输入 url 等方式请求（有些 js 处理的时候可能仅仅调用 onclick 事件） 错误 url 请求页面，校验出错页面是否友好
7. URL 需要拼接的，手动输入部分 URL 和系统自动加的字段形成一个 URL 的，需要检查系统加的字段是否正确，是否需要加密等。

IP 输入框

输入 IP 字段的，四个输入框，共同组成一个 IP：

1. 检查正确的符合格式的 IP
2. 输入错误格式的 IP。
3. 输入的条数是否符合预期
4. 输入重复的 ip
5. 输入带非数字的 IP
6. 一般 IP 都支持，表示任意字符，输入四个

本文首发自 360Qtest 公众号，原作者：杨会会，已获得第三方原创授权
更多精彩，欢迎关注 360Qtest 公众号