selenium元素定位之cssSelector,使用chrome瀏覽器的console查找元素

cssSelector簡介

CSS 選擇器參考手冊

CSS3選擇器

在CSS中,選擇器是一種模式,用于選擇需要添加樣式的元素。

"CSS"列指示該屬性是在哪個CSS版本中定義的(CSS1、CSS2還是CSS3)

更多詳情,請參考?CSS 選擇器參考手冊

一、定位方法:

1.通過id定位? ??如:<input id="kw">

driver.findElement(By.cssSelector("div#kw"));

2.通過class定位? ??如:<input class="s_ipt">

driver.findElement(By.cssSelector("input.s_ipt"));

3.通過屬性定位? ?如:<input name="wd">

driver.findElement(By.cssSelector("input[name=wd]"));

4.通過子元素定位?

driver.findElement(By.cssSelector("div#u_sp>a"));

與xpath不同,css中用">"右箭頭代表子元素,而xpath中用的"/"單斜杠表示

5.通過后代元素定位

driver.findElement(By.cssSelector("div#u_sp a"));

與xpath不同,css中用" "空格表示后代元素,而xpath中用的"http://"雙斜杠表示

6.通過元素的index定位

driver.findElement(By.cssSelector("div#u_sp>a:nth-child(1)"));

與xpath不同,css中用的寫法":nth-child(1)",xpath中用的寫法"[1]"

7.通過兄弟元素定位

driver.findElement(By.cssSelector("span#s_kw_wrap+input"));

xpath中用的寫法"http://input[preceding-sibling::span[@id='s_kw_wrap']]";

需要注意的是,css的定位到是兄弟元素下面的兄弟元素,而且只是下面的第1個元素(如:span元素id為"s_kw_wrap"有很多input兄弟元素,它只定位到它下面的第1個兄弟元素);而xpath不同的是可以定位到所有兄弟元素;

二、如何查看定位的元素個數

上面講解了css常用的定位方法,但是不能確定找出元素是唯一的,也許可能查找多個元素,Firefox可以借助FirePath插件可以快速定位,并且顯示定位到的元素個數,Chrome其實也可以查看元素個數

方法:

1.打開chrome瀏覽器的開發者工具(F12),然后選擇Console;

2.在上邊可以輸入要查找的元素定位,如:$('div#kw');

3.Console會輸出一段腳本,點擊箭頭展開,里邊會有一個length字段,后邊的數字就代表定位到的元素個數

如下圖:


或者開發者工具情況下按control+f ,把定位的路徑輸入到里邊,也可以查看定位的元素個數

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容