4 CSS selector 選擇元素的語法

2022-07-11 21:54:10 字數 3138 閱讀 8712

參考:

藍色框裡面用css 樣式,指定了class 值為animal的元素,要顯示為紅色。

其中 藍色框裡面的.animal就是 css selector ,或者說 css 選擇器。

css selector 語法就是用來選擇元素的。

既然 css selector 語法 天生就是瀏覽器用來選擇元素的,selenium自然就可以使用它用在自動化中,去選擇要操作的元素了。

只要 css selector 的語法是正確的, selenium 就可以選擇到該元素。

css selector 非常強大,學習selenium web自動化一定要學習css selector

find_element_by_css_selector(css selector引數)

find_elements_by_css_selector(css selector引數)

find_elements_by_css_selector('.animal')         --返回的就是class屬性為animal的所有元素。

css selector引數 可以是id、tag、class等屬性。

根據 tag名選擇元素的 css selector 語法非常簡單,直接寫上tag名即可:

elements = wd.find_elements_by_css_selector('div')   等價於  elements = wd.find_elements_by_tag_name('div')

根據id屬性選擇元素的語法是在id號前面加上乙個井號:#id值

比如,我們想在id 為 searchtext的輸入框中輸入文字你好

from selenium import webdriver

wd = webdriver.chrome(r'd:\webdrivers\chromedriver.exe')

wd.get('')

element = wd.find_element_by_css_selector('#searchtext')

element.send_keys('你好')

elements = wd.find_elements_by_css_selector('.animal')  等價於  elements = wd.find_elements_by_class_name('animal')

直接連線包含的,稱為直接子元素;中間隔了幾層的,統稱為後代元素

如果元素2元素1的 直接子元素, css selector 選擇子元素的語法:元素1>元素2

注意,最終選擇的元素是 元素2, 並且要求這個 元素2 是 元素1 的直接子元素

多層的情況: 元素1 > 元素2 > 元素3 > 元素4

就是選擇元素1裡面的子元素元素2裡面的子元素元素3裡面的子元素元素4, 最終選擇的元素是 元素4

如果元素2元素1的 後代元素:元素1  元素2

中間是乙個或者多個空格隔開

最終選擇的元素是 元素2 , 並且要求這個 元素2 是 元素1 的後代元素。

css 選擇器支援通過任何屬性來選擇元素,語法是用乙個方括號

比如要選擇上面的a元素,就可以使用[href=""]

element = wd.find_element_by_css_selector('[href=""]')

前面可以加上標籤名的限制,比如div[class='sknet']表示 選擇所有 標籤名為div,且class屬性值為sknet的元素。

根據屬性選擇,還可以不指定屬性值,比如[href], 表示選擇 所有 具有 屬性名 為href 的元素,不管它們的值是什麼。

css 還可以選擇 屬性值包含某個字串 的元素  (和正規表示式的一些符號比較類似)

比如, 要選擇a節點,裡面的href屬性包含了 miitbeian 字串,寫 a[href*="miitbeian"]

選擇 屬性值 以某個字串開頭的元素

比如, 要選擇a節點,裡面的href屬性以 http 開頭 ,寫 a[href^="http"]

選擇 屬性值 以某個字串結尾的元素

比如, 要選擇a節點,裡面的href屬性以 gov.cn 結尾 ,寫 a[href$="gov.cn"]

如果乙個元素具有多個屬性

沙漠之鷹div>

css 選擇器 可以指定 選擇的元素要 同時具有多個屬性的限制,像這樣div[class=misc][ctype=gun]

注意,tag及其屬性共同作為限定條件去 定位乙個元素,中間不要有空格。像上面代表有父子關係的才有空格。

elements = wd.find_elements_by_css_selector('span[class="date"]')     其中span後面不要有空格。

有時候定位元素寫的條件比較複雜,可以直接在瀏覽器f12的element標籤下,按ctrl + f,把你寫的條件貼上至搜尋框,回車執行。

找到的元素會高亮顯示。從而達到驗證的目的。

CSS選擇器(css selector)的使用

css一種標記語言,css定位就是通過css選擇器工具進行定位。查詢元素的效率比xpath高,語法比xpath更簡潔。id 選擇器 語法 id 如 passworda class 選擇器 語法 class 如 tela 元素選擇器 語法 element 如 input h1 屬性選擇器 語法 屬性名...

元素定位之css selector 選擇器定位)

語法 find element by css selector css選擇器定位策略 或者 find elements by css selector css選擇器定位策略 find element by css selector input autocomplete off tips 和xpath...

jQuery高階程式設計(4)選擇和操作DOM元素

1 讓選擇器來完成一切 2 jquery中的選擇器語法結合了css1 3和xpath 3 jquery選擇器的功能 1 選擇器 2 鏈式呼叫 3 工具方法 tr.highlighted removeclass highlighted addclass normal 4 選擇元素 jquery提供了大...