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