Selenium-webdriver系列教程(四)————如何定位測試元素

測試對象定位一般都是各種web自動化測試框架或工具的核心內容。

selenium-Webdriver的對象定位方法非常的豐富和強大。一般來說強大的對象定位都會提供如下的一些方法。

• 單個對象的定位方法

• 多個對象的定位方法

• 層級定位

selenium-Webdriver很好的支持了上述的3種定位方式。

定位單個對象

在定位單個對象時,selenium-Webdriver支持使用如下的一些屬性對元素進行定位。

:class             => 'class name',
:class_name        => 'class name',
:css               => 'css selector',
:id                => 'id',
:link              => 'link text',
:link_text         => 'link text',
:name              => 'name',
:partial_link_text => 'partial link text',
:tag_name          => 'tag name',
: xpath             => 'xpath',

使用class或class_name進行定位

當所定位的對象具有class屬性的時候我們可以通過class或class_name來定位該對象。

下面的例子定位了google首頁上class為”gsfi”的input。

require 'selenium-webdriver'

url = %q{http://www.google.com/}

dr = Selenium::WebDriver.for :chrome
dr.navigate.to url
sleep 3

new_icon = dr.find_element(:class => 'gsfi')
puts new_icon.tag_name # ---> span

使用id屬性定位

google首頁的搜索輸入框的html代碼如下：

<input class="gsfi" disabled="" autocomplete="off" style="border: medium none; padding: 0pt; margin: 0pt; height: auto; width: 100%; position: absolute; z-index: 1; background-color: transparent; color: silver; left: 0px; visibility: hidden;" id="gs_htif0" dir="ltr">

在進行定位前我們先動態定義highlight方法，該方法的作用是高亮顯示有id屬性的頁面元素。

隨后的代碼演示了如何使用id屬性來定位google首頁上的搜索輸入框。

require 'selenium-webdriver'

Selenium::WebDriver::Element.module_eval do 
    def highlight
        e_id = self.attribute('id')
        puts "#{e_id} = e_id"
        js = <<JS
        document.getElementById("#{e_id}").style.border="3px solid red"
JS
        @bridge.executeScript(js) if e_id
    end
end
    url = %q{http://www.google.com}
    
    dr = Selenium::WebDriver.for :chrome
    dr.navigate.to url
    sleep 3
    
    s_input = dr.find_element(:id=>'gs_tti0')
    s_input.highlight

當使用id定位到正確的元素后，highlight方法會將該元素以紅色高亮顯示，借此也可以驗證代碼是否工作正常。

使用name屬性定位

soso首頁的搜索輸入框的html代碼如下：

<input type="text" name="w" smartpid="sb.idx" smartch="sb.c.idx" autocomplete="off" id="s_input" value="">

# 同樣定位soso首頁的搜索框

require 'selenium-webdriver'

Selenium::WebDriver::Element.module_eval do
    def highlight
        e_id = self.attribute('id')
        puts "#{e_id} = e_id"
        js = <<JS
        document.getElementById("#{e_id}").style.border = "3px solid red"
JS
        @bridge.executeScript(js) if e_id
    end
end

url = %q{http://www.soso.com/}

dr = Selenium::WebDriver.for :chrome
dr.navigate.to url
sleep 1

s_input = dr.find_element(:name => 'w')
s_input.highlight

使用css屬性定位

soso首頁的搜索輸入框的html代碼如下：

<input type="text" name="w" smartpid="sb.idx" smartch="sb.c.idx" autocomplete="off" id="s_input" value="">

官方文檔上說Selenium-WebDriver支持css3語法，這對使用jquery的同學來說無疑是一個好消息。

# css屬性定位soso首頁搜索框
s_input = dr.find_element(:css => '#s_input')

使用xpath定位

soso首頁的搜索輸入框的html代碼如下：

<input type="text" name="w" smartpid="sb.idx" smartch="sb.c.idx" autocomplete="off" id="s_input" value="">

# 使用xpath定位soso首頁搜索框
s_input = dr.find_element(:xpath => %Q{//input[@id='s_input' and @name='w']})

使用其他方式定位

在定位link對象的時候，可以使用link和link_text屬性；

另外還可以使用tag_name屬性定位任意元素；

定位多個元素

find_elements方法可以定位一組對象，例如

# 定位頁面上所有的link對象
all_links = driver.find_elements(:tag_name, 'a')
all_links.each do |l| puts l.class # ---> Selenium::WebDriver::Element
end

上面的代碼返回頁面上所有link對象的數組

層級定位

層級定位的思想是先定位父對象，然后再從父對象中精確定位出其我們需要選取的后代元素。

層級定位一般的應用場景是無法直接定位到需要選取的元素，但是其父元素比較容易定位，通過定位父元素再遍歷其子元素選擇需要的目標元素，或者需要定位某個元素下所有的子元素。

下面的代碼演示了如何使用層級定位選取id為bm的div下所有的link元素，並打印出所有其href

links = dr.find_element(:id, 'bm').find_elements(:css => 'a')
links.each do |l|
    puts l['href']
end