前面有講過該如何尋找網頁元素,而在Selenium裡面要尋找元素也是大同小異。
首先先創建實例
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
chrome_option = Options()
#用ChromeDriver創建瀏覽器實例
driver = webdriver.Chrome(options=chrome_option)
#目標網站URL
url = "https://example.com"
#連到網站
driver.get(url)
Selenium 中定位元素的主要方法有:
find_element_by_id()
通過元素的 id 屬性值定位:
driver.find_element_by_id("elementId")
find_element_by_name()
通過元素的 name 屬性值定位:
driver.find_element_by_name("elementName")
find_element_by_xpath()
通過 XPath 表達式定位:
driver.find_element_by_xpath("//div[@id='elementId']")
find_element_by_link_text()
通過完整的鏈接文本定位:
driver.find_element_by_link_text("鏈接文本")
find_element_by_partial_link_text()
通過部分鏈接文本定位:
driver.find_element_by_partial_link_text("部分文本")
find_element_by_tag_name()
通過 HTML 標籤名定位:
driver.find_element_by_tag_name("input")
通過 class 屬性值定位:
driver.find_element_by_class_name("className")
通過 CSS 選擇器定位:
driver.find_element_by_css_selector("#elementId")
還有一個方法是導入
from selenium.webdriver.common.by import By
如果使用該方法則元素定位的方法與示例如下:
driver.find_element(By.ID, 'elementId')
driver.find_element(By.NAME, 'elementName')
driver.find_element(By.XPATH, '//div[@id="elementId"]')
driver.find_element(By.LINK_TEXT, '鏈接文本')
driver.find_element(By.PARTIAL_LINK_TEXT, '部分文本')
driver.find_element(By.TAG_NAME, 'input')
driver.find_element(By.CLASS_NAME, 'className')
driver.find_element(By.CSS_SELECTOR, '#elementId')
其中 By 模塊提供了定位元素的各種方式,使代碼看起來更清晰簡潔。用法與直接使用方法類似。
上面兩種方式都是尋找單一元素若要尋找多個元素的話只需將element改為elements即可。
除此之外也能夠使用前面介紹過的JavaScript來尋找元素,使用方法是如下:
element = driver.execute_script("return document.getElementById('element_id')") # 在這裡放入JS程式碼
或是
with open('example.js', 'r', encoding="utf-8") as f:
js = f.read()
element = driver.execute_script(js)#放入讀取的.js檔案
這樣也可以
而在Selenium中,如果要找到某個元素下面的子元素,可以通過以下方式:
例如,先定位到父元素,然後調用find_element方法再定位子元素:
parent = driver.find_element_by_id("parent")
child = parent.find_element_by_class_name("child")
例如使用XPath的 "//父元素[@屬性='值']/子元素" 方式定位:
child = driver.find_element_by_xpath("//div[@id='parent']/span[@class='child']")
或者使用CSS Selector的 "父元素屬性值 > 子元素屬性值" 方式定位:
child = driver.find_element_by_css_selector("#parent > .child")
在這兩種方式中,都依賴於先定位父元素,然後再尋找該父元素內的子元素。
需要注意避免使用過於寬泛的父元素定位,否則可能定位到多個父元素,從而找到意外的子元素。