在web自動化測試中，定位元素是非常關鍵的，本文會介紹通過CSS選擇器定位和xpath定位的一些方法，幫助大家高效定位元素。
一、css選擇器定位
（1）通過id定位
文法：
#id
示例：
<input id="password">
，定位id="password"的元素
定位方式：
#password
（2）通過class定位
文法：
.class
示例：
<input class="num">
，定位class="num"的元素
定位方式：
.num
（3）class多個值追加定位
文法：
.class1.class2.class3
（定位到唯一進制素為止）
示例：
<span class="num1 num2">
，定位class="num1 num2"的元素
定位方式：
.num1.num2
（4）通配符定位元素
- “^” — 代表以什麼文本開始
- “$” —代表以什麼文本結尾
- “*” —代表包含什麼文本
文法：
tag[attribute<specialcharacter>='value']
（tag=标簽；attribute=屬性；specialcharacter=通配符；value=屬性值）
示例1：定位class以start開始的div元素
定位方式：
div[class^='start']
示例2：定位class以end結束的div元素
定位方式：
div[class$='end']
示例3：定位class包含include的div元素
定位方式：div[class*=‘include’]
（5）查找子節點
文法：通過 > 連接配接父節點和子節點（節點可以用标簽表示，也可以用id或者class表示）
示例：如下圖，查找
<a href="/list" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >确定</a>
元素
定位方式1：
span>div>a
定位方式2：
span>.end>a
定位方式3：
#login>.end>a
二、xpath定位
（1）用text建構有效xpath
示例：
<span class="login">登入</span>
定位方式：
//span[text()='登入']
（注意：此處用“=”，表示完全比對，如果文本中存在空格，需輸入空格）
（2）用contains關鍵字建構有效xpath
文法：
//tag[contains(attribute,'value')]
（tag=标簽；contains關鍵字；attribute=屬性；value=屬性值）；用于比對一個屬性值中包含的字元串。
示例1：
<a href="/list" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >北京市</a>
；通過contains關鍵字查找文本中含“北京”關鍵字的a标簽
定位方式： xpath=
//a[contains(text(),'北京')]
示例2：
<input placeholder="請輸入使用者名" class="inputBox">
；通過contains關鍵字查找placeholder值含“使用者名”關鍵字的input元素
定位方式： xpath=
//input[contains(@placeholder,'使用者名')]
（3）用starts-with關鍵字建構有效xpath
文法：
//tag[starts-with(attribute,'value')]
（tag=标簽；starts-with關鍵字；attribute=屬性；value=屬性值）；用于比對一個屬性開始位置的關鍵字。
示例：
<input placeholder="請輸入使用者名" class="inputBox ipt ipt-email">
通過starts-with關鍵字查找屬性class以"inputBox"開頭的input元素。
定位方式：xpath=
//input[starts-with(@class,'inputBox')]
（4）xpath-查找父節點和平級節點
- 查找父節點
文法：
xpath-to-some-element//parent::<tag>
（xpath-to-some-elemen：語句；parent：關鍵字；tag:标簽）
示例：如下圖，定位class=“end”的div元素的父節點span元素
定位方式：xpath=
//div[@class='end']//parent::span
- 查找前面的平級節點
文法：
xpath-to-some-element//preceding-sibling::<tag>
（xpath-to-some-elemen：語句；preceding-sibling：關鍵字；tag:标簽）
示例：如下圖，定位class=“end”的div元素前面與其平級的div元素
定位方式：xpath=
//div[@class='end']//preceding-sibling::div
- 查找後面的平級節點
文法：
xpath-to-some-element//following-sibling::<tag>
（xpath-to-some-elemen：語句；following-sibling：關鍵字；tag:标簽）
示例：如下圖，定位class=“end”的div元素後面與其平級的a元素
定位方式：xpath=
//div[@class='end']//following-sibling::a
三、xpath絕對路徑與相對路徑
-
xpath的絕對路徑
表示方式：用 “/” 表示；查找元素需是上一級節點的子節點中的一個，不能跳級
示例： /html/body/span[1]/a
web自動化-定位元素 -
xpath的相對路徑
表示方法：用 “//” 表示； 查找下級任何子節點或者任何嵌套子節點中的一個，可以跳級
示例：//span[1]/a
web自動化-定位元素