1. 什麼是 XPath 和 CSS 選擇器？
今天我們要在 Selenium 的網頁自動化道路上邁出巨大的一步，來認識一下 XPath 和 CSS 選擇器。 這些小但強大的工具將成為你在網頁上搜索元素的忠實夥伴。我們一起深入探討選擇器的世界， 學習如何使用它們進行更精確和高效的搜索。
如果說 HTML 文件是濃密的森林，那麼 XPath 和 CSS 選擇器就像是你的地圖和備忘錄。 它們允許你找到對應的樹（或者對應的元素，如果你更喜歡用程式語言來說的話）。 這些工具幫助你在網頁上找到元素，即使它們被數百行代碼和數百萬標籤所隱藏。
XPath
XPath (XML Path Language) 是一種用於導航 XML 文件的語言。 但是有人說過，HTML 是 XML 的混合體，對吧？ 這就是為什麼 XPath 對 HTML 文件那麼適用的原因。 它可以按照你定義的路徑精確地找到一個元素。
CSS 選擇器
CSS 選擇器來自層疊樣式表的世界。別擔心，學它並不需要你成為設計師！ 它們的作用是幫助你根據元素的類型、類別、ID 甚至是狀態精確選取元素。 使用它們比你想像的還要簡單——也許你已經無意中使用過它們來設計網頁了。
2. 在代碼中應用 XPath 和 CSS 選擇器
現在你已經知道選擇器是什麼了，我們直接進入實踐。 我們將學習如何將它們與 Selenium 一起使用，創造奇蹟！
使用 XPath
以下是一個使用 XPath 在 Selenium 中查找元素的例子：
from selenium import webdriver
# 設定驅動
driver = webdriver.Chrome()
# 開啟頁面
driver.get('https://example.com')
# 通過 XPath 搜索元素
element = driver.find_element_by_xpath('//div[@id="menu"]/ul/li/a')
# 輸出元素的文本
print(element.text)
# 關閉瀏覽器
driver.quit()
說明：
-
//div[@id="menu"]/ul/li/a— 這是我們的 XPath。 它的意思是："嘿，驅動，幫我找一個位於li裡面的a元素，再往上是ul，再往上是帶有id="menu"的div。"
使用 CSS 選擇器
現在來看看如何使用 CSS 選擇器：
from selenium import webdriver
# 設定驅動
driver = webdriver.Chrome()
# 開啟頁面
driver.get('https://example.com')
# 通過 CSS 選擇器搜索元素
element = driver.find_element_by_css_selector('div#menu > ul > li > a')
# 輸出元素的文本
print(element.text)
# 關閉瀏覽器
driver.quit()
說明：
-
div#menu > ul > li > a— 我們的 CSS 選擇器。 它用更簡潔的語法來完成與 XPath 相同的搜索。
3. XPath 和 CSS 選擇器的區別
你可能會問，XPath 和 CSS 選擇器有何不同？這問題很好！ 我們來看看在什麼情況下該使用哪一個。
靈活性 vs. 簡單性
XPath 更靈活：它可以在 DOM 樹中 "向上" 移動，並使用複雜的邏輯條件。 這使得它適用於更複雜的查詢。但是，有時候 CSS 選擇器的簡單性和簡明性 使得它更加可取，尤其是當需要基於類或 ID 找到元素時。
功能支持
XPath 支持使用函數——從文本檢查到處理屬性，比如 contains() 或 starts-with()。而 CSS 選擇器並不支持這麼複雜的功能。
執行速度
在某些場景下，CSS 選擇器的執行速度更快。這是因為瀏覽器原生優化了對 CSS 選擇器的處理， 使得它們成為簡單任務的默選。
語法
XPath 語法更為複雜，這既是它的優勢也是劣勢。 CSS 選擇器相對更易於書寫和掌握。
4. 實踐中的應用
我們運用這些知識來完成一個實際任務。 假設我們有一個包含產品表格的網頁，並需要收集所有產品的名稱和價格。 以下是實現方式：
使用 XPath 的示例
from selenium import webdriver
# 設定驅動
driver = webdriver.Chrome()
# 開啟頁面
driver.get('https://example.com/products')
# 搜索所有產品元素
products = driver.find_elements_by_xpath('//table[@class="product-table"]/tbody/tr')
# 提取每個產品的數據
for product in products:
name = product.find_element_by_xpath('.//td[@class="product-name"]').text
price = product.find_element_by_xpath('.//td[@class="product-price"]').text
print(f"Product: {name}, Price: {price}")
# 關閉瀏覽器
driver.quit()
使用 CSS 選擇器的示例
from selenium import webdriver
# 設定驅動
driver = webdriver.Chrome()
# 開啟頁面
driver.get('https://example.com/products')
# 搜索所有產品元素
products = driver.find_elements_by_css_selector('table.product-table > tbody > tr')
# 提取每個產品的數據
for product in products:
name = product.find_element_by_css_selector('td.product-name').text
price = product.find_element_by_css_selector('td.product-price').text
print(f"Product: {name}, Price: {price}")
# 關閉瀏覽器
driver.quit()
5. 注意事項和常見錯誤
當你使用 XPath 和 CSS 選擇器時，有一些陷阱需要避免。 例如，當你使用 XPath 的絕對路徑時，HTML 結構的輕微變動可能導致代碼失效。 因此，應該始終使用相對路徑以保持靈活性。
而 CSS 選擇器則可能變得難以閱讀，特別是在過於複雜的情況下， 因此，需要找到準確性和簡潔性之間的平衡。
此外，還要提到錯誤處理。如果元素未找到，Selenium 將拋出 NoSuchElementException。 使用 try-except 塊或等待方法如 WebDriverWait 來處理這些錯誤，讓你的代碼更可靠。
GO TO FULL VERSION