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