Selenium WebDriver simulates human manipulation of the browser based on the positioning of interface elements. The positioning of elements is arguably the foundation of Selenium automation scripting. In this section, I describe how to locate elements in Selenium.
Methods to locate elements
Selenium provides the following methods for locating elements: First look at an HTML file test_Page. :
<html>
<body>
<form class="form-test" name="register" action="success.html" method="post">
<h3>Registered account</h3>
<a href="/home">Home Page</a>
<table bgcolor="aqua">
<tr>
<td>Nickname:</td>
<td><input id="input username" type="text" name="username" class="input"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="text" name="password"></td>
</tr>
<tr>
<td>Confirm password:</td>
<td><input type="text" name="confPassword"></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input type="radio" name="sex" value="man" checked>male<input type="radio" name="sex" value="woman">female</td>
</tr>
</table>
</form>
</body>
</html>
Copy the code1. id
The username field is located by the id of the element.
require 'selenium-webdriver'
dr = Selenium::WebDriver.for :chrome
dr.get "http://test.html"
# by id
dr.find_element(:id.'input username').click
Copy the code2.name
Locate the username field using the element’s name attribute.
require 'selenium-webdriver'
dr = Selenium::WebDriver.for :chrome
dr.get "http://test.html"
# by name
dr.find_element(:name.'username').click
Copy the code3. class name
Locate the username field using the element’s class attribute.
require 'selenium-webdriver'
dr = Selenium::WebDriver.for :chrome
dr.get "http://test.html"
# by name
dr.find_element(:class.'input').click
Copy the code4. Link text and Partial Link text
The Home Page link is located through the text attribute of the link element.
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
Copy the code5. tag name
The header element is located by the name of the tag
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
Copy the code6. xpath
Xpath is a generic way to locate elements in HTML documents. It has its own set of syntax rules and supports various functions, making it arguably the most comprehensive way to locate elements. The most I have used in developing Selenium automation use cases is xpath. Here is a simple example to illustrate the location use of xpath, which will be covered in a separate topic.
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
Copy the code7. css selector
CSS selector, like xpath, is a very powerful location method. But unlike xpath, which supports both forward and backward positioning, CSS selectors only support backward positioning. The following example shows how to use CSS selector to locate the same element in an xpath example.
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
Copy the codeLocate a set of elements
Selenium supports simultaneous locating of a set of elements, which is useful when dealing with multiple options, or table elements.
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
Copy the code