Getting started with OperaWatir
Introduction
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.
The beginning
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
the browser.goto
method. We then add our tests,
and when they are finished we quit the browser, with browser.quit
.
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 tutorial.rb
,
and then run it using this command:
jruby tutorial.rb
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.
Finding elements
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
the
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
the 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 key
method.
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
click
method.
In our search the first suggested result, which
has an ID of ddw_dll_1_0
, is the one we want. We use
the link
method to search for only links:
browser.li(:id, 'altroute_0').click
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
unique title
or
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
selector //div[@log='pan_down']
. This selects
all the <div>
elements
whose 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.
Final code
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
of panelarrow2
).
Conclusion
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!
PS
If you want to play with OperaWatir interactively, you can
use jirb
(irb equivalent). Just do the
following:
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.
Comments
The forum archive of this article is still available on My Opera.