selenium各類定位方法（轉）

selenium使用

Xpath

CSS

JavaScript

jQuery的定位方法

（治療selenium各類定位不到，點擊不了的併發症）

2017年07月28日 22:47:36

閱讀數：3696

【第一部分】開篇：先認識Xpath的4種定位方法

 

跟你說，你老是靠那個firebug，chrome的F12啥的右擊複製xpath絕對總有一天踩着地雷炸的你死活定位不到，這個時候就須要本身學會動手寫xpath，人腦總比電腦聰明，開始把xpath語法給我學起來！

 

第1種方法：經過絕對路徑作定位（相信你們不會使用這種方式）

By.xpath("html/body/div/form/input")

By.xpath("//input")

 

第2種方法：經過元素索引定位

By.xpath("//input[4]")

 

第3種方法：使用xpath屬性定位

By.xpath("//input[@id='kw1']")

By.xpath("//input[@type='name' and @name='kw1']")

 

第4種方法：使用部分屬性值匹配（最強大的方法）

By.xpath("//input[starts-with(@id,'nice')
By.xpath("//input[ends-with(@id,'很漂亮')
By.xpath("//input[contains(@id,'那麼美')]")

 

【說明】

starts-with 顧名思義，匹配一個屬性開始位置的關鍵字。

contains 匹配一個屬性值中包含的字符串。

text（） 匹配的是顯示文本信息，此處也能夠用來作定位用。

 

【舉例】

//input[starts-with(@name,'name1')]     查找name屬性中開始位置包含'name1'關鍵字的頁面元素

//input[contains(@name,'na')]         查找name屬性中包含na關鍵字的頁面元素

<a href="http://www.baidu.com">百度搜索</a>，那麼xpath寫法爲 //a[text()='百度搜索']     或者    //a[contains(text(),"百度搜索")]

 

【第二部分】我一位同事在使用selenium定位的時候踩到的坑

上次我有一個同事，定位元素的時候，用火狐瀏覽器firebug工具，定位到這個HTML代碼：

<span onlick="88_da_33_699999_x64_3.01.3730.spkg" name="delete" />  大約是這樣，死活定位不到，而後用到了xpath屬性的並列關係，and關鍵字，才定位的到。

//*[contains(@onclick, 'x64_3.01.3730.spkg') and @name='delete']

 

【第三部分】切換iframe時遇到的幾個鬼

（1）在切換ifame的時候，有時iframe是含有id的，就能夠直接定位使用，可是當iframe沒有id信息的時候，以下圖，

 

固然實際狀況中會遇到沒有id屬性和name屬性爲空的狀況，這時候就須要先定位iframe元素對象，這裏能夠經過tag先定位到，也能達到一樣效果。

以下代碼：

iframe = driver.find_element_by_tag_name("iframe")

driver.switch_to_frame(iframe)

切換完了以後，就能夠去正常定位iframe裏面的元素，driver.find_element_by_tagname(table) 之類的，同時也能夠用xpath的方式：例如 Xpath=//*[contains(@src, 'sysmanage/systemupgrade.action')] 之類的。

 

（2）若是有多個（層級）iframe標籤，那你就要看看總共有iframe標籤了，看看你所定位的iframe是數組中的第幾個iframe元素（從0開始數起，基於JavaScript的），能夠用chrome瀏覽器的F12的控制檯（Console）就能夠輸入document.getElementsByTagName('iframe').length這句代碼，便可打印出iframe的長度（也就是個數），而後按照從0開始數起。

 

【下面這張圖片可能有點大，看不到最右邊的Console，右擊圖片->新窗口打開】

 

 

（3）當iframe上的操做完後，想從新回到主頁面上操做元素，這時候，就能夠用switch_to_default_content()方法返回到主頁面。

以下代碼：

 

iframe = driver.find_element_by_tag_name("iframe")

driver.switch_to_frame(iframe)

switch_to_default_content()

 

（4）如何判斷元素是否在iframe上？
1.定位到元素後，切換到firepath界面。
2.看firebug工具左上角，若是顯示Top Window說明沒有iframe。
3.若是顯示iframe#xxx這樣的，說明在iframe上，#後面就是它的id。

 

【第四部分】selenium用javascript定位

 

由於selenium的內核引擎就是用JavaScript來驅動的，因此只要selenium自帶的那些原始辣雞方法出現定位不了的、點擊不了的併發症一旦發做，就可使用JavaScript大絕招，除了JavaScript，還有jQuery大絕招，一個個來，你陣亡了，他來替補，滔滔江水永不休。

 

1、如下總結了5種js定位的方法
除了id是定位到的是單個element元素對象，其它的都是elements返回的是list對象
1.經過id獲取
document.getElementById(「id」)
2.經過name獲取

 document.getElementsByName(「Name」)
返回的是list
3.經過標籤名選取元素
document.getElementsByTagName(「tag」)
4.經過CLASS類選取元素
document.getElementsByClassName(「class」)
兼容性：IE8及其如下版本的瀏覽器未實現getElementsByClassName方法
5.經過CSS選擇器選取元素
document.querySelectorAll(「css selector")
兼容性：IE8及其如下版本的瀏覽器只支持CSS2標準的選擇器語法

 

【舉例代碼】

js = 'document.getElementById("helloId").click();'

driver.execute_script(js)

 

js1 = 'document.getElementsByClassName("helloName")[0].value = "王大明";'   //整個HTML文檔裏第一個使用CSS樣式類的class="helloName"屬性，它的value屬性的值設置爲「王大明」

driver.execute_script(js1)

 

【第五部分】selenium用jquery定位【簡直逆天，老天爺都驚呆了，眼睛瞪的滾圓】

 

JQuery是2006年1月誕生的一個基於封裝JavaScript的框架，你常常看到的美圓符號帶上一個圓括號$('XXX')，其實就是document.getElementBy什麼什麼的這個js方法，至於XXX前面帶.的話，就是document.getElementByClass，帶#的話，就是document.getElementById。

 

 【看不清圖，右鍵新窗口打開圖片】

1.Id

inputTest="$('#smart_input').val('帥氣的我還能再削')"

driver.execute_script(inputTest)

2.Class

inputTest="$('.usersearch').val('帥氣的我還能再削')"

3. Type

inputTest="$(':text').val('帥氣的我還能再削')"

4. 層級

inputTest="$('#searchForm>#smart_input').val('帥氣的我還能再削')"

inputTest="$('#searchForm #smart_input ').val('帥氣的我還能再削')"   【注意兩個id選擇器「#searchForm #smart_input」中間是一個空格】

inputTest="$('#searchForm>input:first').val('帥氣的我還能再削')"

選擇最後一個input元素：

clickbutton="$('#searchForm>input:last').click()"

選擇第幾個input元素

inputTest="$('#searchForm>input:eq(0)').val('帥氣的我還能再削')"    從0開始算第一個

inputTest="$('#searchForm>input:nth-child(1)').val('帥氣的我還能再削')"   固然也能夠這樣，nth-child從1開始算第一個

知識連接：

 

一、nth-child(N)：下標從1開始；eq(N)：下標從0開始；

二、nth-child(N)：選擇多個元素；eq(N)：選擇一個元素。

 

5. 其餘

#inputTest="$('input[name=query]').val('帥氣的我還能再削')"

inputTest="$('input[id=smart_input]').val('帥氣的我還能再削')"

 

-------------------------------------------------------------------------------------------------------------------------------

 

【附錄1】xpath的語法使用基礎

Xpath的使用方法：

　例子 1：html/body/div[1]/div[2] （若是不熟悉html的朋友們，須要自行百度html。）

　　　該xpath 表示 ： 在 html標籤下 -> body標籤下 -> 第一個div標籤下 -> 第二個div標籤

　　很好理解，繼續

 

　例子 2：.//*[@id='content']/div[2]/ul

　　　這樣會有人不理解了 .//*[@id='content'] 究竟是什麼意思呢？

　　　　. 表明當前路徑

　　　　a//b　表示：在a標籤下的子孫輩b標籤

　　　　* 能夠是任何標籤

　　　　[@id='content'] 表示是 id 爲 content

　　因此：這個例子的意思是： id 爲 content 的任何子標籤下面 -> 第二個 div標籤下 -> ul 標籤

　　

Xpath基礎學習完畢，接下來開始進階學習

　　//p[text()='a']　　:文本爲 a 的p標籤

　　//p[text()='a']　　： 文本包含 a 的p標籤

　　//a[@class='abc'] 　　：class 爲 a的 p標籤　（固然咯。既然能夠爲 @class 就必定能用 @id ，爲何不聯想下 @src 和@href呢？）

　　//p[not(@class='a')] 　　：class 不爲 a的 p標籤

 

好了，進階完畢，若是要使用更高階的Xpath要先屬性以上內容，而後聯合 Selenium使用

 

Xpath和其餘定位方式的比較：（主要是和CSS定位的對比）

　　Xpath的最大好處是能向上查找，不過缺點是速度過慢。

【附錄2】CSS定位語法基礎

 

CSS定位速度快，功能多，可是不能向上查找，比xpath好用，執行效率比xpath來的快，曾經作過兩種定位比較的測速，是本人認爲最好用的定位方式。

 

大體用法總結：

　下面都是精華哦

一、*:checked  選中*的checked元素
二、 li.refined.list.group.item （若是class中間有空格，能夠.+.+.全寫也能夠只寫任意一個）
    .checkbox[type^='check'][onclick*='Bebe'][checked$='ed'] +a
    （開頭^=   包含*=   結尾$= ）+a 是選中同級的後面的a

三、 li a        ：選中 li 標籤的後代 a

五、 li>a       ：選中 li 標籤的子元素 a

四、 li,a        ：選中 li 和 a

五、 li +a      ：選中 li 同級的 下一個 a

六、 li ~a       ：選中 li 同級的 下面全部的 a

七、 li>a:last-child  /  li>a:last-of-type  : 選中 li 下最後面一個 a

八、 li:not([class*='_'])    : li 中的 calss 不含 '_' 

      li:not(:nth-of-type(1))    : 不含第一個 li 的全部 li

九、 li>a:nth-child(n)   /  li>a:nth-of-type(n) ：選中 li 下第 n 個 a

      li>a:nth-last-child(n)   /  li>a:nth-last-of-type(n)：選中 li 下,倒數第 n 個 a

    若是 n = odd 表示奇數

    若是 n = even 表示偶數
div h2:nth-child(n) ： 當div的第n個子元素是h2的時候

div h2:nth-of-type(n):   div下第n個h2子元素

十、 div[style]     : div中包含 屬性style 

十一、 li>a:only-child      ：li 下只有1個a的 a 標籤