《手把手教你》系列技巧篇（八）-java+ selenium自動化測試-元素定位大法之By id（詳細教程）

巨集哥發表於2021-07-15
Java

1.簡介

 從這篇文章開始，要介紹web自動化核心的內容，也是最困難的部分了，就是：定位元素，並去對定位到的元素進行一系列相關的操作。想要對元素進行操作，第一步，也是最重要的一步，就是要找到這個元素，如果連元素都定位不到，後續什麼操作都是無用功，都是扯淡，因此巨集哥建議小夥伴或者同學們從這裡開始就要跟隨巨集哥的腳步，一步一個腳印的將基礎打結實，不要到後期了要操作元素，到處找人問到處碰壁。在selenium中查詢元素的介面是findElement介面了。findElement介面支援八種查詢網頁元素的方法，相信看過巨集哥寫的python版的selenium，都知道巨集哥將其稱為8中元素定位大法。巨集哥將按由簡入繁，從簡單到複雜順序一一介紹和分享給小夥伴們或者童鞋們。這篇文章就先介紹比較簡單方便的方法：By id。

2.自動化測試步驟 

巨集哥認為的大致步驟：定位元素→操作元素→驗證操作結果→記錄測試結果。

在自動化測試過程中，測試程式通常的操作頁面元素步驟找到Web的頁面元素，並賦予到一個儲存物件中 (WebElement)對儲存頁面元素的物件進行操作，例如：點選連結，在輸入框中輸入字元等，驗證頁面上的元素是否符合預期。

通過這三個步驟， 我們可以完成一個頁面元素的操作， 找到頁面元素是很重要的一個步驟。 找不到頁面元素，後面就沒法做了，Web頁面技術的現實複雜性， 造成大量的頁面元素很難定位。經常有人不知道怎麼定位。

3.什麼是定位？

巨集哥這裡說的定位和我們平時說的不一樣，Selenium能夠模擬使用者去瀏覽器頁面上執行對應（輸入，點選，清除，提交）等操作，它是憑什麼方式去尋找到頁面的元素？Selenium沒有視覺、聽覺等。Selenium通過在頁面上尋找元素位置，找到元素後，然後對元素進行相應的操作，Selenium尋找元素位置的方法，稱之為定位。

4.常用定位方法（8種）

（1）id（今天講解）
（2）name
（3）class name
（4）tag name
（5）link text
（6）partial link text
（7）xpath
（8）css selector

5.如何定位？

在使用selenium webdriver進行元素定位時,通常使用findElement或findElements方法結合By類返回元素控制程式碼來定位元素

findElement() 方法返回一個元素, 如果沒有找到,會丟擲一個異 NoElementFindException()

findElements()方法返回多個元素, 如果沒有找到,會返回空陣列, 不會丟擲異常

6.如何選擇定位方法？

策略是，選擇簡單，穩定的定位方法。當頁面元素有 id屬性的時候，儘量使用 id來定位。沒有的話，再選擇其他定位方法。cssSelector 執行速度快，推薦使用。
定位超連結的時候，可以考慮 linkText或 partialLinkText：但是要注意的是，文字經常發生改變，所以不推薦用。
xpath 功能最強悍。當時執行速度慢，因為需要查詢整個DOM, 所以儘量少用。實在沒有辦法的時候，才使用 xpath。
這裡，初學者可以根據下面的例項來一一瞭解如何進行元素的定位。

7.定位工具

定位的常用工具瀏覽器都自帶，如firefox有firebug、Chrome有“開發者工具”，說白了所有瀏覽器都可以通過F12進行定位的，只不過是通過工具會簡單一些。

8.工具使用

巨集哥今天先講解一下，Chrome的工具定位，後邊會陸續講解IE和Firefox的定位，巨集哥這裡只講解三大瀏覽器，其他的這裡不做說明和講解，有興趣的自己可以學習練習一下。

1. 開啟谷歌瀏覽器，輸入百度地址，開啟百度首頁，F12撥出開發者工具，如下圖所示：

2. 探測元素

點選圖示

移動到指定的元素

9.定位方法講解

通過ID定位

例子：探測百度主頁輸入框

在藍色區域，檢視到id=kw，則可以通過id去定位。

9.1程式碼設計

1.新建一個PageLoadTest類，開始編寫指令碼，如下圖所示：

9.2參考程式碼

package lessons;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

/**
 * @author 北京-巨集哥
 *
 * 2021年7月13日
 */
public class PageLoadTest {
    
    public  static  void  main(String [] args) throws InterruptedException {
         
        System.setProperty("webdriver.gecko.driver", ".\\Tools\\chromedriver.exe"); //指定驅動路徑
 
        WebDriver driver = new ChromeDriver ();
        driver.get("http://wwww.baidu.com");
        
        //By id 定位
        WebElement wid = driver.findElement(By.id( "kw" ));
        wid.sendKeys("北京巨集哥");
        driver.findElement(By.id( "su" )).click();
        //定位到文字，將文字高亮顯示
        //建立一個JavascriptExecutor物件
        JavascriptExecutor js =(JavascriptExecutor)driver;
 
        //新聞文字高亮顯示顏色
        js.executeScript ( "arguments[0].setAttribute('style', arguments[1]);",wid,"background: orange; border: 2px solid red;");
 
        Thread.sleep ( 2000 );
 
        driver.quit();
    }

}

9.3執行程式碼

1.執行程式碼，右鍵Run AS->java Application，控制檯輸出，如下圖所示：

2.電腦端的瀏覽器，如下小視訊所示：

10.小結

 好了，今天到這裡通過id定位就介紹完了，其實很簡單，就是找元素的id，一般來說id都是唯一的，當然了特殊的另說。一般都是絕大多數，特殊是個例，也就是我們常說的另類，感謝你耐心的閱讀。

相關文章