CSS Selector定位元素

2021-08-10 14:21:05 字數 2587 閱讀 8625

滴~ 今日打卡!博主之前寫過一篇關於xpath元素定位的部落格,裡面也有提到過xpath方法和css選擇器方法的比較(今天就補上css選擇器定位筆記。

1.css選擇器定位元素:

(1)標籤選擇器:

driver.find_element_by_css_selector(「li」)  選擇所有

li標籤元素

(2)類選擇器:

driver.find_element_by_css_selector(「div.menu」)   選擇所有

class

為menu

的div元素

driver.find_element_by_css_selector(「.menu」)   選擇所有

class

為menu

的元素

(3)id選擇器:

driver.find_element_by_css_selector(「a#menu」)  選中所有id為

menu的a

標籤元素

driver.find_element_by_css_selector(「#menu」)   選擇左右id為

menu

的元素

(4)關係選擇器:driver.find_element_by_css_selector(「div,a」)  選擇所有

div和a元素

driver.find_element_by_css_selector(「div>a」)  選中

div的直接子元素中的所有a元素

driver.find_element_by_css_selector(「div a」)  選擇

div後代元素中所有a元素

(5)屬性選擇器:driver.find_element_by_css_selector(「[name]」)  選擇所有具有

name

屬性的元素

driver.find_element_by_css_selector(「[name=』menu』]」)   選擇所有

name

屬性值為

menu

的元素

driver.find_element_by_css_selector(「[name~=』menu』]」)    選中所有

name

屬性值包含

menu

的元素

driver.find_element_by_css_selector(「[name|=』menu』]」)     選擇所有

name

屬性值以

menu

開頭的或等於

menu

的元素

driver.find_element_by_css_selector(「[name^=』menu』]」)      選擇所有

name

屬性值以

menu

開頭的元素

driver.find_element_by_css_selector(「[name$=』menu』]」)       選中所有

name

屬性值以

menu

結尾的元素

driver.find_element_by_css_selector(「div[name=』menu』]」)      選擇所有

name

屬性值等於

menu

的div

元素 (6)偽類選擇器(因為沒怎麼使用到,所以沒進行總結)

了解了這些,就要找個網頁去練一下手,用上這些方法去定位各種元素吧!在定位元素的過程中,發現有些元素可能需要拖動滾動條後才可見,這就要呼叫js來實現了,下面總結了兩個呼叫js的場景及其呼叫方法

1. 操作滾動條:window.scrollto()

(1)縱向滾動:window.scrollto(0,document.body.scrollheight)   活動到最下方

window.scrollto(0,0)滑動到頂部

window.scrollto(0,200)  滑動到

200畫素處

(2)滾動到指定元素處:

js=」arguments[0].scrollintoview();」   #arguments[0]指第乙個傳參   

ele = driver.find_element_by_id(「id」)

driver.execute_script(js4,ele)

(3)橫向滾動:window.scrollto(document.body.scrollwidth,0)  活動到最右側

window.scrollto(0,0) 滑動到最左側

window.scrollto(200,0)  滑動到

200畫素處

(4)操作內嵌滾動條:先切換到iframe裡

driver.switch_to.frame(),

再執行js

2. 隱藏選中的元素:

(1)driver.execute.script(『$(「#tooltip」).fadeout();』)

(2)buton=driver.find_element_by_id(「id」)

driver.execute_script(『$(arguments[0]).fadeout()』,button)

css selector定位元素

selenium中經常要用css selector定位元素,雖說可以用firefox的firebug firepath直接copy元素的xpath路徑,但有時還是很必要用css selector來定位,也算技多不壓身吧 系統的學習一下,也當是臨陣磨槍。一共8種方式的選擇器。根據元素的標籤定位,如下 ...

根據css selector定位元素的幾種方法

最方便快捷的用瀏覽器複製的css引數可以定位 find element by css selector css selector引數 選擇多個css元素 find elements by css selector css selector引數 此外css選擇器也可以根據tag名 id class.後...

selenium xpath定位元素

xpath獲取 f12開啟瀏覽器除錯視窗,找到元素對應html 右鍵 copy copy xpath xpath 是xml的查詢語言,和sql的角色很類似。以下面xml為例,介紹xpath 的語法。empire burlesque bob dylan 10.90 hide your heart bo...