溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
上一篇博客selenium+python自動(dòng)化測(cè)試（二）–使用webdriver操作瀏覽器講解了使用webdriver操作瀏覽器的各種方法，可以實(shí)現(xiàn)對(duì)瀏覽器進(jìn)行操作了，接下來就是對(duì)瀏覽器頁面中的元素進(jìn)行操作，操作頁面元素，首先要找到操作的元素，對(duì)元素進(jìn)行定位
查看頁面源碼
要定位頁面元素，需要找到頁面的源碼，IE瀏覽器中，打開頁面后，在頁面上點(diǎn)擊鼠標(biāo)右鍵，會(huì)有“查看源代碼”的選項(xiàng)，點(diǎn)擊后就會(huì)進(jìn)入頁面源碼頁面，在這里就可以找到頁面的所有元素
使用Chrome瀏覽器打開頁面后，在瀏覽器的地址欄右側(cè)有一個(gè)圖標(biāo)，點(diǎn)擊這個(gè)圖標(biāo)后，會(huì)出現(xiàn)許多菜單項(xiàng)，選擇更多工具里的開發(fā)者工具，就會(huì)出現(xiàn)頁面的源碼，不同版本的瀏覽器菜單選項(xiàng)可能不同，但是都會(huì)在開發(fā)者工具里找到頁面的源碼
Firefox瀏覽器打開頁面后，在右鍵菜單里也可以找到“查看頁面源代碼”的選項(xiàng)。在Firefox中，可以使用瀏覽器自帶的插件查看定位元素，在Firefox的附加組件里搜索firebug進(jìn)行下載，安裝firebug組件后會(huì)在瀏覽器的工具欄中多出一個(gè)小蟲子的圖標(biāo)，點(diǎn)擊這個(gè)圖標(biāo)就可以打開組件查看頁面源碼，打開后如下圖所示
以百度首頁搜索頁面為例，看一下webdriver定位元素的八種方式
使用id定位
在頁面源碼中找到搜索輸入框的元素定義
<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
可以看到輸入框有一個(gè)有一個(gè)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屬性的值
搜索框有一個(gè)name=”wd”的屬性，使用name查找搜索輸入框元素
input_search = driver.find_element_by_name("wd")
使用className定位
使用find_element_by_class_name()根據(jù)className屬性找到元素，參數(shù)為className屬性的值
搜索框有一個(gè)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)簽的名稱
每個(gè)頁面的元素都有一個(gè)tag，搜索框的標(biāo)簽為input，有時(shí)候一個(gè)頁面里有許多相同的標(biāo)簽，所以用這種方法找到的元素一般都不準(zhǔn)確，除非這個(gè)元素使用的標(biāo)簽在這個(gè)頁面里是唯一的。一般不會(huì)使用這種方式來定位元素
input_search = driver.find_element_by_class_name("input")
使用link_text定位
頁面上都會(huì)有一些文本鏈接，點(diǎn)擊鏈接后會(huì)打開一個(gè)新的頁面，這些可以點(diǎn)擊的鏈接可以使用find_element_by_link_text來定位，百度首頁上方有如下幾個(gè)元素
例如要定位“新聞”，找到元素的代碼，有一個(gè)href的屬性，這是點(diǎn)擊后打開的頁面
<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的定位方式，如果一個(gè)元素的文本過長，不需要使用文本的所有信息，可以使用其中的部分文本就可以定位
使用partial_link_text查找百度首頁的“新聞”元素，參數(shù)為文本信息，可以使用全部的文本，也可以使用部分文本
news = driver.find_element_by_link_text("新聞") //使用全部文本
news = driver.find_element_by_link_text("新") //使用部分文本
使用css selector定位
使用css屬性定位元素有多種方法，可以使用元素的id、name、className，也可以使用元素的其他屬性，如果一個(gè)元素沒有上述的幾種屬性或者定位不到時(shí)，可以使用css來定位
還是使用百度搜索框的實(shí)例來說明css定位的用法
<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
css屬性使用id定位時(shí)，使用#號(hào)表示元素的id
input_search = driver.find_element_by_css_selector("#kw") //使用元素的id定位
css屬性使用class定位時(shí)，使用.號(hào)表示元素的class
input_search = driver.find_element_by_css_selector(".s_ipt") //使用元素的class定位
css屬性使用tagName定位時(shí)，直接使用元素的標(biāo)簽
input_search = driver.find_element_by_css_selector("input") //使用元素的tagName定位
除了上述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屬性定位
當(dāng)一個(gè)元素使用自身的屬性不容易定位時(shí)，可以通過它的父元素來找到它，如果父元素也不好定位，可以再通過上元素來定位，以此類推，一直找到容易定位的父元素為止，通過層級(jí)定位到需要查找的元素
通過Firefox的firebug組件查看百度首頁的源碼
通過層級(jí)來定位搜索框
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屬性，可以通過這兩個(gè)屬性來定位，找到form元素后，form下有多個(gè)span標(biāo)簽，所以要使用span:nth-child(1)，表示form下的第一個(gè)span標(biāo)簽，這種用法很容易理解，表示第幾個(gè)孩子，最后是span下的input標(biāo)簽，span下只有一個(gè)input，所以就可以定位到搜索框
用一個(gè)屬性來定位元素時(shí)，如果有其他元素的屬性和此元素重復(fù)，可以組合多個(gè)屬性來功共同定位
組合多個(gè)屬性定位元素定位百度搜索框
input_search = driver.find_element_by_css_selector("input[id='kw'][name='wd']")
在元素內(nèi)定義的屬性，都可以使用css來定位，使用其他幾種方式無法定位到元素時(shí)，可以使用css，夠強(qiáng)大！
使用xpath定位
XPath是一種在XML文檔中定位元素的語言。因?yàn)镠TML可以看做XML的一種實(shí)現(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']") //通過其他屬性查找元素
前面的*號(hào)表示查找所有的標(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也可以通過層級(jí)來定位，定位方式
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的層級(jí)定位是相同的，意思是form元素下面的第一個(gè)span元素的input標(biāo)簽子元素
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á)式查找元素
上面介紹了查找頁面元素的八種方法，通過這些方式找到的都是單個(gè)元素，如果需要批量查找元素，還有和上面方式對(duì)應(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ù)選框和單選框，或者頁面上有多個(gè)屬相相同的輸入框，這些屬性相同的一組元素，可以批量獲取，然后過濾出需要操作的元素，選擇其中的一個(gè)或者多個(gè)進(jìn)行操作
通過百度首頁搜索“selenium”關(guān)鍵字，會(huì)出現(xiàn)許多搜索結(jié)果，這些搜索結(jié)果具有相同的屬性，不同的是屬性的值不同，定位這些元素時(shí)，可以使用批量定位的方法
看下面的代碼
這是搜索selenium關(guān)鍵字后的頁面結(jié)果，每一個(gè)搜索結(jié)果都是可點(diǎn)擊的鏈接，定位這些元素的方法：
search_results = driver.find_elements_by_css_selector("h.t>a")
search_results[3].click() //通過索引點(diǎn)擊第4條搜索結(jié)果
第二個(gè)例子
<html> <head></head> <body> <h4>checkbox</h4> <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>
這個(gè)頁面上有3個(gè)復(fù)選框，打開后如下圖所示：
操作復(fù)選框
//查找所有的復(fù)選框并點(diǎn)擊
checkboxs = driver.find_element_by_xpath('input[@type="checkbox"]')
for checkbox in checkboxs:
checkbox.click()
//點(diǎn)擊最后一個(gè)復(fù)選框
checkboxs[2].click()
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼