Selenium實戰教程系列（二）---元素定位

Batkid2018發表於2018-10-27

Selenium webdriver能夠模擬人對瀏覽器進行操作的前提是介面元素的定位。元素的定位可以說是Selenium自動化指令碼的基礎。這一小節筆者將介紹如何在selenium中進行元素的定位。

定位元素的方法

Selenium中提供了以下定位元素的方法： 首先看一個HTML檔案 test_page.：

<html>
    <body>
        <form class="form-test" name="register" action="success.html" method="post">
    <h3>註冊賬號</h3>
    <a href="/home">Home Page</a>
    <table bgcolor="aqua">
        <tr>
            <td>暱稱：</td>
            <td><input id="input username" type="text" name="username" class="input"></td>
        </tr>
        <tr>
            <td>密碼：</td>
            <td><input type="text" name="password"></td>
        </tr>
        <tr>
            <td>確認密碼：</td>
            <td><input type="text" name="confPassword"></td>
        </tr>
        <tr>
            <td>性別：</td>
            <td>
                <input type="radio" name="sex" value="man" checked>男
                <input type="radio" name="sex" value="woman">女
                </td>
            </tr>
        </table>
    </form>
    </body>
 </html>
複製程式碼

1. id

通過元素的id來完成username輸入框的定位。

require 'selenium-webdriver'
dr = Selenium::WebDriver.for :chrome
dr.get "http://test.html"

# by id
dr.find_element(:id, 'input username').click
複製程式碼

2.name

通過元素的name屬性來完成對username輸入框的定位。

require 'selenium-webdriver'
dr = Selenium::WebDriver.for :chrome
dr.get "http://test.html"

# by name
dr.find_element(:name, 'username').click
複製程式碼

3. class name

通過元素的class屬性來完成對username輸入框的定位。

require 'selenium-webdriver'
dr = Selenium::WebDriver.for :chrome
dr.get "http://test.html"

# by name
dr.find_element(:class, 'input').click
複製程式碼

4. link text和partial link text

通過連結元素的text屬性來完成Home Page連結的定位。

require 'selenium-webdriver'
dr = Selenium::WebDriver.for :chrome
dr.get "http://test.html"

# by link_text
link_text = dr.find_element(:link_text, 'Home Page').get_text
puts link_text

# by partial_link_text
link_text = dr.find_element(:partial_link_text, 'Home').get_text
puts link_text
複製程式碼

5. tag name

通過標籤的name來完成header元素的定位

require 'selenium-webdriver'
dr = Selenium::WebDriver.for :chrome
dr.get "http://test.html"

# by tag name
header_text = dr.find_element(:tag_name, 'h3').get_text
puts header_text
複製程式碼

6. xpath

xpath是用來定位HTML文件中元素的通用方法，有一套自己的語法規則，支援各種函式，可以說是一種最全面的定位方法。我在開發Selenium自動化用例的過程中，最多使用的就是xpath。 這裡只用簡單的例子說明xpath的定位使用，具體的xpath的使用將在另外的專題中介紹。

require 'selenium-webdriver'
dr = Selenium::WebDriver.for :chrome
dr.get "http://test.html"

# by xpath
dr.find_element(:xpath, "//tr/td/input[@value='women']").click
複製程式碼

7. css selector

css selector和xpath一樣，也是功能非常強大的定位方法。但是與xpath不同，css selector只能支援向後定位，而xpath可以支援向前和向後定位。 下面的例子講展示如何用css selector定位xpath例子中的同一個元素。

require 'selenium-webdriver'
dr = Selenium::WebDriver.for :chrome
dr.get "http://test.html"

# by css selector
dr.find_element(:css, "tr>td>input[value='women']").click
複製程式碼

定位一組元素

Selenium中支援同時獲取一組元素的定位，這在處理多選項選擇，或者表格元素的時候非常有用。

require 'selenium-webdriver'
dr = Selenium::WebDriver.for :chrome
dr.get "http://test.html"

# Get number of items
num_of_tds = dr.find_elements(:tag_name, "td").count
複製程式碼

相關文章