軟體測試/人工智慧|熟練使用web控制元件定位技巧，提升測試工作效率！

簡介

在做 Web 自動化時，最根本的就是操作頁面上的元素，首先要能找到這些元素，然後才能操作這些元素。工具或程式碼無法像測試人員一樣用肉眼來分辨頁面上的元素。那麼要如何定位到這些元素，本章會介紹各種定位元素的方法。

web 控制元件定位

id 定位

Python 實現

driver.find_element(By.ID,'query')

Java 實現

driver.findElement(By.id("query"));

name 定位

Python 實現

driver.find_element(By.NAME,'query')

Java 實現

driver.findElement(By.name("query"));

通常來說 name 屬性與 id 屬性在頁面中唯一，推薦使用這兩個屬性進行定位。

XPath 定位

XPath 是一個定位語言，英文全稱為：XML Path Language，用來對 XML 上的元素進行定位，但也適用於 HTML，下面來看一個例子。

要定位的元素是 Sogou 首頁的搜尋輸入框。

首先尋找 id 為 sf 的 form 元素，然後再尋找它的子元素 span，span 的 class 屬性為 sec-input-box，最後找 span 的子元素 input，以下程式碼演示。

Python 實現

driver.find_element(By.XPATH,"//form[@id='sf']/span[@class='sec-input-box']/input")

Java 實現

driver.findElement(By.xpath("//form[@id='sf']/span[@class='sec-input-box']/input"));

下面的定位也可以找到這個 input，請注意，這裡使用了雙斜槓//，它可以找到子孫節點，而但斜槓/只能找到子節點，以下程式碼演示。

Python 實現

driver.find_element(By.XPATH,"//form[@id='sf']//input[@id='query']")

Java 實現

driver.findElement(By.xpath("//form[@id='sf']//input[@id='query']"));

XPath 表示式更多內容可參考下面表格。

如何檢驗 XPath 定位是否正確？可以使用 chrome 的檢查模式 -> Console，輸入$x('XPath 表示式')即可。

透過 css_selector
XPath 可以定位絕大多數元素，但是 XPath 採用從上到下的遍歷模式，速度並不快，而 css selector 採用樣式定位，速度要優於 XPath，而且語法更簡潔。下面是 Selenium 使用 css selector 的例子。

css selector 找到 class 屬性值為 active 的元素，然後>表示找 class 屬性為 active 的元素的子節點，以下程式碼演示。

Python 實現

driver.driver.find_element(By.CSS_SELECTOR,'.logo-big')

Java 實現

driver.findElement(By.cssSelector(".logo-big"));

下表列出了常用的 css_selector 表示式的用法。

link 定位

元素中會出現文字，比如下面的分類，可以利用這段文字進行定位，以下是程式碼演示。

Python 實現

driver.driver.find_element(By.LINK_TEXT, '歡迎光臨測試人社群 | Powered by 霍格沃茲測試開發學社')

Java 實現

driver.findElement(By.linkText("歡迎光臨測試人社群 | Powered by 霍格沃茲測試開發學社"));

也可以採用部分匹配方式，不必寫全：“歡迎光臨”、“歡迎光臨測試人社群”、“霍格沃茲”，以下是程式碼演示。

Python 實現

driver.find_element(By.PARTIAL_LINK_TEXT, '測試人社群')

Java 實現

driver.findElement(By.partialLinkText("測試人社群"));

要注意 partial_link_text 與 link_text 的區別，partial_link_text 不用寫全，只需寫部分即可，比如上面使用“霍格沃茲”即可匹配到“歡迎光臨霍格沃茲測試學院”。

tag_name 定位

DOM 結構中，元素都有自己的 tag，比如 input tag，button tag，anchor tag 等等，每一個 tag 擁有多個屬性，比如 id，name，value class 等等。

下面的高亮部分就是 tag：

可以使用 tag 進行定位:

Python 實現

driver.driver.find_element(By.TAG_NAME,'input')

Java 實現

driver.findElement(By.tagName("input"));

要注意，儘量避免使用 tag_name 定位元素，因為有大量重複的元素！

class_name 定位

可以透過元素的 class 屬性值進行定位。

這裡的 active 用的就是上圖 class 的值。

Python 實現

driver.driver.find_element(By.CLASS_NAME, 'active')

Java 實現

driver.findElement(By.className("active"));

推薦使用

1. ID/Name 是最安全的定位選項。根據 W3C 標準，它在頁面中是唯一的，ID 在樹結構中也是唯一的。
2. CSS Selector 語法簡潔，搜尋速度快於 XPath。
3. XPath 定位功能強大，採用遍歷搜尋，速度略慢。
4. link，class name， tag name：不推薦使用，無法精準定位。

常見操作

Selenium 常見操作有：

1. 輸入、點選、清除。
2. 關閉視窗、瀏覽器。
3. 獲取元素屬性。
4. 獲取網頁原始碼、重新整理頁面。
5. 設定視窗大小。

輸入、點選、清除

輸入、點選、清除在 Selenium 中對應的方法分別是 send_keys、click、clear。

Python 實現

from selenium import webdriver

driver = webdriver.Chrome()
driver.get('http://www.baidu.com')
driver.find_element(By.NAME,'wd').send_keys('霍格沃茲測試學院')
driver.find_element(By.ID,'su').click()
driver.find_element(By.NAME,'wd').clear()

Java 實現

importorg.openqa.selenium.By;
importorg.openqa.selenium.WebDriver;
importorg.openqa.selenium.chrome.ChromeDriver;



publicclass demo2{
publicstaticvoidmain(String[]args)throwsInterruptedException{
WebDriverdriver=newChromeDriver();

driver.get("http://www.baidu.com'");
Thread.sleep(2000);
driver.findElement(By.name("wd")).sendKeys("霍格沃茲測試學院");
driver.findElement(By.id("su")).click();
driver.findElement(By.name("wd")).clear();

//關閉瀏覽器程式
driver.quit();
}
}

關閉視窗、瀏覽器

關閉當前控制程式碼視窗（不關閉程式）close()，關閉整個瀏覽器程式 quit()。

Python 實現

#匯入對應的依賴
from selenium import webdriver
#初始化webdriver
driver = webdriver.Chrome()
#訪問網站
driver.get('http"//www.baidu.com')
#關閉當前視窗
driver.close()
#關閉瀏覽器
driver.quit()

Java 實現

importorg.openqa.selenium.WebDriver;
importorg.openqa.selenium.chrome.ChromeDriver;
publicclass demo{
publicstaticvoidmain(String[]args)throwsInterruptedException{
WebDriverdriver=newChromeDriver();

driver.get("https://ceshiren.com");
Thread.sleep(2000);
//關閉頁面
driver.close();
Thread.sleep(2000);
//關閉瀏覽器程式
driver.quit();
}
}

獲取元素屬性

獲取元素標籤上的屬性 get_attribute('value')，元素的座標 location，元素的大小 size。

Python 實現

import logging
from selenium import webdriver

def test_baidu():
    driver = webdriver.Chrome()
    driver.get('https://www.baidu.com')
    search = driver.find_element(By.ID,'su')
    logging.basicConfig(level=logging.INFO)
    logging.info(search.get_attribute('value'))
    #獲取search的value屬性值並列印
    logging.info(search.get_attribute('value'))
    #列印search的位置座標
    logging.info(search.location)
    #列印search的元素大小
    logging.info(search.size)

Java 實現

importorg.openqa.selenium.*;
importorg.openqa.selenium.chrome.ChromeDriver;
importjava.util.logging.Logger;
publicclass demo{
privatestaticfinalLoggerlogger=Logger.getLogger(demo.class.getName());
publicstaticvoidmain(String[]args)throwsInterruptedException{

WebDriverdriver=newChromeDriver();

driver.get("https://www.baidu.com");

Thread.sleep(2000);

WebElementsearch=driver.findElement(By.id("su"));
//獲取search元素的value屬性值並列印
logger.info(search.getAttribute("value"));
//獲取search元素的位置座標值並列印

Pointp=search.getLocation();
logger.info("Width: "+p.x);
logger.info("Height: "+p.y);
//獲取search元素的大小並分別列印
Dimensionsize=search.getSize();
intwidth=size.getWidth();
intheight=size.getHeight();
logger.info("Width: "+width);
logger.info("Height: "+height);

driver.close();
//關閉瀏覽器程式
driver.quit();
}
}

輸出結果為：

INFO:root:百度一下
INFO:root:百度一下
INFO:root:{'x':844,'y':188}
INFO:root:{'height':44,'width':108}

獲取網頁原始碼、重新整理頁面

網頁原始碼 page_source，重新整理頁面 refresh()。

Python 實現

import logging
from selenium import webdriver

driver = webdriver.Chrome()
driver.get('http"//www.baidu.com')
#重新整理頁面
driver.refresh()
logging.basicConfig(level=logging.INFO)
#列印當前頁面的原始碼
logging.info(driver.page_source)

Java 實現

importorg.openqa.selenium.*;
importorg.openqa.selenium.chrome.ChromeDriver;
importjava.util.logging.Logger;
publicclass demo{
privatestaticfinalLoggerlogger=Logger.getLogger(demo.class.getName());
publicstaticvoidmain(String[]args)throwsInterruptedException{

WebDriverdriver=newChromeDriver();

driver.get("https://ceshiren.com");


Thread.sleep(2000);
driver.navigate().refresh();
//列印頁面原始碼
logger.info(driver.getPageSource());

driver.close();
//關閉瀏覽器程式
driver.quit();
}
}

設定視窗大小

設定視窗大小主要有最小化、最大化和自定義設定視窗具體的大小。

Python 實現

from selenium import webdriver

driver = webdriver.Chrome()
driver.get('http"//www.baidu.com')
#最小化視窗
driver.minimize_window()
#最大化視窗
driver.maximize_window()
#將瀏覽器設定為1000*1000的大小
driver.set_window_size(1000, 1000)

Java 實現

importorg.openqa.selenium.*;
importorg.openqa.selenium.chrome.ChromeDriver;

publicclass demo{

publicstaticvoidmain(String[]args)throwsInterruptedException{

WebDriverdriver=newChromeDriver();

driver.get("https://ceshiren.com");
//最大化頁面
driver.manage().window().maximize();
//最小化頁面
driver.manage().window().minimize();

Thread.sleep(2000);
//將瀏覽器頁面大小設定為800x600畫素
driver.manage().window().setSize(newDimension(800,600));

driver.close();
//關閉瀏覽器程式
driver.quit();
}
}

獲取更多軟體測試技術資料/面試題解析，請點選！