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

時間 2019-11-09

標籤 css html web chrome 瀏覽器 ruby 函數 post code 欄目系統網絡简体版

原文原文鏈接

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

定位元素的方法

Selenium中提供瞭如下定位元素的方法：
首先看一個HTML文件 test_page.：html

<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輸入框的定位。web

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輸入框的定位。chrome

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連接的定位。ruby

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的使用將在另外的專題中介紹。post

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例子中的同一個元素。ui

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中支持同時獲取一組元素的定位，這在處理多選項選擇，或者表格元素的時候很是有用。code

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