1. 程式人生 > >selenium WebDriver定位元素學習總結

selenium WebDriver定位元素學習總結

定位元素先要掌握基本的HTML語法:

webdriver屬於selenium體系中設計出來操作瀏覽器的一套API,webdriver是python的一個用於實現web自動化的第三方庫。

自動化要做的就是模擬滑鼠和鍵盤來操作來操作這些元素,點選、輸入、滑鼠懸停等等。操作這些元素前首先要找到它們,WebDriver提供了8中定位元素的方法,python語言


from selenium import webdriver

url = "http://managerx.biddingx.com/#"
driver = webdriver.Firefox()
driver.implicitly_wait(20)
driver.get(url)
#driver.find_element_by_id("LoginFormEmail").clear()  #通過id定位元素
driver.find_element_by_id("LoginFormEmail").send_keys("qqq.com")
#driver.find_element_by_id("LoginFormPass").clear()   #通過id定位元素
driver.find_element_by_id("LoginFormPass").send_keys("xxxxxx")
driver.find_element_by_xpath(".//*[@id='SCENES_LOGIN']/div/div/div[2]/div[4]/button").click() #通過xpath定位,層級與屬性結合定位

driver.quit()

所對應的方法如下:

id定位

webdriver提供的id定位的方法是通過元素的id屬性來查詢元素的:

find_element_by_id()

eg:

driver.find_element_by_id("LoginFormEmail")

name定位

find_element_by_name()

eg:通過name定位百度輸入框

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

find_element_by_name("wd").send_keys("python")

class 定位

通過元素類名定位元素,

find_element_by_class_name()

eg:元素類名定位百度輸入框

find_element_by_class_name("s_ipt").send_keys("selenium")

tag定位(標籤)

每一個元素本質就是一個tag,但是HTML頁面的tag重複性很厲害,一般很少用這個定位。

find_element_by_tag_name()

eg:

find_element_by_tag_name("input") 通過input標籤定位

link定位

link定位專門用來定位文字連結的。

find_element_by_link_text()

eg:

百度首頁的導航欄程式碼如下:

<a class="mnav" name="tj_trnuomi" href="http://www.nuomi.com/?cid=002540">糯米</a>
<a class="mnav" name="tj_trnews" href="http://news.baidu.com">新聞</a>
<a class="mnav" name="tj_trhao123" href="http://www.hao123.com">hao123</a>
<a class="mnav" name="tj_trmap" href="http://map.baidu.com">地圖</a>
<a class="mnav" name="tj_trvideo" href="http://v.baidu.com">視訊</a>
<a class="mnav" name="tj_trtieba" href="http://tieba.baidu.com">貼吧</a>
<a class="lb" onclick="return false;" name="tj_login" href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F">登入</a>
<a class="pf" name="tj_settingicon" href="http://www.baidu.com/gaoji/preferences.html">設定</a>
<a class="bri" style="display: block;" name="tj_briicon" href="http://www.baidu.com/more/">更多產品</a>
頁面中這些文字是唯一的,所有可以通過link定位:

find_element_by_link_text("糯米").click()

find_element_by_link_text("新聞").click()

find_element_by_link_text("hao123").click()

find_element_by_link_text("地圖").submit()

find_element_by_link_text("視訊").click()

find_element_by_link_text("貼吧").click()

find_element_by_link_text("登入").click()

find_element_by_link_text("設定").submit()

find_element_by_link_text("更多產品").click()

partial link 定位

partial定位是對link定位的一種補充,有些文字很長,這時候我們可以取文字的一部分定位。

find_element_by_partial_link_text()通過元素標籤對之間的部分文字就能點位元素了

例子:

<a href="http://www.hao123.com" target="_blank" class="fuks" id="browser">我是一個很長的連結,你點選我就能開啟百度了哈哈。</a>

find_element_by_partial_link_text("我是一個很長的連結")

find_element_by_partial_link_text("你點選我就能開啟百度了")

xpath定位

find_element_by_xpath()

絕對路徑定位

從html標籤開始,一層一層往下寫標籤,直到這個標籤位置,這就是絕對路徑。

登入126郵箱xpath定位:div[3]表示當前層級下的第三個div標籤

driver.find_element_by_xpath("/html/body/div[2]/div[2]/div[2]/form/div/div/div[2]/input").send_keys("username")
driver.find_element_by_xpath("/html/body/div[2]/div[2]/div[2]/form/div/div[2]/div[2]/input").send_keys("xxx")
driver.find_element_by_xpath("/html/body/div[2]/div[2]/div[2]/form/div/div[6]/a").click()

利用元素屬性定位

find_element_by_xpath("//標籤[@屬性名=屬性值]")  屬性名可以是id、name、class或者其他可唯一標識該標籤的元素

driver.find_element_by_xpath(".//input[@id='kw']").send_keys("haha")
driver.find_element_by_xpath(".//*[@id='su']").click()

//表示當前頁面某個目錄下,input表示定位元素的標籤名,不指定標籤名可以用*代替,[@id='kw']表示這個元素id屬性值是kw。也可以用class、name屬性值來定位。

find_element_by_xpath("//*[@name='wd']").send_keys("haha")

find_element_by_xpath(".//input[@class='bg s_btn']").submit()

其實也可以用其他屬性值都可以,只要他能唯一標識這個元素:(定位126郵箱登入)

find_element_by_xpath("//*[@placeholder='郵箱帳號或手機號']").send_keys('username')

find_element_by_xpath("//*[@maxthlenght='16']").send_keys("password")

find_element_by_xpath("//input[@id='dologin']").submit()

層級與屬性結合

如果一個元素標籤本身沒有唯一的屬性值標識自身,就可以結合層級來定位它了。

driver.find_element_by_xpath("//div[@class='m-container']/input").send_keys("username")

div[@class='m-container']通過class屬性定位到父元素,後面/input就表示父元素下的子元素。如果父元素沒有唯一的屬性值,則可以找其爺爺元素。

find_element_by_xpath("//div[@class='hsfhg']/div[2]/input")

find_element_by_xpath(.//*[@id='SCENES_LOGIN']/div/div/div[2]/div[4]/button)

通過邏輯運算子定位

find_element_by_xpath("//input[@id='a' and @class='su']/span/input")

xpath語法通過firepath外掛可以生成,可以直接使用的。

css定位

find_element_by_css_selector()

css使用選擇器來為頁面元素繫結屬性,可以較為靈活地選擇控制元件的人已屬性,一般情況下定位速度要比xpath快。

下面是百度搜索框的程式碼:

......
<span class="bg s_ipt_wr quickdelete-wrap">
<span class="soutu-btn"></span>
<input id="kw" class="s_ipt" autocomplete="off" maxlength="255" value="" name="wd">
<a id="quickdelete" class="quickdelete" href="javascript:;" title="清空" style="top: 0px; right: 0px; display: none;"></a>
</span>
<span class="bg s_btn_wr">
<input id="su" class="bg s_btn" type="submit" value="百度一下">
</span>
......

通過class屬性定位

find_element_by_css_selector(".類屬性值")  class選擇器選擇class="a"的所有元素,點號(.)表示通過class屬性定位元素

driver.find_element_by_css_selector(".s_ipt").send_keys("css")
driver.find_element_by_css_selector(".bg s_btn").click()

通過id定位元素

find_element_by_css_selector("#id值") id選擇器選擇id="a"的所有元素,#號表示通過id屬性定位元素

driver.find_element_by_css_selector("#kw").send_keys("huh")
driver.find_element_by_css_selector("#su").submit()

通過標籤名定位元素(少用)

find_element_by_css_selector("input")

通過標籤屬性定位

find_element_by_css_selector("[屬性名=屬性值]")

driver.find_element_by_css_selector("[ maxlength='255']").send_keys("dfaf")
driver.find_element_by_css_selector("[ value='百度一下']").submit()

對於屬性值來說,可加引號,也可以不加,但注意和整個字串的引號進行區分!!!

通過標籤父子關係定位(少用吧)

find_element_by_css_selector("父標籤>子標籤") 

find_element_by_css_selector("span>input")表示選擇父標籤為span的所有input元素

組合定位(通過父子標籤和其屬性結合)

組合定位可以大大加強定位元素的唯一性!

driver.find_element_by_css_selector("form#form>span>input").send_keys("asfa")
driver.find_element_by_css_selector("form#form>span>input#su").click()

要定位的元素是input,父元素是span,爺元素是form;

要定位的元素是input(可以結合它的屬性值),父元素是span,爺元素是form(可以結合它的屬性值)

其實通過css定位也可以像xpath定位那樣通過firebug工具獲得再修改,或選擇要定位的標籤後右鍵-》複製css路徑也行。

通過By定位

By定位元素是統一呼叫find_element()的方法。find_element()方法只用於定位元素,它有兩個引數,第一個是定位的型別,由By提供;第二個引數是定位的具體方式。

使用By之前需要先匯入By類:

from selenium .webdriver.commom.by import By

find_element(By.型別,"具體定位方式")

如:

driver.find_element(By.ID,"kw").send_keys("dsfads")
driver.find_element(By.CLASS_NAME,"bg s_btn").click()

find_element(By.NAME,"wd")

find_element(By.XPATH,"//*[@id='id']")

find_element(By.LINK_TEXT,"新聞")

find_element(By.PARTIAL_LINK_TEXT,"登")

find_element(By.TAG_NAME,"input")