360Qtest专栏 Web 页面测试总结—控件类

阿克萌德 · August 16, 2016 · Last by huis replied at December 06, 2016 · 1796 hits

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公众号

共收到 12 条回复 时间 点赞

很细致 收藏

赞一个👍

赞,已收藏

是个好东西,get

麻竹

赞,正好在各方收集用例集

很细腻,已收藏

很细致,收藏👍

顶一个!

很棒 收藏

需要 Sign In 后方可回复, 如果你还没有账号请点击这里 Sign Up