Getting started with OperaWatir
The Watir API allows us to write Ruby scripts that interact with any web page, automatically going through all the steps users would normally take and alerting us to any problems quickly. This makes testing much quicker and easier.
In this tutorial we are going to control Google Maps through OperaWatir. We will find directions from the Opera headquarters to the Oslo Opera House, and then take a closer look at our destination.
To run the scripts described in this tutorial, we must first install OperaWatir and its dependencies.
In each script we first need to require OperaWatir,
and then start Opera. Pretty soon after that we will want
to visit a URL, which is achieved with
browser.goto method. We then add our tests,
and when they are finished we quit the browser, with
require 'rubygems' require 'operawatir' browser = OperaWatir::Browser.new browser.goto 'http://maps.google.com/?hl=en' # Add your tests here browser.quit
Save this code into a file called
and then run it using this command:
Opera will start, wait a moment, go and visit Google Maps, and quit. Now we have visited a page, let's look at actually interacting with it.
To interact with the page we first need to find the element which we'd like to test. We can then perform a variety of actions, of which the most common are clicking and typing in text. Take a look at the API documentation for a full list of possible actions.
You can find the ID of an element in Opera by right
clicking it, selecting ‘Inspect Element’, and looking for
id="…" attribute in the window that
appears. Try finding my ID!
There are two things you need to find an
element with Watir: the kind of element, and an identifying
feature. The easiest way to uniquely identify an element is
by using the ID, which for the search field this is
q_d”. This is a text input, therefore we use
text_field method. In this example we are going enter a value into the Google Maps search field.
# Find the search field search = browser.text_field(:id, 'q_d')
Add this line to your code file, just below the comment line.
Consult the Watir 2 API Reference to see the other elements you can find.
Now that we have the search box we want to type something in it.
Issuing keyboard commands
We can type text in the browser using the
set method, and
press ‘special’ keys by using the
We will use these methods to search for the directions from
Opera Headquarters to the Oslo Opera House, and submit the form by
pressing the enter key. We will also use the
sleep method to make the browser wait before closing, giving us time to look at the results!
The following is the new code you should add to your code file:
# Type text and submit the form search.set 'Opera Software ASA, Oslo to Den Norske Opera & Ballett' browser.keys.send :enter # Wait 3 seconds so that we can see the results sleep 3 browser.quit
Try running the script again using the
command shown earlier. After loading Google Maps,
Opera will wait a bit, type the specified test, then press
enter. This works ok, although the
sleep 3 command will keep Opera open long
enough for you to notice that our search was ambiguous, and we
need to click the first result. We'll do that next.
Manipulating the mouse
Clicking links is very simple and uses some of the
techniques we have already learned. First we need to find
the link to click, and then we can call the
In our search the first suggested result, which
has an ID of
ddw_dll_1_0, is the one we want. We use
link method to search for only links:
Put this line after the
sleep 3 line above.
Finding more difficult elements
Sometimes the element we want will not have an ID, and we will
need to use other tools. If the element has a
name we can use these to find elements, or,
if we know it will always be in the same position we can
find it by index. For example:
# Examples of alternative selectors labs_image = browser.image(:title, 'Google Maps Labs') search_button = browser.button(:name, 'btnG') web_link = browser.link(:index, 2) # second link on the page
If we still cannot locate the element using these we can use
XPath (see The XPath spec for more details, or read this Simple XPath tutorial). XPath can be very complicated, but
we will be using only the simple
//div[@log='pan_down']. This selects
log attribute equals
pan_down'. In this case there is only one:
the pan down button located at the top left of the map. We
will use a similar selector to get the Zoom In button.
pan_down = browser.element_by_xpath("//div[@log='pan_down']") zoom_in = browser.element_by_xpath("//div[@title='Zoom In']")
In this case we are taking a closer look at our destination by clocking the "pan down" button once, and then clicking the "Zoom In" button twice.
See if you can work out how to add the code for this to your current example file, before looking below.
Here is the final code example - try running it again, to check it works out. Because Google Maps is an Ajax
application we have added
sleep commands to make sure
things have loaded and been added to the DOM before we try
and find them.
require 'rubygems' require 'operawatir' browser = OperaWatir::Browser.new browser.goto 'http://maps.google.com/?hl=en' puts 'Find the search box' search = browser.text_field(:id, 'q_d') puts 'Type text and submit the form' search.set 'Opera Software ASA, Oslo to Den Norske Opera & Ballett' browser.keys.send :enter sleep 1 puts 'Select the first result' browser.li(:id, 'altroute_0').click sleep 2 puts 'Pan down' pan_down = browser.element_by_xpath("//div[@log='pan_down']") pan_down.click puts 'Zoom in' zoom_in = browser.element_by_xpath("//div[@title='Zoom In']") zoom_in.click zoom_in.click puts 'Done' sleep 10 # End browser.quit
Extra homework: if you want to try something yourself,
see if you can close the left panel (hint: the button is an image with an ID
Hopefully this has been an enjoyable introduction to OperaWatir, and has shown you how easy it is to automatically control the browser. You are certainly not limited to what has been demonstrated here: have a look at the documentation to see everything you can do.
Happy testing and automating!
If you want to play with OperaWatir interactively, you can
jirb (irb equivalent). Just do the
jirb irb(main):001:0> require 'rubygems' => true irb(main):002:0> require 'operawatir' => true irb(main):003:0> browser = OperaWatir::Browser.new => #<OperaWatir::Browser:0x1496e57 @active_window=#<OperaWatir::Window:0x1eb1db2 @browser=#<OperaWatir::Browser:0x1496e57 ...>>, @driver=#<Java::ComOperaCoreSystems::OperaDriver:0xeabd2f>> irb(main):004:0> browser.goto 'http://sau.no/' => nil <Enter your Watir commands here> irb(main):005:0> browser.quit => nil
This article is licensed under a Creative Commons Attribution 3.0 Unported license.