頁面元素定位cssSelector Xpath

頁面定位：id/name/linktext/cssselector/xpath/classname/tagname/

一、xpath是xml path的簡稱，由於html文件本身就是乙個標準的xml頁面，所以我們可以使用xpath 的用法來定位頁面元素

相對路徑的引用寫法：

查詢頁面上第乙個form元素：//form[1]

查詢頁面上id為loginform的form元素：//form[@id='loginform']

查詢頁面上具有name屬性為username的input元素：//input[@name='username']

查詢頁面上id為loginform的form元素下的第乙個input元素：//form[@id='loginform']/input[1]

查詢頁面具有name屬性為contiune並且type屬性為button的input元素：//input[@name='continue'][@type='button']

查詢頁面上id為loginform的form元素下第4個input元素：//form[@id='loginform']/input[4]

by.xpath("//*[@id='j_login_form']/dl/dt/input[@id='j_password']")

也可寫成

by.xpath("//*[@id='j_login_form']/*/*/input[@id='j_password']")

用xpath的幾種模糊匹配模式來定位，主要有三種方式

a. 用contains關鍵字，定位**如下：

driver.findelement(by.xpath(「//
a[contains(@href, 『logout』)]」));

這句話的意思是尋找頁面中href屬性值包含有logout這個單詞的所有a元素，由於這個退出按鈕的href屬性裡肯定會包含logout，所以這種方式是可行的，也會經常用到。其中@後面可以跟該元素任意的屬性名。

b. 用start-with，定位**如下：

driver.findelement(by.xpath(「//
a[starts-with(@rel, 『nofo』)]));

這句的意思是尋找rel屬性以nofo開頭的a元素。其中@後面的rel可以替換成元素的任意其他屬性。

c. 用text關鍵字，定位**如下：

driver.findelement(by.xpath(「//
*[text()=』退出』]));

這個方法可謂相當霸氣啊。直接查詢頁面當中所有的退出二字，根本就不用知道它是個a元素了。這種方法也經常用於純文字的查詢。

關於xpath這種定位方式，webdriver會將整個頁面的所有元素進行掃瞄以定位我們所需要的元素，所以這是乙個非常費時的操作，如果你的指令碼中大量使用xpath做元素定位的話，將導致你的指令碼執行速度大大降低，所以請慎用

二、by.cssselector()

定位id為flrs的div元素，可以寫成：#flrs 注：相當於xpath語法的//div[@id=』flrs』]

定位id為flrs下的a元素，可以寫成 #flrs > a 注：相當於xpath語法的//div[@id=』flrs』]/a

定位id為flrs下的href屬性值為/forexample/about.html的元素，可以寫成： #flrs > a[href=」/forexample/about.html」]

如果需要指定多個屬性值時，可以逐一加在後面，如#flrs > input[name=」username」][type=」text」]。

此外，cssselector還有一些高階用法，如果熟練後可以更加方便地幫助我們定位元素，如我們可以利用^用於匹配乙個字首，$用於匹配乙個字尾，*用於匹配任意字元。例如：

最後再總結一下，各種方式在選擇的時候應該怎麼選擇：

1. 當頁面元素有id屬性時，最好盡量用id來定位。但由於現實專案中很多程式設計師其實寫的**並不規範，會缺少很多標準屬性，這時就只有選擇其他定位方法。

2. xpath很強悍，但定位效能不是很好，所以還是盡量少用。如果確實少數元素不好定位，可以選擇xpath或cssselector。

3. 當要定位一組元素相同元素時，可以考慮用tagname或name。

4. 當有鏈結需要定位時，可以考慮linktext或partiallinktext方式。