天天看點

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

CSS 指層疊樣式表 (CascadingStyleSheets),CSS一種用來表現HTML或XML等檔案樣式的計算機語言,其能夠靈活的為頁面提供豐富樣式的風格。

CSS使用選擇器為頁面元素綁定屬性(如ID、class等),這些選擇器可以被Selenium使用來進行定位元素。CSS較為靈活的選擇控件的任意屬性,CSS定位元素的速度比xpath速度快。

CSS定位是通過find_element_by_css_selector方法。

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

仍然以bing搜尋頁為例介紹CSS定位的用法。

要操作Bing搜尋頁。

通過CSS找到搜尋框與搜尋按鈕元素;

通過鍵盤輸入檢索的關鍵字;

用滑鼠單擊搜尋按鈕;

送出搜尋請求。

搜素框元素的html代碼。

搜尋按鈕元素的html代碼

1. ID定位

通過元素的ID,find_element_by_css_selector()方法實作的源碼如下。

2. class定位

通過元素的class, find_element_by_css_selector()方法實作的源碼如下。

通過css - class定位

通過name屬性定位

借助name屬性,通過的find_element_by_css_selector()方法實作的源碼如下。

通過css-屬性定位

4. CSS層級定位

類似XPath的層級定位,CSS也可以通過層級(父元素)實作元素的定位。

搜尋框元素的上一級是1個div标簽,該div标簽的clalss屬性等于b_searchboxForm,html代碼如下:

搜尋按鈕元素的上一級也是1個div标簽,該div标簽的id屬性等于sb_go_par,該div的html代碼如下:

搜素框元素與父元素(class等于b_searchboxForm)的結合。

搜尋按鈕元素與父元素(id等于sb_go_par)的結合。

可以看到父元素與子元素是通過 > 連接配接起來的。

通過CSS層級定位,find_element_by_css_selector()方法實作的源碼如下。

通過css 層級定位

輸入框為id,搜尋按鈕為class

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

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

單擊【CSS選擇器】,即可複制搜素框元素的CSS文法(#sb_form_q),這樣快速的擷取某元素的CSS文法。

單擊【CSS路徑】,可擷取搜素框元素的CSS路徑(類似XPath絕對路徑),如圖所示。

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

搜素框元素的CSS路徑。

搜素按鈕元素的CSS路徑。

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

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

如果你覺的文章讀的不過瘾,可以檢視詳細的視訊教程。

【2021】UI自動化測試:Selenium3自動化測試

https://edu.51cto.com/course/26488.html

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

(https://edu.51cto.com/lecturer/968349.html)

圖書京東、當當有售

京東:https://item.jd.com/12784287.html

當當:http://product.dangdang.com/29177828.html

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

繼續閱讀