Selenium 自動化瀏覽器定位元素的8種策略

更新於 2024/06/18閱讀時間約 4 分鐘

Selenium 是一個範圍廣泛的工具和函式庫的總稱專案,用於啟用和支援網頁瀏覽器的自動化。Selenium WebDriver 提供了 C#、JavaScript、Java、Python、Ruby 等多種語言的 API,可以用於編寫自動化測試軟體。

在定位元素時,WebDriver 提供對這 8 種傳統定位策略的支援。

1. 類別名稱

HTML 頁面網頁元素可以有類別屬性。我們可以使用 Selenium 中提供的類別名稱定位器來識別這些元素。

driver = webdriver.Chrome()
driver.find_element(By.CLASS_NAME, "information")

2. CSS 選擇器

CSS 是用來設定 HTML 頁面樣式的語言。我們可以使用 CSS 選擇器定位策略來辨識頁面上的元素。如果元素有 id,我們可以將定位器建立為 css = #id。否則,我們遵循的格式為 css =[屬性=值]。我們將使用 CSS 為「fname」文字方塊建立定位器。

driver = webdriver.Chrome()
driver.find_element(By.CSS_SELECTOR, "#fname")

3. ID 屬性

我們可以使用網頁中元素的 ID 屬性來定位它。一般來說,網頁上每個元素的 ID 屬性都應該是唯一的。我們將使用它來辨識「姓氏」欄位。

driver = webdriver.Chrome()
driver.find_element(By.ID, "lname")

4. 名稱屬性

我們可以使用網頁中元素的 NAME 屬性來定位它。一般來說,網頁上每個元素的 NAME 屬性都應該是唯一的。我們將使用它來辨識「電子報」核取方塊。

driver = webdriver.Chrome()
driver.find_element(By.NAME, "newsletter")

5. 連結文字

如果我們要定位的元素是連結,我們可以使用連結文字定位器來辨識網頁上的連結。連結文字是連結顯示的文字。在共用的 HTML 片段中,我們有一個可用的連結,讓我們看看我們要如何定位它。

driver = webdriver.Chrome()
driver.find_element(By.LINK_TEXT, "Selenium Official Page")

6. 部分連結文字

如果我們要定位的元素是連結,我們可以使用部分連結文字定位器來辨識網頁上的連結。連結文字是連結顯示的文字。我們可以傳遞部分文字作為值。在共用的 HTML 片段中,我們有一個可用的連結,讓我們看看我們要如何定位它。

driver = webdriver.Chrome()
driver.find_element(By.PARTIAL_LINK_TEXT, "Official Page")

7. 標籤名稱

我們可以使用 HTML 標籤本身作為定位器,來辨識網頁上的網頁元素。從上面共用的 HTML 片段中,讓我們使用其 HTML 標籤「a」來辨識連結。

driver = webdriver.Chrome()
driver.find_element(By.TAG_NAME, "a")

8. XPath 表達式

HTML 文件可以視為 XML 文件,然後我們可以使用 XPath,這將是遍歷以到達感興趣的元素的途徑,來定位元素。XPath 可以是絕對 XPath,它是由文件的根目錄建立的。例如 /html/form/input[1]。這將傳回男性選項按鈕。或者 XPath 可以是相對的。例如 //input[@name='fname']。這將傳回名字文字方塊。讓我們使用 XPath 為女性選項按鈕建立定位器。

driver = webdriver.Chrome()
driver.find_element(By.XPATH, "//input[@value='f']")


留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Chih-Yuan Yip的沙龍 的其他內容
JavaScript (簡稱 JS) 是具有一級函數的輕量級、直譯式或即時編譯的程式語言。它因為用作網頁的腳本語言而大為知名,但也用於許多非瀏覽器的環境,像是 Node.js 等。由於 JavaScript 語法上的一些缺點,軟體工程師們又設計出了 CoffeeScript、TypeScript 和
Ruby on Rails 是一個使用 Ruby 語言編寫的開源 Web 應用程式框架。 PostgreSQL 是一個強大、開源的物件關聯式資料庫系統,擁有超過 35 年的活躍開發歷程,並以其可靠性、功能強大性和效能而享有盛譽。 PostgreSQL 提供許多特定資料類型,以下是 Rails 支
什麼是 CSS 預處理器 CSS 預處理器是一種工具,使用專門的語法來生成 CSS 樣式表。市面上有許多 CSS 預處理器可供選擇,它們通常會提供一些純 CSS 中沒有的功能,例如變數、混入、巢狀選擇器等。這些功能可以使 CSS 結構更易讀、更易於維護,並提高開發效率。 為什麼使用 CSS 預處
JavaScript (簡稱 JS) 是具有一級函數的輕量級、直譯式或即時編譯的程式語言。它因為用作網頁的腳本語言而大為知名,但也用於許多非瀏覽器的環境,像是 Node.js 等。由於 JavaScript 語法上的一些缺點,軟體工程師們又設計出了 CoffeeScript、TypeScript 和
Ruby on Rails 是一個使用 Ruby 語言編寫的開源 Web 應用程式框架。 PostgreSQL 是一個強大、開源的物件關聯式資料庫系統,擁有超過 35 年的活躍開發歷程,並以其可靠性、功能強大性和效能而享有盛譽。 PostgreSQL 提供許多特定資料類型,以下是 Rails 支
什麼是 CSS 預處理器 CSS 預處理器是一種工具,使用專門的語法來生成 CSS 樣式表。市面上有許多 CSS 預處理器可供選擇,它們通常會提供一些純 CSS 中沒有的功能,例如變數、混入、巢狀選擇器等。這些功能可以使 CSS 結構更易讀、更易於維護,並提高開發效率。 為什麼使用 CSS 預處
你可能也想看
Google News 追蹤
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
下載: https://chromedriver.com/download#stable 選擇對應版本下載 如果不能執行就檢查一下權限,賦予執行的權力 例如: chmod +x /usr/local/bin/chromedriver (位置請自行變更)
Thumbnail
使用顯性等待,以及讓我們的自動化網頁看起來有像測試的樣子 另外,readmoo電子書真的很方便啊
取得最多列數 行數 openpyxl sheet.max_row sheet.max_column
單純只是因為電腦的chrome更新了 但程式執行的chromedriver版本太舊 只要到https://chromedriver.chromium.org/downloads 下載相對應的版本即可 例如本文中98.0.4758.102就下載98.0.4758.102的版本放到程式資料夾中即可
Thumbnail
Selenium WebDriver Page Object Model (POM) 設計模式,若是有開發過 UI 自動化測試或是寫網路爬蟲的多少都有聽過或是看過吧!  最近剛好有幸接觸到某外商的 SDET 面試考試,題目要求使用 POM 設計 UI 自動化測試,又再度幫自己複習一遍。 Why?
Thumbnail
畢竟~我是一個懶人嘛... 估狗之後,大部分的做法就是手動的去下載當前瀏覽器對應版本的 Driver,放到一個特定位置,將 Driver Binary 位置指向它。 在 Google Chrome About Page 你可以看到版本 接著去下載對應的 Chrome Driver ↓ 解決方案:
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
下載: https://chromedriver.com/download#stable 選擇對應版本下載 如果不能執行就檢查一下權限,賦予執行的權力 例如: chmod +x /usr/local/bin/chromedriver (位置請自行變更)
Thumbnail
使用顯性等待,以及讓我們的自動化網頁看起來有像測試的樣子 另外,readmoo電子書真的很方便啊
取得最多列數 行數 openpyxl sheet.max_row sheet.max_column
單純只是因為電腦的chrome更新了 但程式執行的chromedriver版本太舊 只要到https://chromedriver.chromium.org/downloads 下載相對應的版本即可 例如本文中98.0.4758.102就下載98.0.4758.102的版本放到程式資料夾中即可
Thumbnail
Selenium WebDriver Page Object Model (POM) 設計模式,若是有開發過 UI 自動化測試或是寫網路爬蟲的多少都有聽過或是看過吧!  最近剛好有幸接觸到某外商的 SDET 面試考試,題目要求使用 POM 設計 UI 自動化測試,又再度幫自己複習一遍。 Why?
Thumbnail
畢竟~我是一個懶人嘛... 估狗之後,大部分的做法就是手動的去下載當前瀏覽器對應版本的 Driver,放到一個特定位置,將 Driver Binary 位置指向它。 在 Google Chrome About Page 你可以看到版本 接著去下載對應的 Chrome Driver ↓ 解決方案: