selenium第三課(selenium八種定位頁面元素方法)


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

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

一、By.Id()

在HTML中,ID屬性--唯一標識一個元素的屬性。selenium中,ID被作為首選的識別屬性,因為這是最快的識別策略。

以百度主頁為例,搜索框的HTML示例代碼如下,其ID為kw;

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

搜索框的ID是"kw"。

 

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

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

在WebDriver中通過ID查找元素的java示例代碼如下:

 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 }

示例代碼詳解:

1、指定WebDriver 為ChromeDriver。

2、打開百度主頁。

3、通過ID為kw來查找搜索框,其中findElement()方法通過By.id()在頁面上查找指定的ID元素,並將查找的結果執行sendkeys操作,輸入要搜索的值。

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

5、通過ID為su來查找搜索按鈕,並執行click點擊操作。

6、觸發搜索按鈕的提交操作,進行搜索。

7、關閉瀏覽器,結束測試。

二、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 }

示例代碼詳解:

1、指定WebDriver 為ChromeDriver。

2、打開豆瓣主頁。

3、通過Name為q來調用findElemet()方法找到豆瓣主頁的搜索框元素,並保存到WebElement實例對象中代碼如下:

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

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

5、通過submit(),進行搜索。

6、結束測試,關閉瀏覽器。

注意:submit和click的區別。Click方法只適用於button,而submit可以用於提交表單。

三、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 }

示例代碼詳解:

1、指定WebDriver 為ChromeDriver。

2、打開百度主頁。

3、通過Xpath為//*[@id=''kw]來調用findElemet()方法找到百度主頁的搜索框元素,並保存到WebElement實例對象中代碼如下:

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

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

5、通過submit(),進行搜索。

6、結束測試,關閉瀏覽器。

四、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 }

示例代碼詳解:

1、指定WebDriver 為ChromeDriver。

2、通過TagName為input來調用findElements()方法,找到126主頁上所有的input元素並保存到WebElement實例對象列表中,代碼如下:

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

3、打印126主頁上TagName為input的元素的數量

4、結束測試,關閉瀏覽器。

從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 }

五、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 }

 

示例代碼詳解:

1、指定WebDriver 為ChromeDriver。

2、打開淘寶主頁。

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

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

5、通過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下所有級別的第二個子元素

七、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();
	}
}

 

八、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/

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM