NOTE: The following tutorial uses Chrome for the examples.

Let's have a look at how to use Watir and Ruby to take control of the most commonly used web elements that you'll find on most websites such as text fields, links and buttons. To interact with any of these is very simple and requires pretty much just one line of code per element interaction. I've mocked up a little webpage with a load of different elements on it that we'll use in the following examples, check it out here:

http://www.lazyautomation.co.uk/lazy1.html

Button

If you look at the test page you'll see a button labelled 'Hello World' and if you click that button the words 'Hello World' will appear beneath it. The following bit of code will take you to that test page and then click that button. Copy and past the code into your IDE and run it and then we'll have a look at what we've done.

require "watir-webdriver"
b = Watir::Browser.new :chrome

b.goto "http://www.lazyautomation.co.uk/lazy1.html"

b.button(:id, 'hello1').click

 Right, hopefully every thing went according to plan and you were left looking at the test page with the words 'Hello World' just below the 'Hello World' button. Let's break down the code now. The first line tells Ruby that we'll be requiring the watir-webdriver which is the library we use to control and manipulate web pages. The second line opens a new instance of the Chrome browser and assigns that browser instance to a variable which we've simply called 'b'. You can call this anything you want but generally people tend to call it either 'b' or 'browser'. The next line tells our browser to goto the test page.

Finally we have our single line of code that actually clicks the button, which is the line we're most interested in for the purposes of this tutorial. It's made up of three key bits of information, the element type which is button, how we want to identify the button (:id, 'hello1') and what we want to do with it click. All pretty simple and easy to read.

It's also worth knowing that even though we've identified button using its id there are multiple ways we could have selected it. Goto the test page in Chrome and right click the 'hello world' button and select Inspect element. If you look at the code behind the button you'll see it also has a name. You could also get exactly the same result by identifying the button using the name instead of the id. Like so. 

require "watir-webdriver"

b = Watir::Browser.new :chrome
b.goto "http://www.lazyautomation.co.uk/lazy1.html"

b.button(:name, 'helloworld').click

You can also use something called index, which allows you to identify element based on their order on the page. starting at 0 for the first element. Since there's only one button on the test page we could do this like so.

require "watir-webdriver"

b = Watir::Browser.new :chrome
b.goto "http://www.lazyautomation.co.uk/lazy1.html"

b.button(:index, 0).click

Let's have a look at some other element types now.

Text Field

At the top of the test web page you'll see a text field and if you inspect it the same way we did the button you can see it has the id textfield1, so we can use that to identify it. The element type for a text field is quite simply text_field and instead of click we're gonna use set followed by some text in single quotes that we want to populate the text field with. Here's the code! Copy and past it into your IDE and try running it. Hopefully you'll end up looking at the test page once again but this time with populated text field.

require "watir-webdriver"

b = Watir::Browser.new :chrome
b.goto "http://www.lazyautomation.co.uk/lazy1.html"

b.text_field(:id, 'textfield1').set 'Wahey!!'

You can also clear a text field by using clear, the following example will populate the same text field and then wait for 5 seconds using the sleep (More on sleep later) command and will then clear the text. Try it out!

require "watir-webdriver"

b = Watir::Browser.new :chrome
b.goto "http://www.lazyautomation.co.uk/lazy1.html"

b.text_field(:id, 'textfield1').set 'Wahey!!'
sleep(5)
b.text_field(:id, 'textfield1').clear

Radio Buttons

The test page has a set of two radio buttons labelled A and B, and inspecting them will reveal that the id for B is 'b'. Let's use that id to select it using set.

require "watir-webdriver"

b = Watir::Browser.new :chrome
b.goto "http://www.lazyautomation.co.uk/lazy1.html"

b.radio(:id, 'b').set

Checkboxes

The test page has a set of two checkboxes on it labelled 'Hello' and 'Goodbye', 'Hello' is checked by default. Inspecting them will reveal that these elements do not have an id, only names. Their names are hello and goodbye. The following code will uncheck 'Hello' and check 'Goodbye'.

require "watir-webdriver"

b = Watir::Browser.new :chrome
b.goto "http://www.lazyautomation.co.uk/lazy1.html"

b.checkbox(:name, 'hello').clear
b.checkbox(:name, 'goodbye').set

Link

The a link to my band's website labelled 'This is a link to another website'. This link has the id tibm. The following code will click this link using that id.

require "watir-webdriver"

b = Watir::Browser.new :chrome
b.goto "http://www.lazyautomation.co.uk/lazy1.html"

b.link(:id, 'tibm').click

Dropdown

We'll cover these in a bit more detail later on as there are a lot of different things you'll probably want to do with these to cover various test scenarios, but let's look at two ways to select specific options from this simple dropdown menu. If you inspect the dropdown on the test page you'll see that it has the id options1, so we'll use that to select it. If you then expand this code you'll see that each option has a value. The following code will use value c to select OptionC.

require "watir-webdriver"
b = Watir::Browser.new :chrome

b.goto 'http://www.lazyautomation.co.uk/lazy1.html'

b.select_list(:id, 'options1').select_value 'c'

..and this cheeky bit of code will do exactly the same thing but instead of using the value it'll use the actual actual dropdown text instead.

require "watir-webdriver"
b = Watir::Browser.new :chrome

b.goto 'http://www.lazyautomation.co.uk/lazy1.html'

b.select_list(:id, 'options1').select 'OptionC'

Right, I think that's enough for one day, hopefully that all made sense. I'll go into more detail on some other funky stuff you can do with these elements later on but that should be enough to give you a basic understanding of how you can use Watir and Ruby to automate some basic web testing. You might even be able to use some of these basic concepts to automate a few of your existing test scenarios!