selenium webdriver 學習總結-元素定位

標籤：style   io   os   使用   ar   strong   for   div   sp   

webdriver提供了豐富的API，有多種定位策略：id,name,css選取器，xpath等，其中css選取器定位元素效率相比xpath要高些，使用id，name屬性定位元素是最可靠，效率最高的一種辦法。

1、工具選擇：在我們開發測試指令碼的過程中各個瀏覽器給我們也提供了方便定位元素的工具，我比較喜歡使用firefox的firebug工具，也是目前很多開發測試人員比較熱衷的選擇，原因是firefox是唯一能夠整合selenium IDE的瀏覽器，並且firebug給使用者提供了豐富的向外延展群組件，我們可以根據自己的需要來選擇，一般情況下，使用firebug+firefinder就足夠使用了，firefinder支援xpath以及css選取器定位元素的功能，很方便協助我們調試測試指令碼

2、元素定位的方法：findElement() 與 findElements()

findElement() 該方法返回基於指定查詢條件的webElement對象，或拋出不合格異常  eg：driver.findElement(By.id("userID"));

findElements() 該方法返回指定查詢條件的WebElement的對象集合，或返回null

 

3、WebElement對象提供的各種定位元素策略

ID：driver.findElement(By.id(<elementID>))

Name：driver.findElement(By.name(<elementName>))

className：driver.findElement(By.className(<elementClassName>))

tagName：driver.findElement(By.tagName(<htmlTagName>))

linkText：driver.findElement(By.linkText(<linkText>))

partialLinkText：driver.findElement(By.partialLinkText(<partialLinkText>))

 

css：driver.findElement(By.cssSelector(<cssSelector>))

xpath：driver.findElement(By.xpath(<xpathQuery>))

 

4、webelement類提供了諸多方法，在我們開發指令碼過程中如何選擇最可靠，效率最高的方法，使用id，name是首選，因為他們在html標籤中是唯一的，所以是最可靠的

ID定位：driver.findElement(By.id("username"))

name定位：driver.findElement(By.name("username"))

class定位：driver.findElement(By.className("username"))

多學一招：WebElement類支援查詢子類元素，如果頁面中存在重複元素，但在不同div中，我們可以先定位到其父元素，然後定位其子項目，方法如下：

WebElement hello = driver.findElement(By.id("div1")).findElement(By.lindText("hello"));

 

5、使用WebElements定位多個相似的元素，比如頁面中存在五個選項按鈕,他們有相同的class屬性，值為：myRadio，我們想對五個按鈕迴圈操作，我們可以把它們全部取出來放到集合中，然後做迴圈操作，如下：

List<WebElement> radios = driver.findElements(By.className("myRadio"));

for(int i = 0;i<radios.size();i++){

radios.get(i).click();

}

 

其他定位方法與操作id，name類似，這裡不再贅述，接下來我著重對css選取器與Xpath描述下

一、WebDriver 的By類中提供了cssSelector()方法，該方法使用有以下幾種形式：

1、使用相對路徑定位元素

  如，我們要定為DOM中的input元素，我們可以這樣操作，不考慮其在DOM中的位置，但這樣做存在一定弊端，當DOM中存在多個input元素時，該方法總返回DOM中的第一個元素，這並不是我們所期待的

eg：WebElement username = driver.findElement(By.cssSelector("input"));

 

另外，為了使用這種方法更準確的定位元素，我們可以結合該元素的其他屬性來實現精確定位的目的

  a、結合id來定位，driver.findElement(By.cssSelector("input#username")); 在標籤與id之間使用#串連，如果對css瞭解的朋友一看就知道為什麼會這樣寫了，不瞭解也沒關係，只要記住這種寫法就OK了

另外該方法也可簡寫為driver.findElement(By.cssSelector("#username")); 有點兒類似於id選取器

b、使用元素的任何屬性來定位元素

driver.findElement(By.cssSelector("標籤名[屬性名稱=‘屬性值‘]"));

c、匹配部分屬性值

^=        driver.findElement(By.cssSelector("標籤名[屬性名稱^=‘xxx‘]"));  匹配屬性值以xxx開頭的元素

$=        driver.findElement(By.cssSelector("標籤名[屬性名稱$=‘xxx‘]"));  匹配屬性值以xxx結尾的元素

*=         driver.findElement(By.cssSelector("標籤名[屬性名稱^=‘xxx‘]"));  匹配屬性值包含xxx的元素

 

2、使用相對+絕對路徑方法，這裡是我自己定義的方法，方便記憶，的確也是這樣來實現的

driver.findElement(By.cssSelector("div#login>input"))   該方法中“div#login>input” 首先通過相對路徑定位到id為login的div元素，然後尋找其子項目input（絕對路徑）

 

二、使用xpath定位元素，相比cssSelector，xpath是我比較常用的一種定位元素的方式，因為它很方便，缺點是，消耗系統效能

1、使用絕對路徑定位元素

driver.findElement(By.xpath("/html/body/div/form/input"))

2、使用相對路徑定位元素

driver.findElement(By.xpath("//input"))   返回尋找到的第一個合格元素

3、使用索引定位元素，索引的初始值為1，注意與數組等區分開

driver.findElement(By.xpath("//input[2]"))   返回尋找到的第二個合格元素

4、結合屬性值來定位元素

driver.findElement(By.xpath("//input[@id=‘username‘]"));

driver.findElement(By.xpath("//img[@alt=‘flowr‘]"));

5、使用邏輯運算子，結合屬性值定位元素,and與or

driver.findElement(By.xpath("//input[@id=‘username‘ and @name=‘userID‘]"));

6、使用屬性名稱來定位元素

driver.findElement(By.xpath("//input[@button]"))

7、類似於cssSlector，使用部分屬性值匹配元素

starts-with()    driver.findElement(By.xpath("//input[stars-with(@id,‘user‘)]"))

ends-with        driver.findElement(By.xpath("//input[ends-with(@id,‘name‘)]"))

contains()        driver.findElement(By.xpath("//input[contains(@id,"ernam")]"))

8、使用任意屬性值匹配元素

driver.findElement(By.xpath("//input[@*=‘username‘]")) 

9、使用xpath軸來定位元素

這裡略了，詳見w3school.com

 

三、使用innerText定位元素

1、使用cssSelector尋找innerText定位元素

driver.findElement(By.cssSelector("span[textContent=‘新聞‘]"));

2、使用xpath的text函數

driver.findElement(By.xpath("//span[contains(text(),‘hello‘)]"))   包含匹配

driver.findElement(By.xpath("//span[text()=‘新聞‘]"))     絕對匹配

selenium webdriver 學習總結-元素定位