CSS 指層疊樣式表 (CascadingStyleSheets),CSS一種用來表現HTML或XML等檔案樣式的計算機語言,其能夠靈活的為頁面提供豐富樣式的風格。
CSS使用選擇器為頁面元素綁定屬性(如ID、class等),這些選擇器可以被Selenium使用來進行定位元素。CSS較為靈活的選擇控件的任意屬性,CSS定位元素的速度比xpath速度快。
CSS定位是通過find_element_by_css_selector方法。
仍然以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相同,如圖所示。
單擊【CSS選擇器】,即可複制搜素框元素的CSS文法(#sb_form_q),這樣快速的擷取某元素的CSS文法。
單擊【CSS路徑】,可擷取搜素框元素的CSS路徑(類似XPath絕對路徑),如圖所示。
搜素框元素的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