Page Elements

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 <button>, <input type="button">, <input type="image">, <input type="reset">, and <input type="submit"> HTML tags. Common attributes are id, name and value.

HTML Buttons

What you see in the web browser:

This is the tag in the HTML source:

<input type="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

<input type="image"> 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

This is the tag in the HTML source:

<input type="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 <input type="checkbox"> 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: <input type="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 <a> HTML tag. Common attributes are id, name and href.

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:

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

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 <input type="radio"> 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:

<input type="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 <select> HTML tag. Common attributes are id and name.

What you see in the web browser:

Web Testing in Ruby is fun

This is the tag in the HTML source:

<select id="one" name="selectme">
  <option></option>
  <option>Web Testing</option>
  <option>in Ruby</option>
  <option>is fun</option>
</select>

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. This no longer seems to work.

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:

Web Testing in Ruby is fun

This is the tag in the HTML source:

<select id="one" name="selectme" multiple="multiple">
  <option></option>
  <option>Web Testing</option>
  <option>in Ruby</option>
  <option>is fun</option>
</select>

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