瞭解過前端知識的人，應該對css熟悉。它是用於給html頁面新增樣式和佈局的，css的定位包括class，ID選擇器，元素屬性選擇器和偽類等。其實selenium的css定位跟頁面的css語法非常的像，有點異卵雙胞胎的意思，為啥不是同卵雙胞胎呢？因為它們之間還是有點區別的。現在我們來具體學習下。
1.透過屬性定位元素
CSS選擇器可以透過元素的
id
、
class
、
tag
標籤這三個常規屬性直接定位到目標元素
例如：
‘’‘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。匯入seleniumfrom selenium import webdriverfrom time import sleepimport 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（）‘’‘輸出結果：’‘’
2.透過標籤定位元素
例如：
‘’‘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。匯入seleniumfrom selenium import webdriverfrom time import sleepimport 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（）‘’‘輸出結果：’‘’
3.透過層級關係定位元素
例如：
‘’‘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。匯入seleniumfrom selenium import webdriverfrom time import sleepimport 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（）‘’‘輸出結果：’‘’
4.透過索引定位元素
例如：
‘’‘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。匯入seleniumfrom selenium import webdriverfrom time import sleepimport 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（）‘’‘輸出結果：’‘’
5.透過邏輯運算定位元素
CSS選擇器同樣也可以實現邏輯運算，同時匹配兩個屬性，這裡跟XPath不一樣，無需寫and關鍵字
例如：
‘’‘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。匯入seleniumfrom selenium import webdriverfrom time import sleepimport 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（）‘’‘輸出結果：’‘’
6.透過模糊匹配定位元素
css_selector
有三種模糊匹配方式
匹配到
id
屬性值的頭部，如
ctrl_12
driver。find_element_by_css_selector（“input［id^=‘ctrl’］”）
匹配到
id
屬性值的尾部，如
a_ctrl
driver。find_element_by_css_selector（“input［id$=‘ctrl’］”）
匹配到
id
屬性值的中間，如
1_ctrl_12
driver。find_element_by_css_selector（“input［id*=‘ctrl’］”）
‘’‘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。匯入seleniumfrom selenium import webdriverfrom time import sleepimport 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（）‘’‘輸出結果：’‘’
本次總結了常用的css定位方式的練習
CSS選擇器的文件地址：
https：//www。w3school。com。cn/cssref/css_selectors。asp
