Some of the common HTML elements and how to handle them using Watir

Buttons

In web applications, we generally submit information we have entered or selected in the web page by clicking links, buttons and images, or by hitting Enter/Return on our keyboard.

Watir clicks buttons on a web page by looking at the attributes available in the

HTML Buttons

What you see in the web browser:

This is the tag in the HTML source:

"button" id="one" name="clickme" value="Click Me">

id Attribute

This is the Watir code you need to click a button using the id attribute:

ie.button(:id, "one").click

name Attribute

This is the Watir code you need to click a button using the name attribute:

ie.button(:name, "clickme").click

value Attribute

This is the Watir code you need to click a button using the value attribute:

ie.button(:value, "Click Me").click

Image Buttons

tag looks like an image, but acts like a button. Like HTML buttons it can be accessed by id, name and value attributes. Image buttons can also be accessed by their src attribute.

src Attribute

What you see in the web browser:

This is the tag in the HTML source:

"image" src="images/doit.gif">

This is the Watir code you need to click a button with an image using the src attribute as a regular expression:

ie.button(:src, /doit/).click

In this case we're looking for a button with doit as part of the src attribute.

Checkboxes

Watir sets or clears checkboxes by looking at the attributes available in the HTML tag. Common attributes are id and name.

What you see in the web browser:

Check Me:

This is the tag in the HTML source:

Check Me:"checkbox" id="one" name="checkme">

id Attribute

Watir code to set a checkbox using the id attribute:

ie.checkbox(:id, "one").set

Watir code to clear a checkbox using the id attribute:

ie.checkbox(:id, "one").clear

name Attribute

Watir code to set a checkbox using the name attribute:

ie.checkbox(:name, "checkme").set

Watir code to clear a checkbox using the name attribute:

ie.checkbox(:name, "checkme").clear

Links

You can use Watir to click links in a variety of ways. Watir can click links by looking at the link text you see in the browser or by looking at the attributes available in the HTML tag. Common attributes are id, name and href. For

Here is an example using a link to the Pickaxe book by the Pragmatic Programmers:

What you see in the web browser:

Pickaxe

What you see in the HTML source:

"http://pragmaticprogrammer.com/titles/ruby/" id="one" name="book">Pickaxe

id Attribute

Watir code to click a link using the id attribute:

ie.link(:id, "one").click

name Attribute

Watir code to click a link using the name attribute:

ie.link(:name, "book").click

Text

Watir code to click a link using link's text:

ie.link(:text, "Pickaxe").click

href Attribute

Watir code to click a link using the href attribute:

ie.link(:href, "http://pragmaticprogrammer.com/titles/ruby/").click

Radio Buttons

Watir sets or clears radio list items by looking at the attributes available in the HTML tag. Common attributes are id and name.

What you see in the web browser:

Click Me:

This is the tag in the HTML source:

"radio" name="clickme" id="one">

id Attribute

Watir code to set a radio list item using the and id attribute:

ie.radio(:id, "one").set

Watir code to clear a radio list item using the id attribute:

ie.radio(:id, "one").clear

name Attribute

Watir code to set a radio list item using the name attribute:

ie.radio(:name, "clickme").set

Watir code to clear a radio list item using the name attribute:

ie.radio(:name, "clickme").clear

Selection Boxes

Watir sets or clears an item in a selection box (or dropdown box) by looking at the attributes available in the Web Testing in Ruby is fun

id Attribute

Watir code to set a select box item using the id attribute:

ie.select_list(:id, "one").set("is fun")

name Attribute

Watir code to set a select box item using the name attribute:

ie.select_list(:name, "selectme").set("is fun")

Selection Box Methods

Watir code to clear a select box item using the id attribute:

ie.select_list(:id, "one").clearSelection

Watir code to get the contents of a select list:

contents = ie.select_list(:id, "one").getAllContents

NOTE: contents will be an array

Select Multiple

Some select lists can have multiple selections instead of just one. If multiple items can be selected in select box, Watir can set or clear an item.

What you see in the web browser:

This is the tag in the HTML source:

    Web Testing in Ruby is fun

You can set individual options using successive _set_s and you can clear everything that is selected with the clearSelection method. The following code would select every option in the select list and then clear everything.

ie.select_list(:id, 'one').set('Web Testing')

ie.select_list(:id, 'one').set('in Ruby')

ie.select_list(:id, 'one').set('is fun')

ie.select_list(:id, 'one').clearSelection

How to install Watir?

 

Execute the following on command prompt after installing ruby

gem update --system

gem install watir

List of elements supported by Watir

http://wiki.openqa.org/display/WTR/HTML+Elements+Supported+by+Watir

 

Example Test Case

Google Test Search

This document walks through a very simple test case: Google Search. To begin, open it in a text editor. If you do not have that file, download it from here. To open it with SciTE, simply right-click the file in Windows Explorer, and select Edit from the popup menu.

The format of this example will be to show the Ruby test case scripting code in a box as you would see it in a text editor, with an explanation after it.

Getting Started

Open Internet Explorer, and try out the test case manually on your own:

1.       go to the Google home page

2.       enter pickaxe in the search text field

3.       click the Google Search button

Expected Result

A Google page with results should be shown. Programming Ruby should be high on the list.

Once you have tried the test case out manually, it's time to automate the test case using Watir. Return to the Google home page and view the page source: right mouse click > View Source. Now you can follow along and see how to automate this test with Watir based on the HTML tags in the Google search web application.

Section 1: Comments

Test cases should be commented, just as program code should be commented. In Ruby, any text on a single line that follows a # is a comment, and is ignored by the Ruby interpreter at run time.

What you see in the text editor:

#-------------------------------------------------------------#

# Demo test for the Watir controller.

#

# Simple Google test written by Jonathan Kohl 10/10/04.

# Purpose: to demonstrate the following Watir functionality:

#   * entering text into a text field,

#   * clicking a button,

#   * checking to see if a page contains text.

# Test will search Google for the "pickaxe" Ruby book.

#-------------------------------------------------------------#

Styles differ with comments, but they can really help with test case maintenance. In this case, the author has provided their name, a date and a purpose of the test case. This is here to improve readability, and to help others who may be using the test to understand what it does.

Section 2: Includes

To use Watir, or any other library in our test case, requires us to tell the program where to find the library.

What you see in the text editor:

# the Watir controller

require "watir"

When we run our test script, the Watir library is loaded so that our test cases can use it.

Section 3: Declare Variables

If we are going to use something in our script more than once, or something that could change, we can declare it as a variable and reuse it throughout the script. Some objects we can use for testing tend to change, such as URLs for applications we are testing. In this script, we assign the test URL as a variable. If it changes, we only have to change it in one place.

What you see in the text editor:

# set a variable

test_site = "http://www.google.com"

The test case author has chosen to assign the URL to a variable called test_site. It may not be much of an issue in this test case, but using variables for test URLs is often a good practice.

Section 4: Open an Internet Explorer Browser

To begin driving Internet Explorer, we need to tell Watir to open an instance for testing.

What you see in the text editor:

# open the IE browser

ie = Watir::IE.new

To explain what this is doing, we can start from the right of the = operator. We send a message new to the IE (Internet Explorer) class that is inside Watir module, and assign it to a variable called ie. The ie variable is a local variable (like test_site). This means it can be accessed from our script, but not from other Ruby functions or methods.

Section 5: Interacting With Google

Now we are ready to start automating the steps we ran manually using Watir.

Beginning the test case

What you see in the text editor:

# print some comments

puts "Beginning of test: Google search."

puts is a reserved word in the Ruby language that tells the Ruby Interpreter to print whatever comes after it contained in quotes to the screen. We could just as easily write this information to a file. These puts statements are in this test case to make it more self-explanatory. You can print to the screen as a "friendly message" (e.g. telling the user something is loading while they are waiting for results, or printing a result as "The answer is 5" instead of just "5") or as "flagging" and that is to print to the screen for debugging purposes. Printing what we are doing when we automate the test case is useful for debugging when developing test cases, and for quickly repeating failures for bug reports when the test case doesn't pass.

Step 1: Go to the Google site

This test case follows a pattern of printing out what we intend Watir to do on a web application, followed by the Watir scripting code to carry out that action. This is a style of test case development that is useful for tracking down test case failures quickly.

What you see in the text editor:

puts " Step 1: go to the test site: " + test_site

ie.goto test_site

The first line uses a puts statement to print out the test case step we are attempting to the screen. The second line uses the Watir method goto to direct the test case to the test site: http://www.google.com (stored in the variable test_site). When we print out the variable, we concatenate it to the string (the part in quotes) by using the + sign.

Step 2: Enter Search Term pickaxe in the search field

We need to enter the term to search in the text field on the Google home page.

What you see in the web browser:

What you see in the text editor:

puts " Step 2: enter 'pickaxe' in the search text field."

ie.text_field(:name, "q").set "pickaxe" # "q" is the name of the search field

The first line prints the step we are on to the screen. The second line enters the text pickaxe in the text field named q. The comment telling the user that q is the name of the text field is optional.

This is the tag in the HTML source with the name attribute we used:

The text field has a name attribute q, so we use that to tell Watir what object to interact with.

Step 3: Click the Google Search button

We need to click the search button to activate the Google Search functionality.

What you see in the web browser:

What you see in the text editor:

puts " Step 3: click the 'Google Search' button."

ie.button(:name, "btnG").click # "btnG" is the name of the Search button

The first line prints the step we are on to the screen. The second line clicks the Google Search button.

This is the tag in the HTML source with the name attribute we used:

Section 6: Evaluating the Results

The Expected Result

This test case prints out what the Expected Result should be prior to the test case using Watir to evaluate the results.

What you see in the text editor:

puts " Expected Result:"

puts "  A Google page with results should be shown. 'Programming Ruby' should be high on the list."

These two statements simply print the expected result of the test to the screen.

Verify Results

Using Watir and a little Ruby, we can evaluate the results to verify whether the test case passed or failed.

puts " Actual Result:"

if ie.text.include? "Programming Ruby"

  puts "  Test Passed. Found the test string: 'Programming Ruby'. Actual Results match Expected Results."

else

  puts "  Test Failed! Could not find: 'Programming Ruby'."

end

Why Watir?

Why Watir?

• It’s a free Open Source tool. There are no costs to use the tool.
• There’s a very active and growing community behind it.
• It uses Ruby, a full-featured modern scripting language, rather than a proprietary vendorscript.
• It supports your web app no matter what it is developed in.
• It supports multiple browsers on different platforms.
• It is powerful and easy to use, yet beautifully lightweight.