WebDriver--定位UI元素

 

定位UI元素

WebDriver可以通過WebDriver例項來定位元素，任何語言庫都含有“Find Element”和“Find Elements”的方法。第一個方法返回一個WebElement或者丟擲異常。後者返回所有WebElement的列表，或者空列表。

獲取和定位元素我們呼叫“By”方法。下面具體解釋下“By”方法：

By ID

這是一個極為有效定位元素的方法。普遍的現狀是UI工程師在實際編寫頁面時很少寫id或者自動生產一個ID，這些都是需要避免的。對於一個頁面Element來說，class比自動生產的id更好。

通過id定位元素的例子：

<div id="coolestWidgetEvah">...</div>
WebElement element = driver.findElement(By.id("coolestWidgetEvah")); 

 

By Class Name

        這裡的class指的是DOM中的元素，在實際使用過程中，我們也會發現很多DOM元素含有相同的class名。

通過class name定位元素例子：

<div class="cheese">

<span>Cheddar</span>

</div>

<div class="cheese">

<span>Gouda</span>

</div>

List<WebElement> cheeses = driver.findElements(By.className("cheese"));

 

By Tag Name

DOM的Tag元素

用Tag name 定位元素的例子：

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

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

 

 

By Name

例子：

<input name="cheese" type="text"/>
WebElement cheese = driver.findElement(By.name("cheese"));

 

By Link Text

例子：

<a href="http://www.google.com/search?q=cheese">cheese</a>>
WebElement cheese = driver.findElement(By.linkText("cheese"));

 

By Partial Link Text

根據連結的部分文字

例子：

<a href="http://www.google.com/search?q=cheese">search for cheese</a>>
WebElement cheese = driver.findElement(By.partialLinkText("cheese"));

By CSS

從名字上看，這是根據CSS來定位元素。

例子：

<div id="food">
         <span class="dairy">milk</span>
         <span class="dairy aged">cheese</span>
</div>
WebElement cheese = driver.findElement(By.cssSelector("#food span.dairy aged"));

 

By XPATH

在高階的水平下，WebDriver儘可能使用瀏覽器的原生的XPath能力。在那些沒有原生的XPath支援的瀏覽器，我們提供自己的實現方式。但是三個Driver有一定的區別。

例子：

<input type="text" name="example" />
    <INPUT type="text" name="other" />
    List<WebElement> inputs = driver.findElements(By.xpath("//input")); 

 

查詢結果：

HTML元素有時並不需明確宣告，因為他們將預設為已知值的屬性。例如，input標籤，就不需要設定type為text，預設屬性就是text，經驗原則：WebDriver在使用中的XPath時，不應該期望能夠對這些隱含屬性相匹配。

 

使用javascript

您可以執行任意JavaScript找到一個元素，只要你返回一個DOM元素，它會自動轉換到一個WebElement物件。

例子：

jQuery的頁面載入一個簡單的例子：

WebElement element = (WebElement) ((JavascriptExecutor)driver).executeScript("return $('.cheese')[0]"); 

尋求所有的頁面上的input元素：

List<WebElement> labels = driver.findElements(By.tagName("label"));
List<WebElement> inputs = (List<WebElement>) ((JavascriptExecutor)driver).executeScript(
      "var labels = arguments[0], inputs = []; for (var i=0; i < labels.length; i++){" +
"inputs.push(document.getElementById(labels[i].getAttribute('for'))); } return inputs;", labels);

 

使用者表單填充

例子：

遍歷select標籤

WebElement select = driver.findElement(By.tagName("select"));
List<WebElement> allOptions = select.findElements(By.tagName("option"));
for (WebElement option : allOptions) {
             System.out.println(String.format("Value is: %s", option.getAttribute("value")));
             option.click();
}

 

選擇某一個選項：

Select select = new Select(driver.findElement(By.tagName("select")));
select.deselectAll();
select.selectByVisibleText("Edam");
上傳檔案：
WebElement FileUpload =driver.findElement(By.id("upload"));
String filePath = "C:\test\\uploadfile\\media_ads\\test.jpg";
FileUpload.sendKeys(filePath);

 

提交：

Submit在form中

driver.findElement(By.id("submit")).click();

submit不在form中

WebElement.submit();

 

拖拽操作：

WebElement element = driver.findElement(By.name("source"));
WebElement target = driver.findElement(By.name("target"));
(new Actions(driver)).dragAndDrop(element, target).perform();

Windows和Frames之間的切換

一些web應用程式有許多Frames或多個Windows。 WebDriver支援使用“switchTo”的方法實現的視窗之間切換。

driver.switchTo().window("windowName");

所有對driver的呼叫都會指向特定的視窗，但是我們怎麼知道視窗的名字呢？我們可以檢視javascript程式碼和開啟他的連結：

<a href="somewhere.html" target="windowName">Click here to open a new window</a>

另外，還可以通過“window handle”去呼叫“switchTo().window()”，通過這個，我們就遍歷來找到所有開啟的視窗：

for (String handle : driver.getWindowHandles()) 
{ 
         driver.switchTo().window(handle); 
}

Switch同樣支援frame：

driver.switchTo().frame("frameName");

同樣可以使用他訪問subframe，找frameName的第一個subframe中叫做child的frame：

driver.switchTo().frame("frameName.0.child");

 

彈出框：

從selenium2.0開始，已經支援對彈出框的獲取

Alert alert = driver.switchTo().alert();

這個方法會返回當前被開啟打警告框，你可以進行統一，取消，讀取提示內容，後則進入到提示，這個同樣使用alerts，confirms，prompts。

Navigation：History and Location

之前我們就可以通過get方法來開啟一個網頁，像我們所看到的，WebDriver同樣還有許多小介面，Navigation就是其中一個小介面：

driver.navigate().to(http://www.example.com);

navigate().to和get()其實作用是一樣的，但是navigate還可以進行瀏覽器的前進後退操作：

driver.navigate().forward();
driver.navigate().back();