selenium+python自動化測試之頁面元素定位

更新時間：2019年01月23日 14:31:42 作者：zh175578809

這篇文章主要介紹了selenium+python自動化測試之頁面元素定位，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

上一篇博客selenium+python自動化測試（二）–使用webdriver操作瀏覽器講解了使用webdriver操作瀏覽器的各種方法，可以實現(xiàn)對瀏覽器進(jìn)行操作了，接下來就是對瀏覽器頁面中的元素進(jìn)行操作，操作頁面元素，首先要找到操作的元素，對元素進(jìn)行定位

查看頁面源碼

要定位頁面元素，需要找到頁面的源碼，IE瀏覽器中，打開頁面后，在頁面上點擊鼠標(biāo)右鍵，會有“查看源代碼”的選項，點擊后就會進(jìn)入頁面源碼頁面，在這里就可以找到頁面的所有元素

使用Chrome瀏覽器打開頁面后，在瀏覽器的地址欄右側(cè)有一個圖標(biāo)，點擊這個圖標(biāo)后，會出現(xiàn)許多菜單項，選擇更多工具里的開發(fā)者工具，就會出現(xiàn)頁面的源碼，不同版本的瀏覽器菜單選項可能不同，但是都會在開發(fā)者工具里找到頁面的源碼

Firefox瀏覽器打開頁面后，在右鍵菜單里也可以找到“查看頁面源代碼”的選項。在Firefox中，可以使用瀏覽器自帶的插件查看定位元素，在Firefox的附加組件里搜索firebug進(jìn)行下載，安裝firebug組件后會在瀏覽器的工具欄中多出一個小蟲子的圖標(biāo)，點擊這個圖標(biāo)就可以打開組件查看頁面源碼，打開后如下圖所示

以百度首頁搜索頁面為例，看一下webdriver定位元素的八種方式

使用id定位

在頁面源碼中找到搜索輸入框的元素定義

<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">

可以看到輸入框有一個有一個id的屬性，調(diào)用find_element_by_id()根據(jù)id屬性來找到元素，參數(shù)為屬性的值

input_search = driver.find_element_by_id("kw")

使用name定位

使用find_element_by_name()根據(jù)name屬性找到元素，參數(shù)為name屬性的值

搜索框有一個name=”wd”的屬性，使用name查找搜索輸入框元素

input_search = driver.find_element_by_name("wd")

使用className定位

使用find_element_by_class_name()根據(jù)className屬性找到元素，參數(shù)為className屬性的值

搜索框有一個class=”s_ipt”的屬性，使用className查找元素

input_search = driver.find_element_by_class_name("s_ipt")

使用tagName定位

使用find_element_by_tag_name()根據(jù)tagName屬性找到元素，參數(shù)為元素標(biāo)簽的名稱

每個頁面的元素都有一個tag，搜索框的標(biāo)簽為input，有時候一個頁面里有許多相同的標(biāo)簽，所以用這種方法找到的元素一般都不準(zhǔn)確，除非這個元素使用的標(biāo)簽在這個頁面里是唯一的。一般不會使用這種方式來定位元素

input_search = driver.find_element_by_class_name("input")

使用link_text定位

頁面上都會有一些文本鏈接，點擊鏈接后會打開一個新的頁面，這些可以點擊的鏈接可以使用find_element_by_link_text來定位，百度首頁上方有如下幾個元素

例如要定位“新聞”，找到元素的代碼，有一個href的屬性，這是點擊后打開的頁面

<a  rel="external nofollow" name="tj_trnews" class="mnav">新聞</a>

使用link_text查找元素，參數(shù)為元素的文本信息

news = driver.find_element_by_link_text("新聞")

使用partial_link_text定位

這種方式類似于link_text的定位方式，如果一個元素的文本過長，不需要使用文本的所有信息，可以使用其中的部分文本就可以定位

使用partial_link_text查找百度首頁的“新聞”元素，參數(shù)為文本信息，可以使用全部的文本，也可以使用部分文本

news = driver.find_element_by_link_text("新聞") //使用全部文本
news = driver.find_element_by_link_text("新") //使用部分文本

使用css selector定位

使用css屬性定位元素有多種方法，可以使用元素的id、name、className，也可以使用元素的其他屬性，如果一個元素沒有上述的幾種屬性或者定位不到時，可以使用css來定位

還是使用百度搜索框的實例來說明css定位的用法

<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">

css使用元素的id定位

css屬性使用id定位時，使用#號表示元素的id

input_search = driver.find_element_by_css_selector("#kw") //使用元素的id定位

css使用元素的class定位

css屬性使用class定位時，使用.號表示元素的class

input_search = driver.find_element_by_css_selector(".s_ipt") //使用元素的class定位

css使用元素的tag定位

css屬性使用tagName定位時，直接使用元素的標(biāo)簽

input_search = driver.find_element_by_css_selector("input") //使用元素的tagName定位

css使用元素的其他屬性

除了上述3種屬性，css屬性可以使用元素的其他屬性定位，格式如下

input_search = driver.find_element_by_css_selector("[maxlength='255']") //使用元素的maxlength屬性定位
input_search = driver.find_element_by_css_selector("[autocomplete='off']") //使用元素的autocomplete屬性定位

可以在參數(shù)中加入元素的標(biāo)簽名稱

input_search = driver.find_element_by_css_selector("input#kw") //使用元素的id定位
input_search = driver.find_element_by_css_selector("input.s_ipt") //使用元素的class定位driver.find_element_by_css_selector("input[maxlength='255']") //使用元素的maxlength屬性定位
input_search = driver.find_element_by_css_selector("input[autocomplete='off']") //使用元素的autocomplete屬性定位

css的層級定位

當(dāng)一個元素使用自身的屬性不容易定位時，可以通過它的父元素來找到它，如果父元素也不好定位，可以再通過上元素來定位，以此類推，一直找到容易定位的父元素為止，通過層級定位到需要查找的元素

通過Firefox的firebug組件查看百度首頁的源碼

通過層級來定位搜索框

input_search = driver.find_element_by_css_selector("form#form>span:nth-child(1)>input")
input_search = driver.find_element_by_css_selector("form.fm>span:nth-child(1)>input")

搜索框的父元素為span標(biāo)簽，span的父元素為form，form有id和class屬性，可以通過這兩個屬性來定位，找到form元素后，form下有多個span標(biāo)簽，所以要使用span:nth-child(1)，表示form下的第一個span標(biāo)簽，這種用法很容易理解，表示第幾個孩子，最后是span下的input標(biāo)簽，span下只有一個input，所以就可以定位到搜索框

css邏輯運(yùn)算

用一個屬性來定位元素時，如果有其他元素的屬性和此元素重復(fù)，可以組合多個屬性來功共同定位

組合多個屬性定位元素定位百度搜索框

input_search = driver.find_element_by_css_selector("input[id='kw'][name='wd']")

在元素內(nèi)定義的屬性，都可以使用css來定位，使用其他幾種方式無法定位到元素時，可以使用css，夠強(qiáng)大！

使用xpath定位

XPath是一種在XML文檔中定位元素的語言。因為HTML可以看做XML的一種實現(xiàn)，所以selenium用戶可是使用這種強(qiáng)大語言在web應(yīng)用中定位元素。xpath也可以通過元素的各種屬性定位到元素

使用元素屬性定位

input_search = driver.find_element_by_xpath("http://*[@id='kw']") //通過元素id查找元素
input_search = driver.find_element_by_xpath("http://*[@name='wd']") //通過元素name查找元素
input_search = driver.find_element_by_xpath("http://*[@class='s_ipt']") //通過元素class查找元素
input_search = driver.find_element_by_xpath("http://*[@maxlength='255']") //通過其他屬性查找元素
input_search = driver.find_element_by_xpath("http://*[@autocomplete='off']") //通過其他屬性查找元素

前面的*號表示查找所有的標(biāo)簽元素，可以替換為標(biāo)簽名稱，更準(zhǔn)確的定位元素

input_search = driver.find_element_by_xpath("http://input[@id='kw']") //通過元素id查找元素
input_search = driver.find_element_by_xpath("http://input[@name='wd']") //通過元素name查找元素
input_search = driver.find_element_by_xpath("http://input[@class='s_ipt']") //通過元素class查找元素
input_search = driver.find_element_by_xpath("http://input[@maxlength='255']") //通過其他屬性查找元素
input_search = driver.find_element_by_xpath("http://input[@autocomplete='off']") //通過其他屬性查找元素

xpath層級定位

xpath也可以通過層級來定位，定位方式

input_search = driver.find_element_by_xpath("http://input[@id='form']//span[1]//input")
driver.find_element_by_xpath("http://input[@class='fm']//span[1]//input")

查找效果和通過css的層級定位是相同的，意思是form元素下面的第一個span元素的input標(biāo)簽子元素

xpath

xpath的邏輯元素通過and運(yùn)算符來組合元素屬性

input_search = driver.find_element_by_xpath("http://input[@id='kw' and name='wd']")

屬性匹配

xpath中還有一種更強(qiáng)大的定位方式，通過模糊匹配元素的屬性

news = driver.find_element_by_xpath("http://a[contains(text(), '新聞')]") //查找text中包含"新聞"的元素
input_search = driver.find_element_by_xpath("http://input[contains(@id, 'kw']") //查找id中包含"kw"的元素
input_search = driver.find_element_by_xpath("http://input[starts-with(@id, 'k']") //查找id以"k"開頭的元素
input_search = driver.find_element_by_xpath("http://input[ends-with(@id, 'w']") //查找id以"w"結(jié)尾的元素
input_search = driver.find_element_by_xpath("http://input[matchs(@id, 'k*']") //利用正則表達(dá)式查找元素

上面介紹了查找頁面元素的八種方法，通過這些方式找到的都是單個元素，如果需要批量查找元素，還有和上面方式對應(yīng)的八種復(fù)數(shù)形式

find_elements_by_id
find_elements_by_name
find_elements_by_class_name
find_elements_by_tag_name
find_elements_by_link_text
find_elements_by_partial_link_text
find_elements_by_css_selector
find_elements_by_xpath

這8種方法查找到的是一組元素，返回的是list，可以通過索引來操作元素

例如頁面上的復(fù)選框和單選框，或者頁面上有多個屬相相同的輸入框，這些屬性相同的一組元素，可以批量獲取，然后過濾出需要操作的元素，選擇其中的一個或者多個進(jìn)行操作

通過百度首頁搜索“selenium”關(guān)鍵字，會出現(xiàn)許多搜索結(jié)果，這些搜索結(jié)果具有相同的屬性，不同的是屬性的值不同，定位這些元素時，可以使用批量定位的方法

看下面的代碼

這是搜索selenium關(guān)鍵字后的頁面結(jié)果，每一個搜索結(jié)果都是可點擊的鏈接，定位這些元素的方法：

search_results = driver.find_elements_by_css_selector("h.t>a")
search_results[3].click() //通過索引點擊第4條搜索結(jié)果

第二個例子

<html>
 <head></head>
 <body>
 <h3>checkbox</h3>
 <div class="well">
  <form class="form-horizontal">
  <div class="control-group">
   <label class="control-label" for="c1">checkbox1</label>
   <div class="controls">
   <input type="checkbox" id="c1" />
   </div>
  </div>
  <div class="control-group">
   <label class="control-label" for="c2">checkbox2</label>
   <div class="controls">
   <input type="checkbox" id="c2" />
   </div>
  </div>
  <div class="control-group">
   <label class="control-label" for="c3">checkbox3</label>
   <div class="controls">
   <input type="checkbox" id="c3" />
   </div>
  </div>
  </form>
 </div>
 </body>
</html>

這個頁面上有3個復(fù)選框，打開后如下圖所示：

操作復(fù)選框

//查找所有的復(fù)選框并點擊
checkboxs = driver.find_element_by_xpath('input[@type="checkbox"]')
for checkbox in checkboxs:
 checkbox.click()
//點擊最后一個復(fù)選框
checkboxs[2].click()

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: