前言： 定位元素
-
谷歌浏览器使用开发者工具定位(XPath)
使用开发者工具（F12），Elements 可以用指针查看到需要定位的元素，然后 ctrl+f
输入 //input[@placeholder='请输入待测设备上WIFI模块的MAC地址'] 发现只有一个，那这个XPATH就是正确的
一、使用CSS定位元素
-
CSS ID选择器查找元素
原则：唯一匹配
例外：除非想要查找一批元素的集合
语法：tag[attribute='value']
示例：
-
a[id='js-signin-btn']
-
#js-signin-btn
-
a#js-sign-btn
-
CSS 类选择器查找元素
示例：
这里有几个值得注意的地方
示例的前两个 .icon-shopping-cart 都是模糊匹配，但是第三个是精确匹配
也就是说如果元素是 ，那么三个语句都能匹配上
如果元素是 ，那么只有前两个可以匹配上，第三个不可以，需要把第三个改为span[class='icon-shopping-cart js-connt'
追加类：
.class1.class2.class3 ---> 直到找到唯一的元素
上例可以也写成 .icon-shopping-cart.js-connt 顺序无所谓
3. CSS选择器--通配符查找元素
语法：
"^" ---> 代表文本的开始
"$" ---> 代表以什么文本结束
"*" ---> 代表包含什么文本(模糊匹配)
tag[attribute通配符='value' ]
div[class='search-area']
div[class^='search']
div[class$='area']
div[class*='ch-ar']
不限制必须是class
div[action-type^='my']
4.CSS选择器--查找子节点
举例：
li>#js-signin-btn div>.search-input
div>h1 div>label
ul>li>a.shop-cart-icon
ul>li>#shop_id
二、XPATH定位元素
语法：
//tag[@attibute='value']
"attibute" 可以是任何标签，包括 id ,class 等
-
xpath的单双斜线
XPath的绝对路径用单斜线 "/"
举例：
/html/body/div[1]/div/div[2]/ul/li[2]/a/span[2]
Xpath的相对路径用双斜线 "//"
举例：
//li[@id="shop-cart"]/a/span[2]
单双斜线的区别：
"/" ：元素是上一级节点的子节点中的一个，不能跳级
"//"：下级任何子节点或者任何嵌套子节点中的一个，可以跳级
举例：
//*[@id="main-html"]/body/div[2]//input
/html/body/div[2]/div/input
//body/div[2]//input
-
XPATH优化
原始： //li[@id="shop-cart"]/a/span[1]
优化： //li[@id="shop-cart"]//span[2] 只查找 li 下的第二级的span，跳过了对 a 标签的依赖
-
用 text 属性定位XPATH
原始：//a[@id='js-signup-btn']
使用text定位（=号定位）：
//a[text()='登录 ']
使用 = 号，必须是完全相等，空格也不能省略
使用text定位（contains定位）：
//a[contains(text(),'登录')]
使用contains进行模糊匹配，当然contains 不一定只适用于text()，任何其他的元素都可以，使用其他元素时，前面需要加 @ ，例如 contains(@class,'ng-binding')
-
XPATH的条件组合：
举例：
使用=号组合： //a[@class="ng-binding" and text()="下载中心"]
使用contains组合： //a[contains(@class,"ng-binding") and contains(text(),"下载中心")]
使用=号和contains组合： //a[contains(@class,"ng-binding") and text()="下载中心"]
-
用starts-with关键字查找元素
示例：
//a[starts-with(text(),"下载中")]
-
如何查找父节点、前后平级节点
语法：
父节点： xpath//parent::
前面的平级节点： xpath//preceding-sibling::
后面的平级节点： xpath//following-sibling::
举例：
节点：//a[text()="联系我们"]
父节点： //a[text()="联系我们"]//parent::li
父节点的前面的平级节点： //a[text()="联系我们"]//parent::li//preceding-sibling::li[2]
父节点的后面的平级节点： //a[text()="联系我们"]//parent::li/following-sibling::li[2]
