Element

You will need internet access if you want to follow examples in this chapter. All examples in this chapter are tried on Mac OS X 10.8.5, Firefox 27.0.1, Ruby 2.1.0p0 and selenium-webdriver 2.40.0 but everything should work on all supported platforms. If you are not familiar with Command-line interface or IRB, see Command-line interface and IRB chapters.

After you had a taste of Selenium in Getting Started chapter, it is time to take a closer look at the Selenium API. This chapter will get you introduced to the API but it will not cover it entirely. For more information see Selenium::WebDriver::Element API documentation.

Let’s start Firefox and open Google home page:

 1 $ irb
 2 
 3 > require "selenium-webdriver"
 4  => true
 5 
 6 > browser = Selenium::WebDriver.for :firefox
 7 => #<Selenium::WebDriver::Driver:0x..
 8 f8698791d2bff9778 browser=:firefox>
 9 
10 > browser.get "http://google.com"
11 => ""

Most of the time you will be dealing with page elements, so let’s see how to do that. First, you need to find the element on the page, then you usually need to do something with it, like entering text or clicking it. To find the element, use find_element method.

1 > browser.find_element(name: "q")
2 => #<Selenium::WebDriver::Element:...
3    id="{25201324-ac0c-8e40-9766-c35aa5b54786}">

There are many options available to find an element.

How Symbol Shortcut
class name :class_name :class
css selector :css  
id :id  
link text :link_text :link
name :name  
partial link text :partial_link_text  
tag name :tag_name  
xpath :xpath  

How to find an element

Looks like we have found the element, but we did not do anything with it yet. Since the element we have found is a text field, let’s enter some text into it:

1 > browser.find_element(name: "q").send_keys "watir"
2 => ""

We can also clear the text field:

1 > browser.find_element(name: "q").clear
2 => ""

There is a shortcut if you want to find an element via it’s id. Just provide the id:

1 > browser["gbqfq"]
2 => #<Selenium::WebDriver::Element:...
3    id="{fca96529-8bc6-bf4f-8e78-376f037c351a}">

To get the value of any element attribute, use attribute. Try a few attributes:

 1 > browser["gbqfq"].attribute(:name)
 2 => "q"
 3 
 4 > browser["gbqfq"].attribute(:class)
 5 => "gbqfif"
 6 
 7 > browser["gbqfq"].attribute(:type)
 8 => "text"
 9 
10 > browser["gbqfq"].attribute(:autocomplete)
11 => "off"
12 
13 > browser["gbqfq"].attribute(:style)
14 => "border: medium none; padding: 0px; margin: ...
15 
16 > browser["gbqfq"].attribute(:outerHTML)
17 => "<input spellcheck=\"false\" dir=\"ltr\" ...

Create a Ruby file from the above IRB session and save it as element.rb. Of course, add a p in front of a few commands, so the script outputs something.

 1 require "selenium-webdriver"
 2 browser = Selenium::WebDriver.for :firefox
 3 browser.get "http://google.com"
 4 browser.find_element(name: "q")
 5 browser.find_element(name: "q").send_keys "watir"
 6 browser.find_element(name: "q").clear
 7 browser["gbqfq"]
 8 p browser["gbqfq"].attribute(:name)
 9 p browser["gbqfq"].attribute(:class)
10 p browser["gbqfq"].attribute(:type)
11 p browser["gbqfq"].attribute(:autocomplete)
12 p browser["gbqfq"].attribute(:style)
13 p browser["gbqfq"].attribute(:outerHTML)

Run the file:

1 $ ruby element.rb
2 "q"
3 "gbqfif"
4 "text"
5 "off"
6 "border: medium none; padding: 0px; margin: 0px;...
7 "<input spellcheck=\"false\" dir=\"ltr\" style=...