关于友好性测试中鼠标样式的修改

简介: 在日常的界面测试中,我们一定会有这样的CheckPoint:鼠标移到可点击标识的上方时是否变为小手。 上图中的鼠标样式是错误的,要想修改成小手我们需要对应的找到他所对应页面元素的CSS样式并做修改(添加红字部分): div[id$='icmbx'] { display: inl...

在日常的界面测试中,我们一定会有这样的CheckPoint:鼠标移到可点击标识的上方时是否变为小手。

上图中的鼠标样式是错误的,要想修改成小手我们需要对应的找到他所对应页面元素的CSS样式并做修改(添加红字部分):

div[id$='icmbx'] {
    display: inline-block;
    border: 1px solid #bfbfbf !important;
    /*width: 603px;*/
    width:559px;
    height: 48px;
    margin-left: 20px;
    cursor: pointer;
}

这样修改后,鼠标移到输入框上方时就变成小手啦:

但是当我们把鼠标移到旁边的小图案(或下三角箭头)上时,发现问题并没有完全改好:

这是因为这个框框里有多层div嵌套导致的:

要想解决这个问题需要继续修改CSS样式,添加如下的代码,让外层div中所有嵌套在内的div都能够继承外层div的CSS样式:

 div[id$='icmbx']>div{cursor:pointer} 

于是问题就彻底改好了,

如果不加上最后一行代码的话,这个bug就不算彻底改好。当嵌套的div层数过多时,测试的疏漏会导致bug隐藏难以发现,所以在修改bug的时候一定要想到嵌套的情况以才能节省时间,避免bug被reopen。

div[id$='icmbx'] {
    display: inline-block;
    border: 1px solid #bfbfbf !important;
    /*width: 603px;*/
    width:559px;
    height: 48px;
    margin-left: 20px;
    cursor: pointer;
}
div[id$='icmbx']>div{cursor:pointer}

记录一下这个方法,当做经验积累。

相关文章
|
7月前
|
测试技术 数据安全/隐私保护 Python
【如何学习Python自动化测试】—— 鼠标键盘操作
【如何学习Python自动化测试】—— 鼠标键盘操作
|
前端开发 JavaScript 测试技术
全网最细:Jest+Enzyme测试React组件(包含交互、DOM、样式测试)
Jest是目前前端工程化下单元测试火热的技术栈,而Enzyme的支持提供了Jest测试React业务、组件的能力,下面来介绍一下React组件测试的一些实际场景。
131 1
测试关于索引的操作- 修改索引
测试关于索引的操作- 修改索引
|
Java 数据库连接 数据库
【SSM框架】测试 修改.删除.查询功能
1.创建sqlSession工具类 2.测试修改功能 3.测试删除功能 4.测试查询功能
【SSM框架】测试 修改.删除.查询功能
|
前端开发
网页设计中期尝试实时修改背景测试
网页设计中期尝试实时修改背景测试
89 0
|
敏捷开发 前端开发 数据库
测试圈相亲平台开发流程(16):保存修改
测试圈相亲平台开发流程(16):保存修改
测试圈相亲平台开发流程(16):保存修改
|
存储 测试技术
软件测试面试题:如何使用webdriver执行一个鼠标右键点击操作?
软件测试面试题:如何使用webdriver执行一个鼠标右键点击操作?
172 0
|
XML 测试技术 数据格式
3 分钟生成一个单元测试报告,这个样式爱了
3 分钟生成一个单元测试报告,这个样式爱了
265 0
3 分钟生成一个单元测试报告,这个样式爱了
|
前端开发
CSS - 解决 “本地测试” 和 “线上测试” 样式不一样问题
CSS - 解决 “本地测试” 和 “线上测试” 样式不一样问题
874 0
|
前端开发 开发者
前端,测试如何修改后端接口返回的响应数据
前端,测试如何修改后端接口返回的响应数据
前端,测试如何修改后端接口返回的响应数据