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