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

BlaLeo發表於2021-07-27
CSS

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("http://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("http://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()
  1. 通過name屬性定位
    藉助name屬性，通過的find_element_by_css_selector()方法實現的原始碼如下。
from selenium import webdriver
from time import sleep

driver = webdriver.Firefox()
driver.get("http://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("http://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("http://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自動化測試
https://ke.qq.com/course/3172187?tuin=9c43f38e

【測試全系列視訊課程】請點選我哦.....

《全棧測試系列視訊》課程

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

圖書京東、噹噹有售

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

相關文章