Selenium是用於Web應用測試的自動化測試框架，可以實現跨瀏覽器和跨平臺的Web自動化測試。Selenium通過使用WebDriver API來控制web瀏覽器，每個瀏覽器都都有一個特定的WebDriver 驅動，處理與Selenium和瀏覽器之間的通訊。

實現Web頁面自動化控制的先決條件是定位到正確的Web頁面元素，WebDriver提供了8種不同的Web元素定位方法：

Locator	Description
id	ID屬性，最常用的定位方法，每個元素的id應該是唯一的
css selector	CSS 選擇器
xpath	xpath表示式定位元素
name	NAME屬性，與id定位類似
link text	僅用於超連結文字
partial link text	使用方法和link text相同，partial link 只擷取部分文字即可
tag name	通過HTML標籤名定位
class name	使用類名定位，不能使用複合類名

ID定位

python程式碼：

element = self.driver.find_element_by_id("kw") element = self.driver.find_element(By.ID,"kw").send_keys("test")

NAME定位

python程式碼：

element = self.driver.find_element_by_name("wd")

Link Text定位

python程式碼：

element = self.driver.find_element_by_link_text("學術")

Partial Link Text定位

使用部分文字來定位

直接使用“123”來定位：

python程式碼：

element = self.driver.find_element_by_partial_link_text(**"123"**)

Xpath定位

XPath 使用路徑表示式來選取 XML 文件中的節點或節點集。具體語法參考：https://www.w3school.com.cn/xpath/xpath_syntax.asp

比如我們定位**“資訊”：**

可以在console中輸入JS程式碼：$x('//*[@id="s_tab"]//a[1]')

這樣就可以找到資訊對應的元素：

python程式碼：

element = self.driver.find_element_by_xpath('//*[@id="s_tab"]//a[1]')

CSS Selector定位

CSS選擇器是一種字串模式，基於HTML標籤，id，類和屬性的組合來標識元素。

具體語法參見：https://www.runoob.com/cssref/css-selectors.html

我們依然定位**“資訊”：**

在console中輸入：$('#s_tab a:nth-child(2)')

python程式碼：

element = self.driver.find_element_by_css_selector("#s_tab a:nth-child(2)")

完整測試程式碼

#!/usr/bin/python3
# -*-coding:utf-8-*-

from time import sleep
import pytest
from selenium import webdriver
from selenium.webdriver.common.by import By

class TestLocator():
    def setup(self):
        self.driver = webdriver.Chrome()
        self.driver.implicitly_wait(5)
        # self.driver.maximize_window()

    def teardown(self):
        self.driver.quit()

    def test_id(self):
        self.driver.get("https://www.baidu.com/")
        element = self.driver.find_element_by_id("kw")
        element.send_keys("test")
        # self.driver.find_element(By.ID,"kw").send_keys("test")
        assert element.get_attribute("value") == "test"

    def test_name(self):
        element = self.driver.find_element_by_name("wd")
        element.send_keys("test")
        assert element.get_attribute("value") == "test"

    def test_linktext(self):
        self.driver.get("https://www.baidu.com/")
        element = self.driver.find_element_by_link_text("學術")
        element.click()
        sleep(5)

    def test_partial_link_text(self):
        self.driver.get("https://www.baidu.com/")
        element = self.driver.find_element_by_partial_link_text("123")
        element.click()
        sleep(5)

    def test_xpath(self):
        self.driver.get("https://www.baidu.com/")
        self.driver.find_element_by_id("kw").send_keys("test")
        sleep(2)
        self.driver.find_element_by_id("su").click()
        sleep(2)
        element = self.driver.find_element_by_xpath('//*[@id="s_tab"]//a[1]')
        element.click()
        sleep(10)

    def test_css(self):
        self.driver.get("https://www.baidu.com/")
        self.driver.find_element_by_id("kw").send_keys("test")
        sleep(2)
        self.driver.find_element_by_id("su").click()
        sleep(2)
        element = self.driver.find_element_by_css_selector("#s_tab a:nth-child(2)")
        element.click()

if __name__ == '__main__':
    pytest.main()

總結

在工作中比較常用的是ID和NAME定位，用起來比較方便。但很多情況下沒有ID或者ID是動態變化的（比如使用Extjs生成的web頁面），需要用到CSS Selector和Xpath來定位。

Xpath是一種XML路徑語言，定位時採用遍歷頁面的方式，基本上能定位到所有web元素。CSS Selector 是一種樣式表語言，查詢 HTML DOM 中的元素。理論上CSS Selector比Xpath效率更高，個人感覺沒有顯著差異。其它差異還包括：

1. Xpath可以通過文字來定位，而CSS Selector不能。
2. Xpath可以通過子節點來定位父節點，CSS Selector是前向的，不能利用子節點定位父節點。
3. CSS Selector語法相比Xpath更加簡潔

--THE END--

文章標題：Selenium Web元素定位方法
本文作者：hiyo
本文連結：https://hiyong.gitee.io/posts/selenium_webelement_locator/
歡迎關注公眾號:「測試開發小記」及時接收最新技術文章！