chrome浏览器f12快速定位元素的技巧
一,调试说明
作为WebUI自动化测试最大的难点就是定位界面元素,传统的html元素比较正规,还能去定位,当遇到VUE+Element等前端框架,已经没有下拉框等数据,就比较很难定位。
本文主要讲一下,如何通过chrome的开发者工具F12进行快速的定位和调试界面元素,提高定位的方法。
二,基本的使用方法
1.打开开发者工具
Chrome目前最新的版本都自带着F12,只要输入网页,在浏览器上点击键盘“F12”就可以调出开发者工具。
F12开发者工具,可以调整其显示的位置:
2.定位原始xpath,在Elements中点击箭头,定位指定的元素。
3.在定位元素的指定位置,鼠标右键弹出菜单选择框,选择Copy显示对应的元素定位方法。
点击:Copy Xpath,复制元素路径://*[@id="kw"]
三,通过浏览器进行调试元素
在我们定位界面元素的过程中,发现很有意思的现象:
80%的元素通过F12可以定位出来,20%的元素通过12很难定位准确,要花费80%时间进行调试,如果在脚本中调试比较慢的一遍遍运行非常耗时,怎么能够在浏览器中较快提高调试的xpath定位速度呢?
可以使用如下的方法:
1.使用快捷查询功能,在Chrome浏览器中:Ctral+F调出查询功能。
在下面的输入框,输入刚才的Xpath=//*[@id="kw"] 路径可以高亮在界面展示对应的元素。
2.通过console定位元素,选择console输入$显示对应的值信息。
xpath定位:
$() 返回与指定的CSS选择器相匹配的第一个元素,等同于document.querySelector()
$$() 返回与指定的CSS选择器相匹配的所有元素的数组,等同于document.querySelectorAll()
$x() 返回与指定的XPath相匹配的所有元素的数组
语法格式:$x(xpath) 表达。
总之,通过chrome浏览器的F12定位元素,可以定位到80%以上,剩下20%靠个人经验了,总之自动化的感到最后也是一个体力活:)