chrome浏览器f12快速定位元素的技巧

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%靠个人经验了,总之自动化的感到最后也是一个体力活:)

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页