使用 CSS 選擇器定位元素

2021-08-28 05:24:38 字數 3047 閱讀 1021

css可以通過元素的id、class、標籤(input)這三個常規屬性直接定位到,而這三種編寫方式,在html中編寫style的時候,可以進行標識如:

#su           .class          input

、使用絕對路徑來定位元素

在使用絕對路徑的時候,每個元素之間要有乙個空格。webelement username=driver.findelement(by.cssselector("html body div div form input"));

以父子關係的方式」>」來描述 webelement username = driver.findelement(by.cssselector("html >

body > div > div > form > input"));

這個尋找方法會有侷限,他決定於頁面的整體結構。如果有些許改變,選擇器將找不到這個元素。

、使用相對路徑來定位元素

使用相對路徑的時候我們可以直接定位元素。不用考慮他在 dom 中的位置。

假設定位 dom 中第乙個元素:

webelement username = driver.findelement(by.cssselector("input"));

三、使用class屬性選擇器來定位元素

我們可以先指定乙個 html 的標籤,然後加乙個「.」符號,跟上 class 屬性的值,方法如下:

webelement loginbutton = driver.findelement(by.cssselector("input.login"));這樣可以找到按鈕的標籤 class 為 login 的元素。

還可以簡寫查詢表達示,叧用 .和 class 屬性值,省略掉 html 的標籤。但是,這將會返回所有 class 為 login 的元素,導致結果並不一定是你所期望的那樣。

webelement loginbutton = driver.findelement(by.cssselector(".login"));

四、使用相對id選擇器來定位元素

webelement username = driver.findelement(by.cssselector("input#username"));

這將會返回 input 標籤中 id 為 username 的元素。可以通過這樣來簡化一下表示式,輸入「#」符號,跟上 id 的名稱即可,省略html的標籤。但是,這也將會返回所有 id 為 username 的元素。 

webelement username = driver.findelement(by.cssselector("#username"));

同級定位「+」: 通過先定位父類(self),再定位self 同級的類.

後代定位 「 」:通過先定位父類(self),再定位self 後代的類

五、使用屬性來定位元素

除了 class 和 id 屬性,css 選擇器也可以使用其他的元素屬性來定位。例如使用中的 name 屬性。

webelement username =driver.findelement(by.cssselector("input[name=username]"));

alt 屬性來定位

webelement previousbutton =driver.findelement(by.cssselector("img[alt='previous']"));

你可能會遇到乙個屬性不足以來定位到乙個元素的情況,你需要聯合使用其他的屬性來達到精確匹配。下面的例子中,使用多個屬性來定位元素。

webelement previousbutton =driver.findelement(by.cssselector("input[type='submit'][value='login']"));

六、使用屬性名稱選擇器來定位元素

通過指定元素中屬性的名稱而不是屬性的值來定位元素。如我們想要查詢所有

listimageswithalt =driver.findelements(by.cssselector("img[alt]"));

想要定位那些

七、部分屬性值的匹配語法

例子描述

input[id ^= ' ctrl']

以 *** 開始,例如,如果乙個元素的id是ctrl_12,就可以定位到此元素,匹配到 id 的頭部 ctrl

input[$='_username']

以 *** 結尾,例如,如果乙個元素的 id 是a_1_username,返將會匹配到 id 的尾部_username。

input[*='username']

包含。例如,如果乙個元素的 id 是 panel_login_username_textfield,返將會匹配到此 id 值的_username,從而定位到元素

定位注意:html/body/div[2] 找到的是第二個div,從1開始。

//form[1]/div/input[1]   //的意思是無論中間有多少元素,只要是滿足後面的條件的都是被選擇的。

//input[@class='input'] @的意思是選擇元素中的屬性。該方法的意思是,選擇所有input元素中class屬性為input的元素,若寫出//input[@class]表示選擇有屬性名class的input標籤,若寫成//input[@]表示選擇所有有屬性的input標籤。注意:以//開頭,預設是xpath定位方式。

css之定位元素

元素的定位是掌握css技術的核心,只有熟練運用元素定位才能用css創造出專業水準的頁面布局。定位元素的技術包括 box model float position 所謂盒模型,就是指每乙個html元素會在頁面上生成乙個盒子,將該元素包圍其中。html元素其實是由一堆的盒子構成的。p.test如上 生成...

CSS 浮動與定位元素

元素分為正常流和非正常流,非正常流中包含浮動與定位 先說定位,定位包含相對定位 relative 絕對定位 absolute 以及固定定位 fixed position屬性 static 預設 relative absolute fixed 無繼承性 相對定位 position relative 相...

CSS世界(五)定位元素

定位,指確定某一事物在一定環境中的位置 屬性值 fixed relative,absolute,static 非static屬性值,會使得元素表現為block預設定位,跟隨文件流 一般 從上至下,從左至右 修改過文字流方向除外 body固定定位,常用於廣告,或醒目的固定內容 作用於可視視窗 body...