selenium第三課（selenium八種定位頁面元素方法）

時間  2019-12-09
標籤 selenium 第三 定位 頁面 元素 方法 欄目 系統網絡 简体版
原文   原文鏈接

selenium webdriver進行元素定位時，經過seleniumAPI官方介紹，獲取頁面元素的方式一共有如下八種方式，現按照經常使用→不經常使用的順序分別介紹一下。css

官方api地址：https://seleniumhq.github.io/selenium/docs/api/java/index.htmlhtml

1、By.Id()

在HTML中，ID屬性--惟一標識一個元素的屬性。selenium中，ID被做爲首選的識別屬性，由於這是最快的識別策略。前端

以百度主頁爲例，搜索框的HTML示例代碼以下，其ID爲kw；java

<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">

搜索框的ID是"kw"。git

 

<input type="submit" id="su" value="百度一下" class="bg s_btn">

百度一下按鈕的id是"su"。github

在WebDriver中經過ID查找元素的java示例代碼以下：web

 1 import org.openqa.selenium.By;
 2 import org.openqa.selenium.WebDriver;
 3 import org.openqa.selenium.chrome.ChromeDriver;
 4 import org.testng.annotations.Test;
 5 public class findElementByID {
 6     @Test
 7     public void test() {
 8         WebDriver driver = new ChromeDriver();                     //打開chrome瀏覽器
 9         driver.get("http://www.baidu.com");                        //輸入網址
10         driver.findElement(By.id("kw")).sendKeys("selenium");      //搜索框輸入"selenium"
11         driver.findElement(By.id("su")).click();                   //點擊百度一下，進行搜索
12         driver.quit();                                             //關閉瀏覽器
13     }
14 }

示例代碼詳解：正則表達式

一、指定WebDriver 爲ChromeDriver。chrome

二、打開百度主頁。api

三、經過ID爲kw來查找搜索框，其中findElement（）方法經過By.id（）在頁面上查找指定的ID元素，並將查找的結果執行sendkeys操做，輸入要搜索的值。

四、在搜索框中輸入字符串"selenium"。

五、經過ID爲su來查找搜索按鈕，並執行click點擊操做。

六、觸發搜索按鈕的提交操做，進行搜索。

七、關閉瀏覽器，結束測試。

2、By.Name()

在HTML中，name屬性和ID屬性功能基本相同，只是name屬性不必定是惟一的。在selenium中，若是沒有ID的話，首先考慮的就是name屬性。

以豆瓣網的主頁搜索框爲例子，其搜索框的HTML代碼以下：

<input type="text" maxlength="60" size="12" placeholder="書籍、電影、音樂、小組、小站、成員" name="q" autocomplete="off">

搜索框的name是"q"。

在WebDriver中經過Name查找元素的java示例代碼以下：

 1 import org.openqa.selenium.By;
 2 import org.openqa.selenium.WebDriver;
 3 import org.openqa.selenium.WebElement;
 4 import org.openqa.selenium.chrome.ChromeDriver;
 5 import org.testng.annotations.Test;
 6 public class findElementByName {
 7     @Test
 8     public void test() {
 9         WebDriver driver = new ChromeDriver();                     //打開chrome瀏覽器
10         driver.get("http://www.douban.com");                       //輸入網址
11         WebElement serch=driver.findElement(By.name("q"));         //生成WebElement實例對象serch
12         serch.sendKeys("find element by name");                    //搜索框輸入"find element by name"
13         serch.submit();                                            //進行搜索
14         driver.quit();                                             //關閉瀏覽器
15     }
16 }

示例代碼詳解：

一、指定WebDriver 爲ChromeDriver。

二、打開豆瓣主頁。

三、經過Name爲q來調用findElemet()方法找到豆瓣主頁的搜索框元素，並保存到WebElement實例對象中代碼以下：

WebElement search = driver.findElement(By.name("q"));

四、在搜索框中輸入字符串find element by name 。

五、經過submit()，進行搜索。

六、結束測試，關閉瀏覽器。

注意：submit和click的區別。Click方法只適用於button，而submit能夠用於提交表單。

3、By.Xpath()

　　這個方法是很是強大的元素查找方式，使用這種方法幾乎能夠定位到頁面上的任意元素。在正式開始使用XPath進行定位前，咱們先了解下什麼是XPath。XPath是XML Path的簡稱，因爲HTML文檔自己就是一個標準的XML頁面，因此咱們可使用XPath的語法來定位頁面元素。

　　Xpath經過路徑來定位控件，分爲絕對路徑和相對路徑。絕對路徑以單/號表示，相對路徑則以//表示。當xpath的路徑以/開頭時，表示讓Xpath解析引擎從文檔的根節點開始解析。當xpath路徑以//開頭時，則表示讓xpath引擎從文檔的任意符合的元素節點開始進行解析。而當/出如今xpath路徑中時，則表示尋找父節點的直接子節點，當//出如今xpath路徑中時，表示尋找父節點下任意符合條件的子節點。弄清這個原則，就能夠理解其實xpath的路徑能夠絕對路徑和相對路徑混合在一塊兒來進行表示，想怎麼玩就怎麼玩。

假設咱們如今如下圖所示HTML代碼爲例，要引用對應的對象，XPath語法以下：

絕對路徑寫法(只有一種)，寫法以下：

引用頁面上的form元素(即源碼中的第3行)：/html/body/form

下面是相對路徑的引用寫法：

查找頁面根元素：//

查找頁面上全部的input元素：//input

查找頁面上第一個form元素內的直接子input元素(即只包括form元素的下一級input元素)：//form/input

查找頁面上第一個form元素內的全部子input元素(只要在form元素內的input都算，無論還嵌套了多少個其餘標籤，使用相對路徑表示，雙//號)：//form//input

查找頁面上第一個form元素：//form

查找頁面上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]

以百度主頁爲例，搜索框的HTML示例代碼以下，其xpath爲//*[@id=''kw]。

在WebDriver中經過Xpath查找元素的java示例代碼以下：

 1 import org.openqa.selenium.By;
 2 import org.openqa.selenium.WebDriver;
 3 import org.openqa.selenium.WebElement;
 4 import org.openqa.selenium.chrome.ChromeDriver;
 5 import org.testng.annotations.Test;
 6 public class findElementByXpath {
 7     @Test
 8     public void test() {
 9         WebDriver driver = new ChromeDriver();                         　  //打開chrome瀏覽器
10         driver.get("http://www.baidu.com");                      　　    　 //輸入網址
11         WebElement serch=driver.findElement(By.xpath("//*[@id='kw'"));　　  //生成WebElement實例對象serch
12         serch.sendKeys("find element by xpath");                    　　　　//搜索框輸入"find element by xpath"
13         serch.submit();                                             　　　　//進行搜索
14         driver.quit();                                             　 　　　//關閉瀏覽器
15     }
16 }

示例代碼詳解：

一、指定WebDriver 爲ChromeDriver。

二、打開百度主頁。

三、經過Xpath爲//*[@id=''kw]來調用findElemet()方法找到百度主頁的搜索框元素，並保存到WebElement實例對象中代碼以下：

WebElement search = driver.findElement(By.xpath("//*[@id=''kw]"));

四、在搜索框中輸入字符串find element by xpath。

五、經過submit()，進行搜索。

六、結束測試，關閉瀏覽器。

4、By.tagName()

　　經過TagName來查找元素的方式與以前的經過ID或者Name查找元素的方式略有不一樣。其緣由是同一個頁面上具備相同的TagName的元素就會返回多個結果，所以建議在使用TagName爲查找元素的條件時，使用findElements()來替代findElement()函數。

以126爲例，TagName爲input的HTML事例代碼以下：

經過TagName爲script的元素個數的示例代碼以下

在WebDriver中查找TagName爲input的元素個數的java示例代碼以下：

 1 import java.util.List;
 2 
 3 import org.openqa.selenium.By;
 4 import org.openqa.selenium.WebDriver;
 5 import org.openqa.selenium.WebElement;
 6 import org.openqa.selenium.chrome.ChromeDriver;
 7 import org.testng.annotations.Test;
 8 
 9 public class findElementByTagName {
10     @Test
11     public void test() {
12         WebDriver driver = new ChromeDriver(); // 打開chrome瀏覽器
13         driver.get("http://www.126.com"); // 輸入網址
14         List<WebElement> allInputs = driver.findElements(By.tagName("input")); // 生成WebElement實例對象allInputs
15         System.out.println(allInputs.size()); // 輸出tagName爲input的個數
16         driver.quit(); // 關閉瀏覽器
17     }
18 }

示例代碼詳解：

一、指定WebDriver 爲ChromeDriver。

二、經過TagName爲input來調用findElements()方法，找到126主頁上全部的input元素並保存到WebElement實例對象列表中，代碼以下：

List<WebElement> allInputs= driver.findElements(By.tagName("input"));

三、打印126主頁上TagName爲input的元素的數量

四、結束測試，關閉瀏覽器。

從html中咱們能夠看到，文本框和密碼框的元素標籤都是input，此時單靠tagName沒法準確地獲得咱們想要的元素，須要結合type屬性才能過濾出咱們要的元素。

示例代碼以下：

 1 import java.util.List;
 2 
 3 import org.openqa.selenium.By;
 4 import org.openqa.selenium.WebDriver;
 5 import org.openqa.selenium.WebElement;
 6 import org.openqa.selenium.chrome.ChromeDriver;
 7 import org.testng.annotations.Test;
 8 
 9 public class findElementByTagName {
10     @Test
11     public void test() {
12         WebDriver driver = new ChromeDriver(); // 打開chrome瀏覽器
13         driver.get("http://www.126.com"); // 輸入網址
14         List<WebElement> allInputs = driver.findElements(By.tagName("input")); // 生成WebElement實例對象allInputs
15         System.out.println(allInputs.size()); // 輸出tagName爲input的個數
16         for (WebElement e : allInputs) { // 循環
17             if (e.getAttribute("type").equals("text")) { // 判斷
18                 e.sendKeys("abcde"); // 輸入"abcde"
19             }
20         }
21         driver.quit(); // 關閉瀏覽器
22     }
23 }

5、By.className()

className屬性是利用元素的css樣式表所引用的僞類名稱來進行元素查找的方法。

以淘寶主頁搜索框爲例，其HTML以下：

經過className獲取搜索框的java代碼以下：

 1 import org.openqa.selenium.By;
 2 import org.openqa.selenium.WebDriver;
 3 import org.openqa.selenium.WebElement;
 4 import org.openqa.selenium.chrome.ChromeDriver;
 5 import org.testng.annotations.Test;
 6 
 7 public class findElementByclassName {
 8     @Test
 9     public void test() {
10         WebDriver driver = new ChromeDriver(); // 打開chrome瀏覽器
11         driver.get("http://www.taobao.com"); // 輸入網址
12         WebElement e = driver.findElement(By.className("search-combobox-input")); // 實例化對象
13         e.sendKeys("find element by className"); // 輸入find element by className
14         e.submit();                                //搜索
15         driver.quit(); // 關閉瀏覽器
16     } 
17 }

 

示例代碼詳解：

一、指定WebDriver 爲ChromeDriver。

二、打開淘寶主頁。

三、經過className爲search-combobox-input來調用findElemet()方法找到淘寶主頁的搜索框元素，並保存到WebElement實例對象中。

四、在搜索框中輸入字符串find element by className。

五、經過submit()，進行搜索。

六、結束測試，關閉瀏覽器。

6、By.CssSelector()

CssSelector，Selenium官網的Document裏極力推薦使用CSS locator，而不是XPath來定位元素，緣由是CSS locator比XPath locator速度快，特別是在IE下面（IE沒有本身的XPath 解析器(Parser)）他比xpath更高效更準確更易編寫，由於前端開發人員就是用CSS Selector設置頁面上每個元素的樣式，不管那個元素的位置有多複雜，他都能定位到，那咱們使用CSS Selector確定也能很是精準的定位到頁面Elements。

css定位能夠分爲四類：id、class、tagName、其餘屬性、路徑。

1 #id方式

兩種方式，能夠在前面加上tag名稱，也能夠不加

driver.findElement(By.cssSelector("#id_value"))  至關於使用id語法的driver.findElement(By.id("id_value")) 

driver.findElement(By.cssSelector("tag_name#id_value")) 至關於使用xpath語法的driver.findElement(By.xpath("//tag_name[@id='id_value']")) 

以百度主頁爲例，搜索框的HTML示例代碼以下，

 

 經過CssSelector的#id方式的java代碼以下：

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

public class FindElemenByCssSelector {
	@Test
	public void test() {
		WebDriver driver = new ChromeDriver(); // 打開chrome瀏覽器
		driver.get("http://www.baidu.com"); // 輸入網址
		WebElement e = driver.findElement(By.cssSelector("#kw")); // 實例化對象
		e.sendKeys("find element by CssSelector"); // 輸入find element by CssSelector
		driver.findElement(By.cssSelector("input#su")).click();// 點擊百度一下
		driver.quit(); // 關閉瀏覽器
	}
}

示例代碼詳解：

實例化對象一行，使用CssSelector中的#id方式

點擊百度一下那一行，使用CssSelector中的tagName#id方式

2 class方式 

兩種方式，前面加上tag名稱，也能夠不加。若是不加tag名稱時，點不能省略。

driver.findElement(By.cssSelector(".class_value"))  

driver.findElement(By.cssSelector("tag_name.class_value"))  

有的class_value比較長，並且中間有空格時，不能把空格原樣寫進去，那樣不能識別。這時，空格用點代替，前面要加上tag_name。

以下driver.findElement(By.cssSelector("tag_name.class_value1.calss_value2.class_value3"))  

以百度主頁爲例，搜索框的HTML示例代碼以下

 經過CssSelector的.class方式的java代碼以下：

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

public class FindElemenByCssSelector {
	@Test
	public void test() {
		WebDriver driver = new ChromeDriver(); // 打開chrome瀏覽器
		driver.get("http://www.baidu.com"); // 輸入網址
		WebElement e = driver.findElement(By.cssSelector(".s_ipt")); // 實例化對象
		e.sendKeys("find element by CssSelector"); // 輸入find element by CssSelector
		driver.findElement(By.cssSelector("input.bg.s_btn")).click();// 點擊百度一下
		driver.quit(); // 關閉瀏覽器
	}
}

示例代碼詳解：

其中實例化一行，使用.class方式獲取對象

點擊百度一下同樣，使用tagName.class_value1.class_value2方式獲取對象。

3 tagName方式

driver.findElement(By.cssSelector("input")

其中tagName是input

4 根據元素屬性

1)精準匹配： 

[A]  driver.findElement(By.cssSelector("input[name=username]"));屬性名=屬性值,id,class,等均可寫成這種形式

[B]  driver.findElement(By.cssSelector("input[type='submit'][value='Login']"));多屬性

2)模糊匹配：（正則表達式匹配屬性）

[A]  ^=           driver.findElement(By.cssSelector(Input[id ^='ctrl']));匹配到id頭部 如ctrl_12

[B]  $=           driver.findElement(By.cssSelector(Input[id $='ctrl']));匹配到id尾部 如a_ctrl

[C]  *=            driver.findElement(By.cssSelector(Input[id *= 'ctrl']));匹配到id中間如1_ctrl_12

5 子元素方式

<form id="form" class="fm" name="f">
　　<span id="s_kw_wrap" class="bg s_ipt_wr quickdelete-wrap">
　　　　<input id="kw" class="s_ipt" type="text" autocomplete="off" maxlength="100" name="wd">
　　</span>
　　<span id="s_btn_wr" class="btn_wr s_btn_wr bg">
　　　　<input id="su" class="btn self-btn bg s_btn" type="submit" value="百度一下">
　　</span>
</form>

以上代碼是百度首頁搜索輸入框和按鈕的html，下面講解以此爲例

　　1)子元素   A>B

　　　　WebElement input=  driver.findElement(By.cssSelector("form>span>input"));//搜索輸入框

　　2)後代元素   A空格B

　　　　WebElement input=  driver.findElement(By.cssSelector("form input"));//搜索輸入框

　　3)第一個後代元素　　:first-child

　　　　WebElement span= driver.findElemet(By.cssSelector("form :first-child"));//冒號前有空格，定位到form下全部級別的第一個子元素

　　　　　　可定位到三個元素：<span id="s_kw_wrap".../> <input id="kw"..../> <input id="su"........./>

　　　　WebElement span= driver.findElemet(By.cssSelector("form input:first-child"));//冒號前無空格，定位到form下全部級別的第一個input元素

　　　　　　可定位到兩個元素：<input id="kw"..../> <input id="su"........./>

　　　　WebElement span= driver.findElemet(By.cssSelector("form>span:first-child"));//冒號前無空格，定位到form直接子元素中的第一個span元素

　　　　　　可定位到一個元素：<span id="s_kw_wrap".../>

　　4)最後一個子元素   :last-child  [類同:first-child]

　　　　WebElement userName = driver.findEleme(By.cssSelector("form :last-child"));//冒號前有空格，定位到form下全部級別的第一個子元素

　　5)第2個子元素    :nth-child(N)  [類同:first-child]

　　　　WebElement userName = driver.findElemet(By.cssSelector("form#form :nth-child(2)"));//冒號前有空格，定位到form下全部級別的第二個子元素

7、By.linkText()

這個方法比較直接，即經過超文本連接上的文字信息來定位元素，這種方式通常專門用於定位頁面上的超文本連接。

以百度主頁爲例，搜索框的HTML示例代碼以下

 

 經過linkTest方式的java代碼以下：

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

public class FindElemenByCssSelector {
	@Test
	public void test() {
		WebDriver driver = new ChromeDriver(); // 打開chrome瀏覽器
		driver.get("http://www.baidu.com"); // 輸入網址
		WebElement a=  driver.findElement(By.linkText("新聞"));
		a.click();
	}
}

　

8、By.partialLinkText()

這個方法是上一個方法的擴展。當你不能準確知道超連接上的文本信息或者只想經過一些關鍵字進行匹配時，可使用這個方法來經過部分連接文字進行匹配。代碼以下：

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

public class FindElemenByCssSelector {
	@Test
	public void test() {
		WebDriver driver = new ChromeDriver(); // 打開chrome瀏覽器
		driver.get("http://www.baidu.com"); // 輸入網址
		WebElement a=  driver.findElement(By.partialLinkText("新"));
		a.click();
	}
}

參考文檔：http://www.cnblogs.com/qingchunjun/p/4208159.html

                  https://www.cnblogs.com/sylvia-liu/p/4469597.html

 

版權全部，歡迎轉載，轉載請註明出處：http://www.cnblogs.com/hustar0102/

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程