Watir - Web Elements

In this chapter, we will discuss how to work with following in Watir −

  • Working with Textboxes
  • Working with Combos
  • Working with Radio Buttons
  • Working with Checkboxes
  • Working with Buttons
  • Working with Links
  • Working with Div’s

Working with Textboxes

Syntax

browser.text_field id: 'firstname' // will get the reference of the textbox

Here will try to understand how to work with textboxes on the UI.

Consider the page Textbox.html as shown below −

<html>
   <head>
      <title>Testing UI using Watir</title>
   </head>
   
   <body>
      <script type = "text/javascript">
         function wsentered() {
            console.log("inside wsentered");
            var firstname = document.getElementById("firstname");
            if (firstname.value != "") {
               document.getElementById("displayfirstname").innerHTML = 
                  "The name entered is : " + firstname.value;
                  
               document.getElementById("displayfirstname").style.display = "";
            }
         }
      </script>
      
      <div id = "divfirstname">
         Enter First Name : 
         <input type = "text" id = "firstname" name = "firstname" onchange = "wsentered()" />
      </div>
      <br/>
      <br/>
      <div style = "display:none;" id = "displayfirstname"></div>
   </body>
</html>

The corresponding output is as shown below −

Working with TextBoxes

We are having a textbox, when you enter the name onchange event is fired and the name is displayed below.

Now let us write the code, wherein we will locate the textbox and enter the name and fire the onchange event.

Watir Code

require 'watir'
b = Watir::Browser.new :chrome
b.goto('http://localhost/uitesting/textbox.html')
t = b.text_field id: 'firstname'
t.exists?
t.set 'Riya Kapoor'
t.value
t.fire_event('onchange')

We are using chrome browser and given the pageurl as http://localhost/uitesting/textbox.html.

Using goto api browser will open the pageurl and we are going to find text_field having id: firstname. If that exists, we will set value as Riya Kapoor and will use fire_event api to fire the onchange event.

Now, let us run the code to display the output as shown below −

Working with TextBoxes Run

Working with TextBoxes Run Output

Working with Combos

Syntax

browser.select_list id: 'months' // will get the reference of the dropdown

The test page that we are going to test now is shown here −

<html>
   <head>
      <title>Dropdown</title>
   </head>
   
   <body>
      <script type = "text/javascript">
         function wsselected() {
            var months = document.getElementById("months");
            
            if (months.value != "") {
               document.getElementById("displayselectedmonth").innerHTML = 
                  "The month selected is : " + months.value;
               
               document.getElementById("displayselectedmonth").style.display = "";
            }
         }
      </script>
      <form name = "myform" method = "POST">
         <div>
            Month is :
            <select name = "months" id = "months" onchange = "wsselected()">
               <option value = "">Select Month</option>
               <option value = "Jan">January</option>
               <option value = "Feb">February</option>
               <option value = "Mar">March</option>
               <option value = "Apr">April</option>
               <option value = "May">May</option>
               <option value = "Jun">June</option>
               <option value = "Jul">July</option>
               <option value = "Aug">August</option>
               <option value = "Sept">September</option>
               <option value = "Oct">October</option>
               <option value = "Nov">November</option>
               <option value = "Dec">December</option>
            </select>
         </div>
         <br/>
         <br/>
         
         <div style = "display:none;" id = "displayselectedmonth">
         </div>
   </body>
</html>

Output

Working with Combos

When you select month from the dropdown the same is displayed below.

Let us now test the same using Watir.

Watir Code for combo selection

require 'watir'
b = Watir::Browser.new :chrome
b.goto('http://localhost/uitesting/combos.html')
t = b.select_list id: 'months'
t.exists?
t.select 'September'
t.selected_options
t.fire_event('onchange')

To work with combos, you need to locate the select element using b.select_list api followed by the id of the dropdown. To select the value from the dropdown, you need to use t.select and the value you want.

The output on execution is as follows −

Working with Combos Output

Working with Radio Buttons

Syntax

browser.radio value: 'female' 
// will get the reference of the radio button with value “female”

Here is a test page that we will use to work with radio buttons −

<html>
   <head>
      <title>Testing UI using Watir</title>
   </head>
   
   <body>
      <form name = "myform" method = "POST">
         <b>Select Gender?</b>
         <div>
            <br/>
            <input type = "radio" name = "gender" value = "male" checked> Male
            <br/>
            <input type = "radio" name = "gender" value = "female"> Female
            <br/>
         </div>
      </form>
   </body>
   
</html>
Working with Radio Buttons

We will select radio button with value Female as shown in the Watir code −

require 'watir'
b = Watir::Browser.new
b.goto('http://localhost/uitesting/radiobutton.html')
t = b.radio value: 'female'
t.exists?
t.set
b.screenshot.save 'radiobutton.png'

To work with radio button, we need to tell the browser about the value we are selecting i.e. b.radio value:”female”

We are also taking the screenshot and saved that as radiobutton.png and the same is displayed below −

Working with Radio Buttons Output

Working with Checkboxes

Syntax

browser. checkbox value: 'Train' 
// will get the reference of the checkbox with value “Train”

Here is the test page for checkboxes −

<html>
   <head>
      <title>Testing UI using Watir</title>
   </head>
   
   <body>
      <form name = "myform" method = "POST">
         <b>How would you like to travel?</b>
         <div>
            <br>
            <input type = "checkbox" name = "option1" value = "Car"> Car<br>
            <input type = "checkbox" name = "option2" value = "Bus"> Bus<br>
            <input type = "checkbox" name = "option3" value = "Train"> Train<br>
            <input type = "checkbox" name = "option4" value = "Air"> Airways<br>
            <br>
         </div>
      </form>
   </body>
   
</html>
Working with Checkboxes

Now, let us use Watir to locate the checkbox in browser as shown below −

require 'watir'
b = Watir::Browser.new
b.goto('http://localhost/uitesting/checkbox.html')
t = b.checkbox value: 'Train'
t.exists?
t.set
b.screenshot.save 'checkbox.png'

To locate checkbox in the browser, use b.checkbox with value you want to select.

Working with Checkboxes Output

Working with Buttons

Syntax

browser.button(:name => "btnsubmit").click
// will get the reference to the button element with has name “btnsubmit”

Here is the test page for button −

<html>
   <head>
      <title>Testing UI using Watir</title>
   </head>
   
   <body>
      <script type = "text/javascript">
         function wsclick() {
            document.getElementById("buttondisplay").innerHTML = "Button is clicked";
            document.getElementById("buttondisplay").style.display = "";
         }
      </script>
      
      <form name = "myform" method = "POST">
         <div>
            <br>
            <input type = "button" id = "btnsubmit" name = "btnsubmit"
               value = "submit" onclick = "wsclick()"/>
            <br>
         </div>
      </form>
      <br/>
      
      <div style = "display:none;" id = "buttondisplay"></div>
   </body>
   
</html>
Working with Buttons

Here is watir code to locate the button on the given page −

require 'watir'
b = Watir::Browser.new
b.goto('http://localhost/uitesting/button.html')
b.button(:name => "btnsubmit").click
b.screenshot.save 'button.png'

Here is the screenshot button.png

Button

Working with Links

Syntax

browser.link text: 'Click Here' 
// will get the reference to the a tag with text ‘Click Here’

We are going to use the following test page to test links −

<html>
   <head>
      <title>Testing UI using Watir</title>
   </head>
   <body>
      <br/>
      <br/>
      <a href = "https://www.google.com">Click Here</a>
      <br/>
   </body>
</html>
Working with Links

The Watir details required to test links are as given below −

require 'watir'
b = Watir::Browser.new
b.goto('http://localhost/uitesting/links.html')
l = b.link text: 'Click Here'
l.click
b.screenshot.save 'links.png'

Output

Working with Links Output

Working with Links Outputs

Working with Div’s

Syntax

browser.div class: 'divtag' 
// will get the reference to div with class “divtag”

Test page where we can test for div.

<html>
   <head>
      <title>Testing UI using Watir</title>
      <style>
         .divtag {
            color: blue;
            font-size: 25px;
         }
      </style>
   </head>
   
   <body>
      <br/>
      <br/>
      <div class = "divtag"> UI Testing using Watir </div>
      <br/>
   </body>
</html>

Output

Working with Div

The Watir code to test the div is shown here −

require 'watir'
b = Watir::Browser.new
b.goto('http://localhost/uitesting/div.html')
l = b.div class: 'divtag'
l.exists?
l.text
b.screenshot.save 'divtag.png'

Output

Working with Div Output
Advertisements