Getting started with OperaWatir

By Stuart Knightley

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.

No new comments accepted.