WebDriver API 進階使用

元素定位

從之前的講義和學習中，我們知道，WebDriver API的呼叫以及自動化測試，務必從頁面元素的定位開始，那麼回顧之前的內容，WebDriver提供了一系列的定位符以便使用元素定位方法。常見的定位符有以下幾種：

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

那麼我們以下的操作將會基於上述的定位符進行定位操作。

對於元素的定位，WebDriver API可以通過定位簡單的元素和一組元素來操作。在這裡，我們需要告訴Selenium如何去找元素，以至於他可以充分的模擬使用者行為，或者通過檢視元素的屬性和狀態，以便我們執行一系列的檢查。

在Selenium2中，WebDriver提供了多種多樣的find_element_by方法在一個網頁裡面查詢元素。這些方法通過提供過濾標準來定位元素。當然WebDriver也提供了同樣多種多樣的find_elements_by的方式去定位多個元素。

Selenium2提供的8個find_element_by方法去定位元素。在這裡我們來具體檢視每個方法的詳細使用方式。下面的表格將會列出這些具體的方法：

方法Method	描述Description	引數Argument	示例Example
id	該方法通過ID的屬性值去定位查詢單個元素	id: 需要被查詢的元素的ID	find_element_by_id('search')
name	該方法通過name的屬性值去定位查詢單個元素	name: 需要被查詢的元素的名稱	find_element_by_name('q')
class name	該方法通過class的名稱值去定位查詢單個元素	class_name: 需要被查詢的元素的類名	find_element_by_class_name('input-text')
tag_name	該方法通過tag的名稱值去定位查詢單個元素	tag: 需要被查詢的元素的標籤名稱	find_element_by_tag_name('input')
link_text	該方法通過連結文字去定位查詢單個元素	link_text: 需要被查詢的元素的連結文字	find_element_by_link_text('Log In')
partial_link_text	該方法通過部分連結文字去定位查詢單個元素	link_text: 需要被查詢的元素的部分連結文字	find_element_by_partial_link_text('Long')
xpath	該方法通過XPath的值去定位查詢單個元素	xpath: 需要被查詢的元素的xpath	find_element_by_xpath('//*[@id="xx"]/a')
css_selector	該方法通過CSS選擇器去定位查詢單個元素	css_selector: 需要被查詢的元素的ID	find_element_by_css_selector('#search')

接下來的列表將會詳細展示find_elements_by的方法集合。這些方法依據匹配的具體標準返回一系列的元素。

方法Method	描述Description	引數Argument	示例Example
id	該方法通過ID的屬性值去定位查詢多個元素	id: 需要被查詢的元素的ID	find_elements_by_id('search')
name	該方法通過name的屬性值去定位查詢多個元素	name: 需要被查詢的元素的名稱	find_elements_by_name('q')
class_name	該方法通過class的名稱值去定位查詢多個元素	class_name: 需要被查詢的元素的類名	find_elements_by_class_name('input-text')
tag_name	該方法通過tag的名稱值去定位查詢多個元素	tag: 需要被查詢的元素的標籤名稱	find_elements_by_tag_name('input')
link_text	該方法通過連結文字去定位查詢多個元素	link_text: 需要被查詢的元素的連結文字	find_elements_by_link_text('Log In')
partial_link_text	該方法通過部分連結文字去定位查詢多個元素	link_text: 需要被查詢的元素的部分連結文字	find_elements_by_partial_link_text('Long')
xpath	該方法通過XPath的值去定位查詢多個元素	xpath: 需要被查詢的元素的xpath	find_elements_by_xpath("//div[contains(@class,'list')]")
css_selector	該方法通過CSS選擇器去定位查詢多個元素	css_selector: 需要被查詢的元素的ID	find_element_by_css_selector('.input_class')

依據ID查詢

請檢視如下HTML的程式碼，以便實現通過ID的屬性值去定義一個查詢文字框的查詢：

<input id="search" type="text" name="q" value=""
       class="input-text" maxlength="128" autocomplete="off"/>

根據上述程式碼，這裡我們使用find_element_by_id()的方法去查詢搜尋框並且檢查它的最大長度maxlength屬性。我們通過傳遞ID的屬性值作為引數去查詢，參考如下的程式碼示例：

def test_search_text_field_max_length(self):
    # get the search textbox
    search_field = self.driver.find_element_by_id("search")
    # check maxlength attribute is set to 128
    self.assertEqual("128", search_field.get_attribute("maxlength"))

如果使用find_elements_by_id()方法，將會返回所有的具有相同ID屬性值的一系列元素。

依據名稱name查詢

這裡還是根據上述ID查詢的HTML程式碼，使用find_element_by_name的方法進行查詢。參考如下的程式碼示例：

# get the search textbox
self.search_field = self.driver.find_element_by_name("q")

同樣，如果使用find_elements_by_name()方法，將會返回所有的具有相同name屬性值的一系列元素。

依據class name查詢

除了上述的ID和name的方式查詢，我們還可以使用class name的方式進行查詢和定位。

事實上，通過ID，name或者類名class name查詢元素是最提倡推薦的和最快的方式。當然Selenium2 WebDriver也提供了一些其他的方式，在上述三類方式條件不足，查詢無效的時候，可以通過這些其他方式來查詢。這些方式將會在後續的內容中講述。

請檢視如下的HTML程式碼，通過改程式碼進行練習和理解.

<button type="submit" title="Search" class="button">
  <span><span>Search</span></span>
</button>

根據上述程式碼，使用find_element_by_class_name()方法去定位元素。

def test_search_button_enabled(self):
    # get Search button
    search_button = self.driver.find_element_by_class_name("button")
    # check Search button is enabled
    self.assertTrue(search_button.is_enabled())

同樣的如果使用find_elements_by_class_name()方法去定位元素，將會返回所有的具有相同name屬性值的一系列元素。

依據標籤名tag name查詢

利用標籤的方法類似於利用類名等方法進行查詢。我們可以輕鬆的查詢出一系列的具有相同標籤名的元素。例如我們可以通過查詢表中的<tr>來獲取行數。

在這裡向大家推薦一個學習交流群：175317069

下面有一個HTML的示例，這裡在無序列表中使用了<img>標籤。

<ul class="promos">
    <li>
        <a href="http://demo.magentocommerce.com/home-decor.html">
            <img src="/media/wysiwyg/homepage-three-column-promo-
        01B.png" alt="Physical & Virtual Gift Cards">
        </a>
    </li>
    <li>
        <a href="http://demo.magentocommerce.com/vip.html">
            <img src="/media/wysiwyg/homepage-three-column-promo-
        02.png" alt="Shop Private Sales - Members Only">
        </a>
    </li>
    <li>
        <a href="http://demo.magentocommerce.com/accessories/
        bags-luggage.html">
            <img src="/media/wysiwyg/homepage-three-columnpromo-
        03.png" alt="Travel Gear for Every Occasion">
        </a>
    </li>
</ul>

這裡面我們使用find_elements_by_tag_name()的方式去獲取全部的圖片，在此之前，我們將會使用find_element_by_class_name()去獲取到指定的<ul>。

具體程式碼如下：

def test_count_of_promo_banners_images(self):
    # get promo banner list
    banner_list = self.driver.find_element_by_class_name("promos")
    # get images from the banner_list
    banners = banner_list.find_elements_by_tag_name("img")
    # check there are 20 tags displayed on the page
    self.assertEqual(20, len(banners))

依據連結文字link查詢

連結文字查詢通常比較簡單。使用find_element_by_link_text請檢視以下示例

<a href="#header-account" class="skip-link skip-account">
    <span class="icon"></span>
    <span class="label">Account</span>
</a>

測試程式碼如下：

def test_my_account_link_is_displayed(self):
    # get the Account link
    account_link =
    self.driver.find_element_by_link_text("ACCOUNT")
    # check My Account link is displayed/visible in
    # the Home page footer
    self.assertTrue(account_link.is_displayed())

依據部分連結文字partial text查詢

這裡依舊使用上述的列子進行程式碼編寫：

def test_account_links(self):
    # get the all the links with Account text in it
    account_links = self.driver.\\
    find_elements_by_partial_link_text("ACCOUNT")
    # check Account and My Account link is
    displayed/visible in the Home page footer
    self.assertTrue(2, len(account_links)) 

依據XPath進行查詢

XPath是一種在XML文件中搜尋和定位節點node的一種查詢語言。所有的主流Web瀏覽器都支援XPath。Selenium2可以用強大的XPath在頁面中查詢元素。

常用的XPath的方法有starts-with()，contains()和ends-with()等

若想要了解更多關於XPath的內容，請檢視http://www.w3schools.com/XPath/

如下有一段HTML程式碼，其中裡面的<img>沒有使用ID，name或者類屬性，所以我們無法使用之前的方法。亞這裡我們可以通過<img>的alt屬性，定位到指定的tag。

<ul class="promos">
    <li>
        <a href="http://demo.magentocommerce.com/home-decor.html">
            <img src="/media/wysiwyg/homepage-three-column-promo-
        01B.png" alt="Physical & Virtual Gift Cards">
        </a>
    </li>
    <li>
        <a href="http://demo.magentocommerce.com/vip.html">
            <img src="/media/wysiwyg/homepage-three-column-promo-
        02.png" alt="Shop Private Sales - Members Only">
        </a>
    </li>
    <li>
        <a href="http://demo.magentocommerce.com/accessories/
        bags-luggage.html">
            <img src="/media/wysiwyg/homepage-three-columnpromo-
        03.png" alt="Travel Gear for Every Occasion">
        </a>
    </li>
</ul>

具體程式碼如下：

def test_vip_promo(self):
    # get vip promo image
    vip_promo = self.driver.\\
    find_element_by_xpath("//img[@alt='Shop Private Sales - Members Only']")
    # check vip promo logo is displayed on home page
    self.assertTrue(vip_promo.is_displayed())
    # click on vip promo images to open the page
    vip_promo.click()
    # check page title
    self.assertEqual("VIP", self.driver.title)

當然，如果使用find_elements_by_xpath()的方法，將會返回所有匹配了XPath查詢的元素。

依據CSS選擇器進行查詢

CSS是一種設計師用來描繪HTML文件的視覺的層疊樣式表。一般來說CSS用來定位多種多樣的風格，同時可以用來是同樣的標籤使用同樣的風格等。類似於XPath，Selenium2也可以使用CSS選擇器來定位元素。

請檢視如下的HTML文件。

<div class="minicart-wrapper">
    <p class="block-subtitle">Recently added item(s)
        <a class="close skip-link-close" href="#" title="Close">×</a>
    </p>
    <p class="empty">You have no items in your shopping cart.
    </p>
</div>

我們來建立一個測試，驗證這些訊息是否正確。

def test_shopping_cart_status(self):
    # check content of My Shopping Cart block on Home page
    # get the Shopping cart icon and click to open the
    # Shopping Cart section
    shopping_cart_icon = self.driver.\\
    find_element_by_css_selector("div.header-minicart
                                 span.icon")
    shopping_cart_icon.click()
    # get the shopping cart status
    shopping_cart_status = self.driver.\\
    find_element_by_css_selector("p.empty").text
    self.assertEqual("You have no items in your shopping cart.",
    shopping_cart_status)
    # close the shopping cart section
    close_button = self.driver.\\
    find_element_by_css_selector("div.minicart-wrapper
                                 a.close")
    close_button.click()

滑鼠事件

Web測試中，有關滑鼠的操作，不只是單擊，有時候還要做右擊、雙擊、拖動等操作。這些操作包含在ActionChains類中。

常用的滑鼠方法：

• context_click() ##右擊
• douch_click() ##雙擊
• drag_and_drop() ##拖拽
• move_to_element() ##滑鼠停在一個元素上
• click_and_hold() # 按下滑鼠左鍵在一個元素上

例子：

#圖3.4
#如圖3.x4，假如一個web 應用的列表檔案提供了右擊彈出快捷選單的的操作。可以通過context_click()
#方法模擬滑鼠右鍵，參考程式碼如下：
#引入ActionChains 類
from selenium.webdriver.common.action_chains import ActionChains
...
#定位到要右擊的元素
right =driver.find_element_by_xpath("xx")
#對定位到的元素執行滑鼠右鍵操作
ActionChains(driver).context_click(right).perform()

#引入ActionChains 類
from selenium.webdriver.common.action_chains import ActionChains
...
#定位到要雙擊的元素
double =driver.find_element_by_xpath("xxx")
#對定位到的元素執行滑鼠雙擊操作
ActionChains(driver).double_click(double).perform()

鍵盤事件

鍵盤操作經常處理的如下：

程式碼	描述
send_keys(Keys.BACK_SPACE)	刪除鍵(BackSpace)
send_keys(Keys.SPACE)	空格鍵(Space)
send_keys(Keys.TAB)	製表鍵(Tab)
send_keys(Keys.ESCAPE)	回退鍵(Esc)
send_keys(Keys.ENTER)	Enter鍵(Enter)
send_keys(Keys.CONTROL,'a')	全選（Ctrl+A）
send_keys(Keys.CONTROL,'c')	複製（Ctrl+C）

程式碼如下

#coding=utf-8
from selenium import webdriver
#引入Keys 類包
from selenium.webdriver.common.keys import Keys
import time
driver = webdriver.Firefox()
driver.get("http://www.baidu.com")
#輸入框輸入內容
driver.find_element_by_id("kw").send_keys("selenium")
time.sleep(3)
#刪除多輸入的一個m
driver.find_element_by_id("kw").send_keys(Keys.BACK_SPACE)
time.sleep(3)
#輸入空格鍵+“教程”
driver.find_element_by_id("kw").send_keys(Keys.SPACE)
driver.find_element_by_id("kw").send_keys(u"教程")
time.sleep(3)
#ctrl+a 全選輸入框內容
driver.find_element_by_id("kw").send_keys(Keys.CONTROL,'a')

模組化與類庫

線性測試

至此之前，我們介紹的測試指令碼，儘管使用了unittest測試框架，但是測試是按照指定的線路進行的，是線性的測試，完全遵循了指令碼的執行順序。

測試指令碼1

from selenium import webdriver
import time
driver = webdriver.Firefox()
driver.get("http://wwww.xxx.com")
driver.find_element_by_id("tbUserName").send_keys("username")
driver.find_element_by_id("tbPassword").send_keys("123456")
driver.find_element_by_id("btnLogin").click()
#執行具體用例操作
......
driver.quit ()

如上圖，其實登入的模組可以共用。

模組化

模組話是自動化測試的第一個延伸和基礎。需要對自動化重複編寫的指令碼進行重構（refactor），將重複的指令碼抽取出來，放到指定的程式碼檔案中，作為共用的功能模組。

測試指令碼1：Login.py

#登入模組
def login():
driver.find_element_by_id("tbUserName").send_keys("username")
driver.find_element_by_id("tbPassword").send_keys("456123")
driver.find_element_by_id("btnLogin").click()

另一份檔案 quit.py

#退出模組
def quit():
..............

自動化的測試：程式碼如下

#coding=utf-8
from selenium import webdriver
import login,quit_ #呼叫登入、退出模組
driver = webdriver.Firefox()
driver.get("http://wwww.xxx.com")
#呼叫登入模組
login.login()
#其它個性化操作
......
#呼叫退出模組
quit.quit()

引數化驅動

資料驅動

如果說模組化是自動化測試的第一步，那麼資料驅動是自動化的第二步，從本意上來講。資料改變更新驅動自動化的執行。從而引起測試結果的改變。其實類似於引數化。

示例程式碼

#coding=utf-8
from selenium import webdriver
import time
values=['selenium','webdriver',u'軟體自動化測試']
# 執行迴圈
for serch in values:
    driver = webdriver.Firefox()
    driver.get("https://www.baidu.com")
    driver.find_element_by_id("kw").send_keys(serch)
    time.sleep(3)
    .....

關於引數化驅動，我們可以將資料放到csv中，然後通過讀取csv的資料進行自動化測試。

關鍵字驅動

這裡的資料換成了特別的資料，就是關鍵字。

結語：

在這裡跟大家推薦一個學習資料分享群：175317069，裡面大牛已經為我們整理好了許多的學習資料，有自動化，介面，效能等等的學習資料！人生是一個逆水行舟的過程，不進則退，我們們一起加油吧！