『心善淵』Selenium3.0基礎 — 8、使用CSS選擇器定位元素
阿新 • • 發佈：2021-06-29
目錄
1、CSS選擇器介紹
CSS（Cascading Style Sheets）是一種語言，它被用來描述HTML 和XML 文件的表現。CSS 使用選擇器來為頁面元素繫結CSS屬性。這些選擇器可以被Selenium 用作另外的定位策略。
by_css_selector通過CSS選擇器查詢元素，這種元素定位方式跟by_xpath比較類似，Selenium官網的Document裡極力推薦使用CSS locator
CSS locator比XPath locator速度快，特別是在IE下，CSS locator比XPath更高效更準確更易編寫，對各種瀏覽器支援也很好。
2、CSS選擇器定位語法
（1）單數定位，獲得一個指定元素物件
driver.find_element_by_css_selector(“css選擇器定位策略”)
（2）複數定位，獲得指定元素結果集列表
driver.find_elements_by_css_selector(“css選擇器定位策略”)
3、Selenium中使用CSS選擇器定位元素
（1）通過屬性定位元素
CSS選擇器可以通過元素的id
class、標籤這三個常規屬性直接定位到目標元素。
頁面中程式碼如下：
<input type="telA" name="telA" id="telA" placeholder="電話A" class="telA" value="">
需求：使用CSS選擇器通過id，class和其他屬性，定位頁面中的電話A<input>標籤。
""" 1.學習目標: 必須掌握selenium中css定位方法 2.語法 2.1 在selenium中語法 (1)driver.find_element_by_css_selector("css選擇器定位策略") (2)driver.find_elements_by_css_selector("css選擇器定位策略") 2.2 css表示式寫法 (1)#表示id屬性 #id屬性值 例如: #telA (2).表示class屬性 .class屬性值 例如: .telA (3)其他屬性 [屬性名=屬性值] 例如: [name=telA] 3.需求 在頁面中,使用css定位電話A輸入框 """ # 1.匯入selenium from selenium import webdriver from time import sleep import os # 2.開啟瀏覽器 driver = webdriver.Chrome() # 3.開啟頁面 url = "file:///" + os.path.abspath("./練習頁面/註冊A.html") driver.get(url) # 4.定位電話A標籤,使用css selector # 4.1 通過id定位 telA_1 = driver.find_element_by_css_selector("#telA") print(telA_1.get_attribute("outerHTML")) # 4.2 通過class屬性定位 telA_2 = driver.find_element_by_css_selector(".telA") print(telA_2.get_attribute("outerHTML")) # 4.3 通過其他屬性定位 telA_3 = driver.find_element_by_css_selector("[name='telA']") print(telA_3.get_attribute("outerHTML")) # 5.關閉瀏覽器 sleep(2) driver.quit() """ 輸出結果： <input type="telA" name="telA" id="telA" placeholder="電話A" class="telA" value=""> <input type="telA" name="telA" id="telA" placeholder="電話A" class="telA" value=""> <input type="telA" name="telA" id="telA" placeholder="電話A" class="telA" value=""> """
（2）通過標籤定位元素
CSS選擇器也可以通過標籤與屬性的組合來定位元素。
在頁面中有如下程式碼：
<input type="telA" name="telA" id="telA" placeholder="電話A" class="telA" value="">
需求：使用CSS選擇器通過標籤+屬性定位頁面中的電話A<input>標籤。
"""
1.學習目標:
必須掌握selenium中css定位方法
2.語法
2.1 在selenium中語法
(1)driver.find_element_by_css_selector("css選擇器定位策略")
(2)driver.find_elements_by_css_selector("css選擇器定位策略")
2.2 css表示式寫法
標籤+屬性
格式：標籤名[屬性名=屬性值]
3.需求
在頁面中,使用css定位電話A輸入框
"""
# 1.匯入selenium
from selenium import webdriver
from time import sleep
import os
# 2.開啟瀏覽器
driver = webdriver.Chrome()
# 3.開啟頁面
url = "file:///" + os.path.abspath("./練習頁面/註冊A.html")
driver.get(url)
# 4.定位電話A標籤,使用css selector
# 標籤+屬性
# 通過name屬性
telA = driver.find_element_by_css_selector("input[name='telA']")
# 通過id屬性
telA_1 = driver.find_element_by_css_selector("input#telA")
print(telA.get_attribute("outerHTML"))
print(telA_1.get_attribute("outerHTML"))
# 5.關閉瀏覽器
sleep(2)
driver.quit()
"""
輸出結果：
<input type="telA" name="telA" id="telA" placeholder="電話A" class="telA" value="">
<input type="telA" name="telA" id="telA" placeholder="電話A" class="telA" value="">
"""
（3）通過層級關係定位元素
在前面XPath中講到層級關係定位，這裡CSS選擇器也可以達到同樣的效果。
在頁面中有如下程式碼：
<p id="p1">
<label for="userA">賬號A</label>
<input type="textA" name="userA" id="userA" placeholder="賬號A" required="" value=""> </p>
需求：使用CSS選擇器通過層級定位的方式，定位頁面中的賬號A<input>標籤。
"""
1.學習目標:
必須掌握selenium中css定位方法
2.語法
2.1 在selenium中語法
(1)driver.find_element_by_css_selector("css選擇器定位策略")
(2)driver.find_elements_by_css_selector("css選擇器定位策略")
2.2 css表示式寫法
層級定位 需要使用 > 或 空格表示層級關係
格式：父標籤名[父標籤屬性名=屬性值]>子標籤名
3.需求
在頁面中,使用css定位賬號A輸入框
"""
# 1.匯入selenium
from selenium import webdriver
from time import sleep
import os
# 2.開啟瀏覽器
driver = webdriver.Chrome()
# 3.開啟頁面
url = "file:///" + os.path.abspath("./練習頁面/註冊A.html")
driver.get(url)
# 4.定位賬號A標籤,使用css selector層級定位
textA_1 = driver.find_element_by_css_selector("p#p1 input")
print(textA_1.get_attribute("outerHTML"))
# 5.關閉瀏覽器
sleep(2)
driver.quit()
"""
輸出結果：
<input type="textA" name="userA" id="userA" placeholder="賬號A" required="" value="">
"""
（4）通過索引定位元素
語法格式：
- 表示父標籤下所有子標籤順序
父標籤[父標籤屬性名=父標籤屬性值]>:nth-child(索引值) - 表示父標籤下具體標籤的第幾個標籤
父標籤[父標籤屬性名=父標籤屬性值]>子標籤:nth-of-type(索引值)
在頁面中有如下程式碼：
<div id="zc">
<fieldset>
<legend>註冊使用者A</legend>
<p id="p1">
<label for="userA">賬號A</label>
<input type="textA" name="userA" id="userA" placeholder="賬號A" required="" value="">
</p>
<p>
<label for="password">密碼A</label>
<input type="password" name="passwordA" id="passwordA" placeholder="密碼A" value="">
</p>
</fieldset>
</div>
需求：使用CSS選擇器通過層級定位的方式，定位頁面中的賬號A<input>標籤。
"""
1.學習目標:
必須掌握selenium中css定位方法
2.語法
2.1 在selenium中語法
(1)driver.find_element_by_css_selector("css選擇器定位策略")
(2)driver.find_elements_by_css_selector("css選擇器定位策略")
2.2 css表示式寫法
索引定位
（1）父標籤名[父標籤屬性名=屬性值]>:nth-child(索引值)
從父標籤下所有標籤開始計算
（2）父標籤名[父標籤屬性名=屬性值]>子標籤名:nth-of-type(索引值)
表示父標籤下具體標籤的第幾個標籤
3.需求
在頁面中,使用css定位賬號A輸入框
"""
# 1.匯入selenium
from selenium import webdriver
from time import sleep
import os
# 2.開啟瀏覽器
driver = webdriver.Chrome()
# 3.開啟註冊A頁面
url = "file:///" + os.path.abspath("./練習頁面/註冊A.html")
driver.get(url)
# 4. 使用css索引定位賬號A輸入框
textA_1 = driver.find_element_by_css_selector("fieldset>:nth-child(2)>input")
textA_2 = driver.find_element_by_css_selector("fieldset>p:nth-of-type(1)>input")
print(textA_1.get_attribute("outerHTML"))
print(textA_2.get_attribute("outerHTML"))
# 5.關閉瀏覽器
sleep(2)
driver.quit()
"""
輸出結果：
<input type="textA" name="userA" id="userA" placeholder="賬號A" required="" value="">
<input type="textA" name="userA" id="userA" placeholder="賬號A" required="" value="">
"""
（5）通過邏輯運算定位元素
CSS選擇器同樣也可以實現邏輯運算，同時匹配兩個屬性，這裡跟XPath不一樣，無需寫and關鍵字。
在頁面中有如下程式碼
<input type="telA" name="telA" id="telA" placeholder="電話A" class="telA" value="">
需求：使用CSS選擇器通過邏輯運算定位的方式，定位頁面中的電話A<input>標籤。
"""
1.學習目標:
必須掌握selenium中css定位方法
2.語法
2.1 在selenium中語法
(1)driver.find_element_by_css_selector("css選擇器定位策略")
(2)driver.find_elements_by_css_selector("css選擇器定位策略")
2.2 css表示式寫法
邏輯定位
格式：標籤名[屬性名1=屬性值1][屬性名2=屬性值2]...
注意:屬性與屬性之間不能用空格
3.需求
在頁面中,使用css定位電話A輸入框
"""
# 1.匯入selenium
from selenium import webdriver
from time import sleep
import os
# 2.開啟瀏覽器
driver = webdriver.Chrome()
# 3.開啟註冊A頁面
url = "file:///" + os.path.abspath("./練習頁面/註冊A.html")
driver.get(url)
# 4. 使用css邏輯定位---電話A輸入框
# 注意：兩個屬性之間不能加空格，空格表示層級關係
telA = driver.find_element_by_css_selector("input[type='telA'][placeholder='電話A']")
print(telA.get_attribute("outerHTML"))
# 5.關閉瀏覽器
sleep(2)
driver.quit()
"""
輸出結果：
<input type="telA" name="telA" id="telA" placeholder="電話A" class="telA" value="">
"""
（6）通過模糊匹配定位元素
css_selector有三種模糊匹配方式：
^：匹配到id屬性值的頭部，如ctrl_12driver.find_element_by_css_selector("input[id^='ctrl']")$：匹配到id屬性值的尾部，如a_ctrldriver.find_element_by_css_selector("input[id$='ctrl']")*：匹配到id屬性值的中間，如1_ctrl_12driver.find_element_by_css_selector("input[id*='ctrl']")
在頁面中有如下程式碼：
<button type="submitA" value="註冊A" title="加入會員A">註冊使用者A</button>
需求：在頁面中，使用CSS選擇器定位註冊使用者A按鈕
"""
1.學習目標:
必須掌握selenium中css定位方法
2.語法
2.1 在selenium中語法
(1)driver.find_element_by_css_selector("css選擇器定位策略")
(2)driver.find_elements_by_css_selector("css選擇器定位策略")
2.2 css表示式寫法
模糊匹配：匹配屬性值
（1）* ：匹配所有
（2）^ ：匹配開頭
（3）$ ：匹配結尾
3.需求
在頁面中,使用css定位註冊使用者A按鈕
"""
# 1.匯入selenium
from selenium import webdriver
from time import sleep
import os
# 2.開啟瀏覽器
driver = webdriver.Chrome()
# 3.開啟註冊A頁面
url = "file:///" + os.path.abspath("./練習頁面/註冊A.html")
driver.get(url)
# 4. 使用css模糊匹配定位---註冊使用者A按鈕
button_1 = driver.find_element_by_css_selector("button[type^='su']")
print(button_1.get_attribute("outerHTML"))
button_2 = driver.find_element_by_css_selector("button[value$='冊A']")
print(button_2.get_attribute("outerHTML"))
button_3 = driver.find_element_by_css_selector("button[title*='入會']")
print(button_3.get_attribute("outerHTML"))
# 5.關閉瀏覽器
sleep(2)
driver.quit()
"""
輸出結果：
<button type="submitA" value="註冊A" title="加入會員A">註冊使用者A</button>
<button type="submitA" value="註冊A" title="加入會員A">註冊使用者A</button>
<button type="submitA" value="註冊A" title="加入會員A">註冊使用者A</button>
"""
4、總結：
這裡指做了一些最常用的css_selector定位方式的練習。
如果在工作中有需要用到一些特別的用法，可以檢視css_selector的文件。
CSS選擇器的文件地址：https://www.w3school.com.cn/cssref/css_selectors.asp