Selenium3 + Python3自動化測試系列二——selenium元素定位

一、selenium元素定位

Selenium對網頁的控制是基於各種前端元素的，在使用過程中，對於元素的定位是基礎，只有准去抓取到對應元素

才能進行后續的自動化控制，我在這里將對selenium8種元素基本定位方式進行總結歸納一下。

Selenium提供了8種定位方式。

• • id
  • name
  • class name
  • tag name
  • link text
  • partial link text
  • xpath
  • css selector

這8種定位方式在Python selenium中所對應的方法為：

• • find_element_by_id()
  • find_element_by_name()
  • find_element_by_class_name()
  • find_element_by_tag_name()
  • find_element_by_link_text()
  • find_element_by_partial_link_text()
  • find_element_by_xpath()
  • find_element_by_css_selector()

二、定位方法的用法

以百度首頁https://www.baidu.com/，部分前端頁面代碼為例。源碼如下：

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

<span class="bg s_btn_wr">
　　<input type="submit" id="su" value="百度一下" class="bg s_btn">
</span>

　　通過id定位，find_element_by_id()

from selenium.webdriver import Chrome
import time

driver = Chrome("C:\Program Files (x86)\Google\Chrome\Application\chromedriver.exe")
driver.get('https://www.baidu.com')
#利用find_element_by_id定位元素位置並模擬按鍵輸入“博客園”，點擊百度一下按鈕搜索
driver.find_element_by_id("kw").send_keys("博客園")
driver.find_element_by_id("su").click()
time.sleep(5)
driver.quit()

通過name定位，find_element_by_name()

driver.find_element_by_name("wd")

通過class name定位，find_element_by_class_name()

driver.find_element_by_class_name("s_btn")

上面的模擬按鍵輸入“博客園”，點擊百度一下按鈕搜索，我們換個方式用name和class_name來實現同樣的功能。

如下所示：

from selenium import webdriver
import time

driver = webdriver.Chrome()
driver.get('https://www.baidu.com/')
#利用find_element_by_id定位元素位置並模擬按鍵輸入“博客園”，點擊百度一下按鈕搜索
driver.find_element_by_name("wd").send_keys("博客園")
driver.find_element_by_class_name("s_btn").click()
time.sleep(5)
driver.quit()

通過tag name定位，find_element_by_tag_name()

find_element_by_tag_name("input") 

通過標簽名去定位的方式一般是這樣的：find_element_by_tag_name("input") 

可見僅僅通過標簽名去定位時，一般一種標簽在一個頁面里面會出現不止一次甚至大量出現，

這種定位方式的作用不是很大，所以用的也就比較少。

通過xpath定位，find_element_by_xpath()

xpath是XML路徑語言，它可以用來確定xml文檔中的元素位置，通過元素的路徑來完成對元素的查找。

HTML就是XML的一種實現方式，所以xpath是一種非常強大的定位方式。

xpath定位有N種寫法，這里列幾個常用寫法：

driver.find_element_by_xpath("//*[@id='kw']")

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

driver.find_element_by_xpath("//input[@class='s_ipt']")

driver.find_element_by_xpath("//span[@class='soutu-btn']/input")

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

from selenium.webdriver import Chrome
import time

driver = Chrome("C:\Program Files (x86)\Google\Chrome\Application\chromedriver.exe")
driver.get('https://www.baidu.com')
#利用多種方法find_element_by_xpath()定位元素位置並模擬按鍵輸入“博客園”，點擊百度一下按鈕搜索
driver.find_element_by_xpath("//*[@id='kw']").send_keys("博客園")
driver.find_element_by_xpath("//*[@name='wd']").send_keys("博客園")
driver.find_element_by_xpath("//input[@class='s_ipt']").send_keys("博客園")
driver.find_element_by_xpath("//span[@class='soutu-btn']/input").send_keys("博客園")
driver.find_element_by_xpath("//input[@id='kw' and @name='wd']").send_keys("博客園")
driver.find_element_by_id("su").click()
time.sleep(5)
driver.quit()

通過css定位，find_element_by_css_selector()

CSS屬性定位可以比較靈活地選擇控件的任意屬性，定位方式也會比xpath快。

driver.find_element_by_css_selector("#kw")

driver.find_element_by_css_selector("[name=wd]")

driver.find_element_by_css_selector(".s_ipt")

driver.find_element_by_css_selector("span.soutu-btn> input#kw")

值得注意的是，在css里面下級標簽元素用>連接，如果class里面有空格，空格用.進行連接。

from selenium.webdriver import Chrome
import time

driver = Chrome("C:\Program Files (x86)\Google\Chrome\Application\chromedriver.exe")
driver.get('https://www.baidu.com')
#利用find_element_by_css_selector()定位元素位置並模擬按鍵輸入“博客園”，點擊百度一下按鈕搜索
driver.find_element_by_css_selector("#kw").send_keys("博客園")
driver.find_element_by_css_selector("[name=wd]").send_keys("博客園")
driver.find_element_by_css_selector(".s_ipt").send_keys("博客園")
driver.find_element_by_css_selector("span.soutu-btn> input#kw").send_keys("博客園")
driver.find_element_by_css_selector("#su").click()
time.sleep(5)
driver.quit()

通過link text定位，find_element_by_link_text()find_element_by_partial_link_text()

這兩種定位方式是專門用於定位超鏈接的，也就是對應html頁面中的<a>標簽，

括號里傳的值就是a標簽中的超鏈接文字，

兩者的區別在於一個是完整的超鏈接文字，一個是可以只寫部分超鏈接文字。

前端實例源碼如下：

<a href="http://news.baidu.com" name="tj_trnews" class="mnav">新聞</a>
<a href="https://www.hao123.com" name="tj_trhao123" class="mnav">hao123</a> 

比如點擊百度首頁中右上角的新聞和hao123超鏈接，可以這樣去定位：

driver.find_element_by_link_text("新聞").click()
driver.find_element_by_link_text("hao123").click()
driver.find_element_by_partial_link_text("新").click()
driver.find_element_by_partial_link_text("hao").click()
driver.find_element_by_partial_link_text("123").click()

　　關於xpaht和css的定位比較復雜，請參考W3School具體學習：

xpath語法

css選擇器

三、定位一組元素

　　WebDriver還提供了8種用於定位一組元素的方法。

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_xpath()

find_elements_by_css_selector()

定位一組元素的方法與定位單個元素的方法類似，唯一的區別是在單詞element后面多了一個s表示復數。

我們來舉個栗子演示一下如何使用：

from selenium.webdriver import Chrome
from time import sleep

driver = Chrome("C:\Program Files (x86)\Google\Chrome\Application\chromedriver.exe")
driver.get("https://www.baidu.com")

#定位所有的a標簽並打印，循環遍歷出每一條搜索結果的標題
texts = driver.find_elements_by_xpath('//div/a')
for t in texts:
    print(t.text)

sleep(5)
driver.quit()