Web测试--控件类

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

导航条

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

· 导航是否直观，简单明了，直接反应系统的主要功能。

· 导航的风格与其他菜单，展示等风格是否一致

· 导航的链接跳转是否正确

· 导航条tab间的来回跳转，是否正确。

· 链接如果带参数，跳转到不同页面，传递的参数是否正确

· 导航条之外的公共内容，在导航条不同tab内的展示应该保持一致，且功能正确性检查。

· 不同的导航条达到同样的目的，检查不同导航条跳转过来时内容是否一致。

· 导航条各级之间有上下级关系时，进入下级页面，再返回，是否能正常返回上级页面。

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

· 各个导航之间的相互影响，如果两个导航连接使用的js模块不一致，涉及到页面加载，页面展示等的检查。

· 导航条与其他控件组合在一起时，在不同的页面上，看到的导航条是否一致等检查。

输入框

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

· 输入的字符长度是否符合要求，输入最小长度，最小长度-1，最大长度，最大长度+1，以及超长的字符检查是否符合预期

· 输入特殊字符，特别是&、单引号’、空格检查是否能保存。

· 输入内容前后带空格的，能否自动过滤处理。

· 不输入内容，保存，是否有错误提醒

· 输入注入的字符串，比如null，js代码，html代码等，是否能保存。

· 数字输入框还要检查边界值，负数，分数，非数字，0，科学计数法，字母与数字结合，16进制，8进制，货币性输入，小数点位数检查等情况等情况

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

· 信息的唯一性，比如一些名称的检查要求唯一性。

· 编辑类的输入框，要检查鼠标移出后点击，能否从输入框移出焦点。

· 有自动带入功能的输入框，要检查自动带入数据的正确性。

按钮

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

· 按钮是否可点，有弹出框的弹出框是否符合预期。

· 自然状态、鼠标悬浮和按钮按下状态下，按钮的状态

· 按钮的功能实现是否正常（存储db，与其他模块交互等是否正常）

· 按enter键操作按钮，功能是否正常。

· 按tab键，能否在不同的按钮或其他控件间切换。

· 一些按钮只能点击一次的情况，点击一次后，再操作，是否仍能点击。

· 错误信息提醒是在前端js判断，还是后台判断，点击按钮后，提示话术显示正确。

· 取消功能的按钮，是否能正常关闭页面，取消后回到的页面是否符合预期。

下拉框

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

· 默认显示是否正确，比如有的显示全部，有的默认选中某一项，有的显示“请选择”

· 切换item，下拉框显示项内容和排序是否正确，不同浏览器，下拉框显示是否有变形等。

· 下拉框中选项超出设定值的，是否有滑动条，上下滑动，还是左右滑动等。

· 下拉框弹出时，鼠标点击控件外区域/选项/下拉框，下拉框能否收回

· 当下拉框选项很多时，是否有被底层覆盖的情况，

· 下拉框数据被存储后，其他地方显示时，传递的数据正确性检查。比如下拉框选项按数字传递，而其他页面显示时应该显示对应的文字。

· 组合筛选的情况，有级联操作的，只有选择了前一个数据后，才能进行下一个的选择。比如省市之间，只有选择了省份，才能继续选择市，否则市不可选。

· 组合下拉框实现的筛选功能正确性检查。

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

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

2. 组合条件时，列表中内容检查。

列表

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

· 列表长度，宽度是否合理，如果太长，太宽，有没有竖向和横向滚动条。

· 列表表头帮助信息是否完整，比如title旁边是否有小问号支持。

· 列表每行每个字段可显示内容多样性检查是否正确。

· 列表数据为空时，显示是否正确。

· 列表翻页功能是否正确。

· 列表列排序功能是否正常。

· 列表其他附加功能（比如：删除、新增，编辑，下载等）是否正常。

· 是否有全选功能，全选功能检查

· 列表和翻页，筛选的组合检查，翻页后，再做筛选，是否会自动跳到第一页。

· 列表和翻页，排序的组合检查，翻页后，筛选，是否仍是对全部数据的排序。

· 列表 和翻页的组合检查，翻页后，对页面数据做编辑，是否能保存成功，是否仍停留在当前页。

· 列表切换的功能检查，比如在列表1和列表2在同一区域展示，展示1时不展示里2.当在列表1编辑物料后，切换到列表2，再切换回列表1，检查编辑的物料是否生效。

单选框

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

· 默认是否有选中

· 是否只能选中一个

· 选中后的功能是否正确。

· 与接口交互传递的值正确性检查

复选框

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

· 多个复选框一个都不选

· 多个复选框全部选中

· 多个复选框部分被选中

· 当复选框太多时，是否提供全选和全不选的功能

· 复选框与其他组合时，比如选中某个复选框，就出现某种效果，检查不同组合时的展示情况。

左右选择框

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

· 左侧数据展示区数据是否符合预期

· 左侧数据为空时是否展示正确

· 左侧数据过多时是否有滚动条。

· 左侧能否展开，展开后显示数据是否正确。首次进入是否展开。

· 添加左侧数据到右侧后，右侧数据是否默认展开。

· 添加一条左侧数据到右侧，左侧数据置灰检查，右侧数据正确性检查

· 添加全部数据到右侧，左侧数据置灰检查，正确性检查。

· 右侧删除一条数据，左侧对应数据不再置灰，数据正确性检查

· 右侧删除全部，左侧数据不再置灰，正确性检查

· 两侧数据是否有个数提示，有的话，添加和删除后，个数提示是否正确。

· 添加大量数据，确认后，检查处理的速度。