xpath定位和css定位對比

xpath常見的定位方法

xpath定位和css定位對比

實際項目中使用較多的是xpath定位和css定位。XPath是XML文檔中查找結點的文法，換句話就是通過元素的路徑來查找這個元素。xpath比較強大，而css選擇器在性能上更優，運作速度更快，文法上更簡潔。比較兩種方法：

直接子元素

XPATH中的直接子元素是使用“/”定義的，而在CSS上，它是使用“>”定義的。

XPATH：//div/input
CSS: div>input
           

後代元素

如果一個元素在另一個元素的内部（子元素或者孫元素），則它在XPATH中使用“//”定義，而在CSS中僅使用空格定義。

XPATH：//div//input
CSS: div input
           

ID定位

XPATH中的元素id使用以下内容定義："[@id=‘kw’]"，而在CSS中使用："#kw"。

XPATH：//input[@id='kw']
CSS: input#kw
           

CLASS定位

對于class屬性，XPATH類似id，而CSS中用一個點表示。

XPATH：//input[@class="s_ipt"]
CSS: input.s_ipt
           

弟弟元素：following-sibling 繼兄弟

這對于表單元素非常有用，即頁面中位于同一父節點内的下一個相鄰元素。

XPATH：//input[@class="s_ipt"]/following-sibling::a
CSS：input[class="s_ipt"]+a
           

哥哥元素：preceding-sibling 前兄弟

頁面中位于同一父節點内的上一個相鄰元素。

XPATH：//a[@name='tj_baike']/preceding-sibling::a
CSS：無法實作
           

父節點元素

頁面中位于一個節點的上級元素。

XPATH: //input/parent
CSS: 無法實作
           

屬性值

我們可以根據任何屬性值定位元素。

XPATH: //input[@name='username']
CSS: input[name='username']
           

多個屬性值

我們甚至可以通過多個屬性來定位元素。

XPATH: //input[@name='rsv_spt' and @value="1"]
CSS: input[name='login'][type='submit'] 
           

第一個子元素

XPATH: //div[@id='u1']/a[1]
CSS: div#u1 a:first-child
           

最後一個子元素

XPATH: //div[@id='u1']/a[last()]
CSS: div#u1 a:last-child
           

第二個子元素

XPATH: //div[@id='u1']/a[2]
CSS: div#u1 a:nth-child(2)
           

模糊比對

selenium中允許使用^=，$=或*=進行部分字元串比對。
           

^=比對字首

XPATH: input[starts-with(@id,'user')]
CSS: input[id^='user']
           

$=比對字尾

XPATH: input[ends-with(@id,'name')]
CSS: input[id$='name']
           

*=比對包含

XPATH: input[contains(@id,'sernam')]
CSS: input[id*=sernam]
           

總之，以上兩種方法至少需要熟練其中一種。

原創：https://mp.weixin.qq.com/s?src=11&timestamp=1561368664&ver=1688&signature=UnKlqCAnk0ZLSxgEKm7wqBpYK6b83hsYNeIpvWSEjCkki5COooor3Lpv5ddEoufc4Utcz8a-gYakP-NOHuc8E29YYzpSsNU4saiwz1nzOjX-zmjxJNziNKT7hFaQddWI&new=1

引用：

https://www.cnblogs.com/jingdenghuakai/p/11078401.html