Selenium3自動化測試【20】CSS定位元素

2021 年 7 月 27 日
筆記
2021版Selenium3, python3+selenium3, selenium3, 自動化測試框架

CSS 指層疊樣式表 (CascadingStyleSheets)，CSS一種用來表現HTML或XML等文件樣式的電腦語言，其能夠靈活的為頁面提供豐富樣式的風格。
CSS使用選擇器為頁面元素綁定屬性（如ID、class等），這些選擇器可以被Selenium使用來進行定位元素。CSS較為靈活的選擇控制項的任意屬性，CSS定位元素的速度比xpath速度快。
CSS定位是通過find_element_by_css_selector方法。

仍然以bing搜索頁為例介紹CSS定位的用法。
要操作Bing搜索頁。

通過CSS找到搜索框與搜索按鈕元素；
通過鍵盤輸入檢索的關鍵字；
用滑鼠單擊搜索按鈕；
提交搜索請求。

搜素框元素的html程式碼。

<input class="b_searchbox" id="sb_form_q" name="q" title="輸入搜索詞" type="search" value="" maxlength="100" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" aria-controls="sw_as" aria-autocomplete="both" aria-owns="sw_as">

搜索按鈕元素的html程式碼

<input type="submit" class="b_searchboxSubmit" id="sb_form_go" tabindex="0" name="go">

1. ID定位
通過元素的ID，find_element_by_css_selector()方法實現的源碼如下。

from selenium import webdriver
from time import sleep

driver = webdriver.Firefox()
driver.get("//cn.bing.com/")

driver.find_element_by_css_selector("#sb_form_q").send_keys("bella")
driver.find_element_by_css_selector("#sb_form_go").click()

sleep(3)
driver.quit()

2. class定位
通過元素的class, find_element_by_css_selector()方法實現的源碼如下。

from selenium import webdriver
from time import sleep

driver = webdriver.Firefox()
driver.get("//cn.bing.com/")

通過css – class定位

driver.find_element_by_css_selector(".b_searchbox").send_keys("bella")
driver.find_element_by_css_selector(".b_searchboxSubmit").click()

sleep(1)
driver.quit()

通過name屬性定位
藉助name屬性，通過的find_element_by_css_selector()方法實現的源碼如下。

from selenium import webdriver
from time import sleep

driver = webdriver.Firefox()
driver.get("//cn.bing.com/")

通過css-屬性定位

driver.find_element_by_css_selector("[name='q']").send_keys("bella")
driver.find_element_by_css_selector("[name='go']").click()

sleep(1)
driver.quit()

4. CSS層級定位
類似XPath的層級定位，CSS也可以通過層級（父元素）實現元素的定位。
搜索框元素的上一級是1個div標籤，該div標籤的clalss屬性等於b_searchboxForm，html程式碼如下：

<div class="b_searchboxForm" role="search" data-bm="15">
……
……
</div>

搜索按鈕元素的上一級也是1個div標籤，該div標籤的id屬性等於sb_go_par，該div的html程式碼如下：

<div id="sb_go_par" data-sbtip="搜索網頁">。
<input type="submit" class="b_searchboxSubmit" id="sb_form_go" tabindex="0" name="go">
</div>

搜素框元素與父元素（class等於b_searchboxForm）的結合。

find_element_by_css_selector("div.b_searchboxForm>input#sb_form_q")

搜索按鈕元素與父元素（id等於sb_go_par）的結合。

find_element_by_css_selector("div#sb_go_par>input.b_searchboxSubmit")

可以看到父元素與子元素是通過 > 連接起來的。
通過CSS層級定位，find_element_by_css_selector()方法實現的源碼如下。

from selenium import webdriver
from time import sleep

driver = webdriver.Firefox()
driver.get("//cn.bing.com/")

通過css 層級定位
輸入框為id，搜索按鈕為class

driver.find_element_by_css_selector("div.b_searchboxForm>input#sb_form_q").send_keys("bella")
driver.find_element_by_css_selector("div#sb_go_par>input.b_searchboxSubmit").click()

sleep(1)
driver.quit()

可以通過FireFox瀏覽器自帶的FireFox Developer Tools工具快速生成CSS語法，生成的操做方法與XPath相同，如圖所示。

單擊【CSS選擇器】，即可複製搜素框元素的CSS語法（#sb_form_q），這樣快速的獲取某元素的CSS語法。
單擊【CSS路徑】，可獲取搜素框元素的CSS路徑（類似XPath絕對路徑），如圖所示。

搜素框元素的CSS路徑。

html body.zhs.zh-CN.ltr table#hp_table tbody tr td#hp_cellCenter.hp_hd div#hp_container div#sbox.sw_sform div.search_controls form#sb_form.sw_box div.b_searchboxForm input#sb_form_q.b_searchbox

搜素按鈕元素的CSS路徑。

html body.zhs.zh-CN.ltr table#hp_table tbody tr td#hp_cellCenter.hp_hd div#hp_container div#sbox.sw_sform div.search_controls form#sb_form.sw_box div.b_searchboxForm div#sb_go_par input#sb_form_go.b_searchboxSubmit

通過CSS絕對路徑，find_element_by_css_selector()方法實現的源碼如下。

from selenium import webdriver
from time import sleep

driver = webdriver.Firefox()
driver.get("//cn.bing.com/")

通過css 層級 # 通過完成css路徑來定位

driver.find_element_by_css_selector("html body.zhs.zh-CN table#hp_table tbody tr td#hp_cellCenter.hp_hd div#hp_container div#sbox.sw_sform div.search_controls form#sb_form.sw_box div.b_searchboxForm input#sb_form_q.b_searchbox").send_keys("bella")

driver.find_element_by_css_selector("html body.zhs.zh-CN table#hp_table tbody tr td#hp_cellCenter.hp_hd div#hp_container div#sbox.sw_sform div.search_controls form#sb_form.sw_box div.b_searchboxForm input#sb_form_go.b_searchboxSubmit").click()

sleep(3)
driver.quit()

如果你覺的文章讀的不過癮，可以查看詳細的影片教程。
【2021】UI自動化測試：Selenium3自動化測試
//ke.qq.com/course/3172187?tuin=9c43f38e

【測試全系列影片課程】請點擊我哦…..

《全棧測試系列影片》課程

地址：//ke.qq.com/course/2525707?tuin=9c43f38e

圖書京東、噹噹有售

京東：//item.jd.com/12784287.html
噹噹：//product.dangdang.com/29177828.html)!

Tags: 2021版Selenium3 python3+selenium3 selenium3 自動化測試框架