-
Notifications
You must be signed in to change notification settings - Fork 45
Page Elements
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.
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">
This is the Watir code you need to click a button using the id attribute:
ie.button(:id, "one").click
This is the Watir code you need to click a button using the name attribute:
ie.button(:name, "clickme").click
This is the Watir code you need to click a button using the value attribute:
ie.button(:value, "Click Me").click
<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.
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.
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">
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
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
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:
What you see in the HTML source:
<a href="http://pragmaticprogrammer.com/titles/ruby/" id="one" name="book">Pickaxe</a>
Watir code to click a link using the id attribute:
ie.link(:id, "one").click
Watir code to click a link using the name attribute:
ie.link(:name, "book").click
Watir code to click a link using link's text:
ie.link(:text, "Pickaxe").click
Watir code to click a link using the href attribute:
ie.link(:href, "http://pragmaticprogrammer.com/titles/ruby/").click
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">
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
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
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 funThis 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>
Watir code to set a select box item using the id attribute:
ie.select_list(:id, "one").set("is fun")
Watir code to set a select box item using the name attribute:
ie.select_list(:name, "selectme").set("is fun")
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.
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 funThis 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
Watir sets or clears a text field by looking at the attributes available in the <input type="text"> HTML tag. Common attributes are id and name.
What you see in the web browser:
This is the tag in the HTML source:
<input type="text" id="one" name="typeinme">
Note: There is also a file upload element that looks exactly like a text_field with a "Browse" button to the right.
Watir code to set the text field with the string Watir World using the id attribute:
ie.text_field(:id, "one").set("Watir World")
Watir code to clear a text field using the id attribute:
ie.text_field(:id, "one").clear
Watir code to set the text field with the string Watir World using the name attribute:
ie.text_field(:name, "typeinme").set("Watir World")
Watir code to clear a text field using the name attribute:
ie.text_field(:name, "typeinme").clear
Forms aren't visible through the browser, but are used a lot in web applications. To find them, look at the HTML source for <form> tag. Watir can submit forms in a variety of ways.
Watir can submit buttons on a web page contained in a form by looking at the attributes available in the <input type="submit"> HTML tag. Common attributes are id, name and value.
This is the tag in the HTML source:
<form>
<input type=<span class="code-quote">"submit" id="one" value="Submit" /></span>
</form>
This is the Watir code you need to click a button that will submit a form using the id attribute:
ie.button(:id, "one").click
There may be input fields on a web page, but no button to submit. Instead, they will allow you to hit Enter/Return on your keyboard. When there is no button to submit the data, we can just submit the form itself.
Watir can submit a form by looking at the attributes available in the <form> HTML tag. Common attributes are id, name, action and method.
This is the tag in the HTML source:
<form id="one" name="loginform" action="login" method="get">
<input />
</form>
Watir code to submit the form using the id attribute:
ie.form(:id, "one").submit
Watir code to submit the form using the name attribute:
ie.form(:name, "loginform").submit
Watir code to submit the form using the action attribute:
ie.form(:action, "login").submit
Watir code to submit the form using the method attribute:
ie.form(:method, "get").submit
See Frames.