Chrome浏览器与元素定位

操作系统：Windows 7
Chrome浏览器版本：Google Chrome版本 71.0.3578.98（正式版本） （32 位）
用途：通过Chrome浏览器直接而获取或验证XPath

1. Chrome开发者工具

Chrome浏览器默认自带Chrome开发者工具。
通过以下几种方式可打开开发者工具；
1.浏览器左上角的菜单按钮，选择更多工具>开发者工具；
2.通过快捷方式Ctrl+shift+I（截图中）或F12；

2. 获取元素定位

CSS选择器通常语法比较简洁,运行速度更快
Chrome的console可以用来获取Xpath和css：

2.1. 获取selector

1.使用chrome打开你要测试的网站；
2.按下F12，打开开发者工具；
3.选择Elements（元素）；
4.点击如下标红图标（或用快捷键Ctrl + Shift + C），进入选择元素模式；

5.在页面中点击想要获取XPath的模块；在Elements中自动跳转到对应html中的位置并高亮显示；
6.右击高亮模块，选择Copy>Copy selector；如下图：

【备注】鼠标停留在console中的这个html语句上，界面上对应的元素会高亮显示

2.2. 获取XPath

6.右击高亮模块，选择Copy>Copy XPath；如下图：

3. 验证元素定位

Chrome的console可以用来验证XPath和CSS。

3.2. 验证selector

1.使用chrome打开你要测试的网站；
2.按下F12，打开开发者工具；
3.选择Console（控制台）；
4.输入：
$(“selector”)
$$(“selector”)
前者会列出与selector匹配的所有元素，而后者则是把这些匹配到的元素组成了数组。（点击返回的每个元素，则会定位到页面中的img元素及html中的具体位置）

document.querySelector()会返回DOM中匹配的第一个元素（只返回一个元素）；
document.querySelectorAll()等同于$$(selector)
5.输入完毕后，点击回车键；

3.2. 验证XPath

4.输入：$x(“your_xpath_selector”)
5.输入完毕后，点击回车键；

如果你的语句是正确的，会返回该css对应的元素的html语句

【注意】语法中括号里需要通过双引号括起来，如果Xpath语句中有双引号，要改成单引号，不然只能解析到第一对双引号的内容；

Ctrl+L快捷键：清空console内容