1105Selenium web自動化測試經驗分享-CSS定位總結
最近重拾web自動化測試的知識，打算寫個QQ郵箱的指令碼練練手，之後全心去搞Jmeter。今天先分享下自己整理的CSS定位的一些知識。
一）CSS定位
CSS（Cascading Style Sheets）是一種語言，它用來描述HTML和XML的元素顯示樣式；在CSS語言中有CSS選擇器(不同的策略選擇元素)，在Selenium中也可以使用這種選擇器。
提示：
1. 在selenium中推薦CSS定位，因為它比XPath定位速度要快
2. css選擇器語法非常強大，又比較繁瑣，所以需要多多練習
方法 driver.find_element_by_css_selector()
二）CSS定位總結
部分例子是用的百度-那個搜尋框，方便操作和理解。
其中有一行註釋 是我當時定位搜尋框的屬性。另外，為了除錯時方便看到輸入的結果，我在每個用例後面都增加了強制等待1秒。
1.CSS定位之 id屬性
根據元素id屬性來定位–#id
def test_24(self): """css 用#號來表示id屬性""" driver = webdriver.Chrome() driver.implicitly_wait(5) driver.get("https://www.baidu.com") # <input id="kw" class="s_ipt" autocomplete="off" maxlength="255" value="" name="wd"> driver.find_element_by_css_selector('#kw').send_keys('python') time.sleep(1) driver.quit()
2.CSS定位之 class屬性
根據元素class屬性來選擇–.class [可以記做：點class]
def test_25(self): """css 用.來表示class屬性""" driver = webdriver.Chrome() driver.implicitly_wait(5) driver.get("https://www.baidu.com") # <input id="kw" class="s_ipt" autocomplete="off" maxlength="255" value="" name="wd"> driver.find_element_by_css_selector('.s_ipt').send_keys('python') time.sleep(1) driver.quit()
3.CSS定位之 元素的屬性名和值
根據元素的屬性名和值----[attribute=‘value’]
def test_27(self):
"""css 根據元素的屬性名和值來選擇 格式：[attribute=value]
如：[type="password"] <選擇所有type屬性值為password的元素>"""
driver = webdriver.Chrome()
driver.implicitly_wait(5)
driver.get("https://www.baidu.com")
# <input id="kw" class="s_ipt" autocomplete="off" maxlength="255" value="" name="wd">
driver.find_element_by_css_selector('[id="kw"]').send_keys('python')
driver.find_element_by_css_selector('[class="s_ipt"]').send_keys('python')
driver.find_element_by_css_selector('[autocomplete="off"]').send_keys('python')
driver.find_element_by_css_selector('[name="wd"]').send_keys('python')
time.sleep(1)
driver.quit()
4.CSS定位之 標籤名+元素的屬性名和值
標籤名 與 屬性名和值的 組合來定位----tag_name[attribute=‘value’]
但是id和class屬性比較特殊，實際寫法----tag_name#id、tag_name.class
def test_28(self):
"""css 用標籤與 屬性名和值 組合 來定位"""
driver = webdriver.Chrome()
driver.implicitly_wait(5)
driver.get("https://www.baidu.com")
# <input id="kw" class="s_ipt" autocomplete="off" maxlength="255" value="" name="wd">
driver.find_element_by_css_selector('input.s_ipt').send_keys('python')
driver.find_element_by_css_selector('input#kw').send_keys('python')
time.sleep(2)
driver.find_element_by_css_selector('input[autocomplete="off"]').clear()
time.sleep(1)
driver.find_element_by_css_selector('input[name="wd"]').send_keys('python')
driver.find_element_by_css_selector('input[id="kw"]').send_keys('python')
driver.find_element_by_css_selector('input[class="s_ipt"]').send_keys('python')
time.sleep(1)
driver.quit()
5.CSS定位之 層級關係
最好使用>代替空格 來代表層級關係----tag1>tag2
def test_29(self):
"""css 用層級關係 來定位"""
driver = webdriver.Chrome()
driver.implicitly_wait(5)
driver.get("https://www.baidu.com")
# <input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off"> 子
# <span id="s_kw_wrap" class="bg s_ipt_wr quickdelete-wrap"> 父
# <form id="form" name="f" action="/s" class="fm"> 爺
# 爺爺定位孫子
driver.find_element_by_css_selector('form#form>span>input').send_keys('python')
driver.find_element_by_css_selector('form.fm>span>input').send_keys('python')
# 父定位子
driver.find_element_by_css_selector('span.quickdelete-wrap>input').send_keys('python')
driver.find_element_by_css_selector('span.s_ipt_wr>input').send_keys('python')
time.sleep(1)
driver.quit()
6.CSS定位之 邏輯運算
1.邏輯運算----無需寫and關鍵字----tag_name[attribute1=‘value1’][attribute2=‘value2’]
2.邏輯運算----不見得 非加標籤名----[attribute1=‘value1’][attribute2=‘value2’]
def test_30(self):
"""css 用邏輯運算來定位，同時匹配兩個屬性，這裡跟xpath不一樣，無需寫and關鍵字[不見得 加標籤名]"""
driver = webdriver.Chrome()
driver.implicitly_wait(5)
driver.get("https://www.baidu.com")
# <input id="kw" class="s_ipt" autocomplete="off" maxlength="255" value="" name="wd">
# 有tag_name
driver.find_element_by_css_selector('input[id="kw"][class="s_ipt"]').send_keys('python')
driver.find_element_by_css_selector('input[id="kw"][name="wd"]').send_keys('python')
driver.find_element_by_css_selector('input[autocomplete="off"][name="wd"]').send_keys('python')
time.sleep(2)
# 沒有tag_name
driver.find_element_by_css_selector('[id="kw"][name="wd"]').clear()
time.sleep(1)
driver.find_element_by_css_selector('[id="kw"][class="s_ipt"]').send_keys('python')
driver.find_element_by_css_selector('[autocomplete="off"][name="wd"]').send_keys('python')
time.sleep(1)
driver.quit()
7.CSS定位之模糊定位
1.模糊匹配----tag[attribute^=“p”] 說明：attribute屬性以p字母開頭的元素.
----tag[attribute$=“p”] 說明：attribute屬性以d字母結束的元素
----tag[attribute*=“p”] 說明：attribute屬性包含w字母的元素
2.模糊匹配–[不加標籤名]----[attribute^=‘v’]
[不加標籤名]----[attribute$=‘v’]
[不加標籤名]----[attribute*=‘v’]
def test_31(self):
"""css模糊匹配"""
driver = webdriver.Chrome()
driver.implicitly_wait(5)
driver.get("https://www.baidu.com")
# 有tag_name
driver.find_element_by_css_selector('input[autocomplete^="of"]').send_keys('python')
driver.find_element_by_css_selector('input[autocomplete$="f"]').send_keys('python')
driver.find_element_by_css_selector('input[autocomplete*="o"]').send_keys('python')
time.sleep(2)
# 沒有tag_name
driver.find_element_by_css_selector('[autocomplete^="of"]').clear()
time.sleep(1)
driver.find_element_by_css_selector('[autocomplete$="f"]').send_keys('python')
driver.find_element_by_css_selector('[autocomplete*="o"]').send_keys('python')
time.sleep(1)
driver.quit()
8.CSS定位之 索引定位
先定位父類再來定位子類，
tag1[attribute=“value”]>tag2:nth-child(1)、tag1[attribute=“value”]>tag2:nth-child(2)
請留意tag:nth-child()
nth-child() 是小括號
索引是從1開始，是當前tag在所有tag的順序排的
def test_31b2(self):
"""css 層級關係、 索引"""
driver = webdriver.Chrome()
driver.implicitly_wait(10)
driver.get("https://passport.csdn.net/account/login")
driver.find_element_by_link_text('賬號登入').click()
time.sleep(2)
# 使用者名稱 父類form下的第2個
driver.find_element_by_css_selector('form[id="fm1"]>input:nth-child(2)').send_keys('python')
time.sleep(0.5)
driver.find_element_by_css_selector('form[method="post"]>*:nth-child(2)').clear()
# 兄弟節點定位--這裡也是css selector的一個痛點，因為css的設計不允許有子元素能夠獲取父節點的辦法（至少目前沒有）
# 密碼 父類form下的第4個
driver.find_element_by_css_selector('div[class="user-pass"]>form>input:nth-child(4)').send_keys('python')
time.sleep(0.5)
driver.find_element_by_css_selector('div[class="user-info"]>div[class="user-pass"]>form>*:nth-child(4)').clear()
# 登入按鈕 父類form下的第12個
driver.find_element_by_css_selector('form[id="fm1"]>:nth-child(12)').click()
time.sleep(2)
driver.quit()
9.CSS定位之 其他
標籤頁定位
格式：tag_name 如：input <選擇所有input元素> 極不推薦！！！
def test_26(self):
"""css 用標籤名來定位,不推薦"""
driver = webdriver.Chrome()
driver.implicitly_wait(5)
driver.get("https://www.baidu.com")
# input <選擇所有input元素>
print(len(driver.find_elements_by_css_selector('input'))) # 列印input標籤總數量
time.sleep(1)
driver.quit()
一點經驗：
若某元素的class屬性值如果有多個，可以使用driver.find_element_css_selector(’.class1.class2.class3’), 這是同時用到了.class和邏輯運算。
20181108第二次修改：補充了標籤頁定位、索引定位的程式碼，同時新掉進、爬出好幾個坑。
CSS定位中 兄弟節點定位（子定位父） 沒有實現！
索引定位的數字是全部tag裡面的排序，非那類tag的排序。
交流技術 歡迎+QQ 153132336 zy
歡迎關注 微信公眾號：紫雲小站