Selenium(四）——webdriver 之定位頁面元素

轉自http://blog.sina.com.cn/s/blog_6966650401012a6u.html

selenium-webdriver提供了強大的元素定位方法，支持以下三種方法：
單個對象的定位方法
多個對象的定位方法
層級定位

注意：

selenium-webdriver通過findElement()\findElements()等find方法調用"By"對象來定位和查詢元素。By類只是提供查詢的方式進行分類。findElement返回一個元素對象否則拋出異常，findElements返回符合條件的元素 List，如果不存在符合條件的就返回一個空的list。

一、定位單個元素
A.使用className進行定位
當所定位的元素具有class屬性的時候我們可以通過classname來定位該元素。
例：下面的例子定位頁面上class爲"username"的li。
WebElement element = driver.findElement(By.className("username"));
System.out.println(element.getTagName());

輸出結果：Li

B.使用id屬性定位
例：<input id="passport_user" type="text" value="" title="用戶名/郵箱" name="passport_user">
WebElement element = dr.findElement(By.id("passport_user"));
System.out.println(element.getAttribute("title"));

輸出結果：用戶名/郵箱

C.使用name屬性定位
例：<input id="passport_user" type="text" value="" title="用戶名/郵箱" name="passport_user">
WebElement e = dr.findElement(By.name("passport_user"));

D.使用css屬性定位
例：<input id="passport_user" type="text" value="" title="用戶名/郵箱" name="passport_user">
WebElement e1 = dr.findElement(By.cssSelector("#passport_user"));

詳解：

1.css之後代選擇器

<p>

<em>location1</em>

</p>

<ol>

<li><em>location2</em></li>

</ol>

可以通過css=p em這個可以選中文本爲location1的em元素

css=ol em這個可以選中文本爲location2的em元素

css後代選擇器和xpath中//div//a一樣：取得所有div下面所有的a節點。這個是忽略了父子節點

<div>

<p><em>location1</em></p>

</div>

<div>

<ol>

<li><strong><em>location2</em></strong></li>

<li><em>location3</em></li>

<li><em>location4</em></li>

</ol>

</div>

可以通過css=p>em來定位location1

css之父子節點選擇器給後代選擇器加了一個限制，類似xpath中//div/p/em：所有div下的子元素p的子元素em。

css=li+li em來定位location3，location4的em

css=li+strong+em來定位文本爲location2的em

2.css之id選擇器

<input id="location1" type="button"/>

<input id="location2" type="radio"/>

通過css=#location1來定位type爲button的按鈕

通過css=#location2來定位type爲radio的單選框

3.css之類選擇器

<input class="location1" type="button" value="確定"/>

<input class="location2" type="button" value="取消"/>

通過css=input.location1來選擇value值爲確定的按鈕

通過css=input.location2來選擇value值爲取消的按鈕

4.css之屬性選擇器

<input class="location1" type="button" value="確定"/>

<input class="location2" type="button" />

通過css=[class=location1]可以定位第一個按鈕

通過css=[class~=1]可以定位第一個按鈕

通過css=[value="確定"]可以定位第一個按鈕

通過css=input[class="location"]可以定位第二個按鈕

E.按標記（tag）名稱查找

元素的DOM標記名稱

<iframe src="..."></iframe>

WebElement frame = driver.findElement(By.tagName("iframe"));

F.按鏈接文本查找

<a href="http://www.google.com/search?q=cheese">cheese</a>>

WebElement cheese = driver.findElement(By.linkText("cheese"));

按部分鏈接文本查找

<a href="http://www.google.com/search?q=cheese">search for cheese</a>>

WebElement cheese = driver.findElement(By.partialLinkText("cheese"));

G.使用 XPATH定位

例：<input id="passport_user" type="text" value="" title="用戶名/郵箱" name="passport_user">
WebElement element =dr.findElement(By.xpath("//input[@id='passport_user']"));

parent::返回父節點

following::返回此節點後面的兄弟節點

preceding::返回此節點前面的兄弟節點

div>

<input id="location1" type="button" />

<input type="button" />

</div>

通過id爲location1可以很隨意的定位到兄弟節點

//div/input[@id='location1']/following::input

也可以通過location1很隨意的定位到父類節點div。

//div/input[@id='location1']/parent::div。

也可以通過索引爲2的input定位到id爲location1的input

//div/input[2]/preceding-sibling::input

有幾個非常有用的Firefox插件，有助於發現一個元素的XPath：

XPath Checker - suggests XPath and can be used to test XPath results.

Firebug - XPath suggestions are just one of the many powerful features of this very useful add-on.

XPath Checker - 建議XPath並可以用於測試XPath的結果

Firebug - XPath建議僅僅是這非常有用的插件的許多強有力特徵中的一個。

參考網站：http://www.w3school.com.cn/xpath/index.asp

二、定位多個元素
//定位到所有<input>標籤的元素，然後輸出他們的id
List<WebElement> element = driver.findElements(By.tagName("input"));
for (WebElement e : element)
System.out.println(e.getAttribute("id"));

三、層級定位
層級定位的思想是先定位父元素，然後再從父元素中精確定位出其我們需要選取的子元素。
層級定位一般的應用場景是無法直接定位到需要選取的元素，但是其父元素比較容易定位，通過定位父元素再遍歷其子元素選擇需要的目標元素，或者需要定位某個元素下所有的子元素。

下面的代碼演示瞭如何使用層級定位class爲"login"的div，然後再取得它下面的所有label，並打印出他們的文本
//定位class爲"login"的div，然後再取得它下面的所有label，並打印出他們的值
WebElement element = driver.findElement(By.className("login"));
List<WebElement> el = element.findElements(By.tagName("label"));
for(WebElement e : el)
System.out.println(e.getText());

四、使用Javascript

你可以執行任何Javascript，以找到一個元素，只要你找到一個DOM元素，它將自動轉換爲WebElement對

象。

WebElement element = (WebElement) ((JavascriptExecutor)driver).executeScript("return

$('.cheese')[0]");