How to...

Basics

All Webmetrics Scripts will have the IE window created for you and assigned to the variable "$IE0" any additional windows will be created and assigned to "$IE1", "$IE2" etc. At the beginning of all Webmetrics scripts, $IE0 will be used to navigate to navigate to the first page and the transaction will continue from there. Think of $IE0 as the first window, $IE1 as the second window, and so on.

In order for the Webmetrics' Agents to gather performance data for a given transaction, the transaction must be broken down into individual steps. A step is defined as a group statements that produce network traffic in IE.

Here are some examples of steps:

# Example 1
# This step goes to a website
beginstep
  $IE0.goto('http://www.webmetrics.com')
endstep

# Example 2
# This step fills in login information and logs in
beginstep
  $IE0.form(:name, 'form1').text_field(:id, 'username').set('username')
  $IE0.form(:name, 'form1').text_field(:id, 'password').set('password')
  $IE0.button(:id, 'signinButton').click
endstep

Here is an example of an incorrect step:

# Example 1
# Incorrect step. Only fills in form, does not generate traffic
beginstep
  $IE0.form(:name, 'form1').text_field(:id, 'username').set('username')
  $IE0.form(:name, 'form1').text_field(:id, 'password').set('password')
endstep


Notice that in the step above, the statements only fill in the form but does not log in so IE does not load a new page. Because this step does not generate any traffic through Internet Explorer, there aren't any performance data to gather. The logs for this transaction will reflect that this step did not produce any data.

In addition, Watir provides very flexible methods of identifying elements. Each element that a user interacts with can be scripted in Watir a variety to ways. Depending on the attributes that are used for any particular element, it will be possible to script the same element a handful of different ways. The examples below will show that there are multiple different methods for identifying the same element. This flexibility allows users to build scripts that are more resilient to changes.

How to navigate to a page

To navigate to a page, use the "goto" command.

Here are some examples of the goto command:

#Goto Webmetrics
$IE0.goto('http://www.webmetrics.com')

#Goto Google
$IE0.goto('http://www.google.com')

#Goto Yahoo
$IE0.goto('http://www.yahoo.com')

How to click on a link

To click on a link, use the "link" command.
The following examples will assume that the user wants to click on a link with the following HTML

<a href="page1.html" id="page1link" name="linkname">This link takes you to page 1</a>

Any of the following examples will click on this link.

#Example 1, click on link using the id attribute
$IE0.link(:id, 'page1link').click

#Example 2, click on link using the name attribute
#This example assumes that there isn't another link before this one with the same name
$IE0.link(:name, 'linkname').click

#Example 3, click on link using the href attribute
$IE0.link(:href, 'page1.html').click

#Example 4, click on link using the text of the link
$IE0.link(:text, 'This link takes you to page 1').click

How to click on a check box

To click on a check box, use the "check_box" command
The following examples will assume that the user wants to click a checkbox with the following HTML

<input type="checkbox" name="checkbox1" id="checkboxid" />

Any of the following examples will click on this checkbox

#Example 1, set checkbox by using id attribute
$IE0.check_box(:id, 'checkboxid').set(true)

#Example 2, set checkbox by using name attribute
$IE0.check_box(:name, 'check_box').set(true)

To uncheck a checkbox, simply change "true" to "false" and the checkbox will be unchecked.

How to use select lists

To select a value from a select list, use the "select_list" command.
The following examples will assume the following HTML for the select list

<select name="select1" id="selectid">
  <option value="value1">option 1</option>
  <option value="value2">option 2</option>
</select>

The following examples will set the select list to the second option in the list:

#Example 1, using the name attribute
$IE0.select_list(:name, 'select1').select_value('value2')

#Example 2, using the id attribute
$IE0.select_list(:id, 'selectid').select_value('value2')

For help determining the html of the element, use the 'Element HTML' option from the View menu. Then hover over the element with the cursor to determine the html for that element.

How to select radio inputs

To select a radio input element, use the radio command.
The following examples will assume the following HTML for the radio input:

<input type="radio" name="radio1" id="radioid" value="radiobutton" />

Any of the following examples will select the radio button:

#Example 1, select radio input by id
$IE0.radio(:id, 'radioid', 'radiobutton').set

#Example 2, select radio input by name
$IE0.radio(:name, 'radio1', 'radiobutton').set

When the above example executes, the html of the radio input will be changed to the following:

<input type="radio" name="radio1" id="radioid" value="radiobutton" CHECKED />

How to click form submit buttons

To click on a submit button or a button element, use the button command.
The following examples will assume a submit button with the following HTML:

<input type="submit" value="Submit" name="button1" id="submitbutton1" />

The following examples will click the submit button above:

#Example 1, click submit button by id
$IE0.button(:id, 'submitbutton1').click

#Example 2, click submit button by name
$IE0.button(:name, 'button1').click

#Example 3, click submit button by value
$IE0.button(:value, 'Submit').click

How to click images

Images placed inside anchor tags or image elements with "onclick" events may take a user to another page. In addition, it may serve as a submit button. In these cases, it is essential that we are able to click on the image just as we click on links or submit buttons. To do so, use the image command. The following examples will assume the image has the following HTML:

<img src="/path/image.jpg" name="image1" id="imageid" />

Any of the following examples will click on the image above:

#Example 1, click image by id
$IE0.image(:id, 'imageid').click

#Example 2, click image by name
$IE0.image(:name, 'image1').click

#Example 3, click image by src
$IE0.image(:src, '/path/image.jpg').click

How to identify inputs using the form tag

Occasionally, it is necessary to be more explicit when identifying elements. On any given html page, there could be multiple forms and inside these multiple forms, the could be elements that have the same html despite being in separate forms. Without specifying which form a script may incorrectly click where the user does not want it to.

For example, if the following html was found on the page:

<form name="form1" method="POST" action="page1.cgi">
  <input type="submit" value="Submit" name="submitbutton" />
</form>

<form name="form2" method="POST" action="page2.cgi">
  <input type="submit" value="Submit" name="submitbutton" />
</form>

Notice above that there are two forms submitting to different locations, however, their submit buttons are identical. In order to distinguish between the two buttons, we will need to use the form element to identify which submit button we want.

An example of clicking on the second submit button is as follows:

#Example 1, clicking on the second submit button
$IE0.form(:name, "form2").button(:name, 'submitbutton').click
How to script elements not listed

The elements listed above are the most common HTML elements. In addition to these elements, there are many more supported by Watir. To find more about these elements refer to the Watir Documentation. The same basic ideas demonstrated above apply to the other html elements supported by Watir. For a concise list of attributes supported by each particular element, refer to this list.

How to close dialog boxes

Dialog boxes are usually prompts that halts the user's navigation of a page and requests the user to take action in order for the browser to know how to proceed. Some examples of dialog boxes are listed below:





To close these dialog boxes, there is a directive available that by default will click the button that causes the user to accept the prompt. For example, in the "Security Information" dialog above, this directive will cause the 'Yes' button to be clicked. In the prompt below it, this directive will cause the 'Ok' button to be clicked.

If you know beforehand that clicking on something in the web page will cause one of these dialogs to appear, click 'Action' from the menu, and click 'Add Accept Dialog Box' and the directive 'acceptdialog' will be added to script before the step producing the dialog box occurs.

If you did not know that the dialog box would occur and have already gone too far to add 'acceptdialog', simply click inside the script text box and add 'acceptdialog' before the step that causes the dialog box to appear.

Additionally, some dialogs, such as the confirm dialog above contains titles that vary according to the current URL of the browser. To be able to click on these dialog boxes, the title must be supplied to 'acceptdialog'. This directive also takes another optional parameter that specifies the amount of time it takes for this dialog box to appear. The default timeout is 5 seconds but pages with performance problems may take longer to show this dialog box.

For example, if the confirm dialog box above took more than 5 seconds to appear, the following usage of the directive will allow this dialog box to be closed:

acceptdialog(10, "The page at http://www2.webmetrics.com says:")

This example gives the dialog box with the title "The page at http://www2.webmetrics.com says:" 10 seconds to appear.

How to Generate Random Variables

Some transactions require an element of randomization in order for the transaction to work. An example of this may be a signup process that requires the script to sign up with a random name every time. In order to do this, there is a tool built into the script recorder that allows the user to generate random values for this purpose.

To find this tool, click on the 'Tools' menu and click 'Generate Random Variable'.

The user will be prompted with the following screen:



If a user wants to generate a random variable called 'username' consisting of only alphabetical characters with a length of 10 characters, they would perform the following steps:
  1. Type 'username' in the field directly under 'Variable Name'
  2. Select the 'Alphabetical' radio button
  3. Select '10' from the select list directly under 'Value Length'
The following line will be inserted into the script:
username = globalrand(10, 'CHAR')

To use this random value, while navigating a webpage, type in
<VAR username>

in a textbox and you will notice that a random value will be inserted where you have used that variable. Each time a script is played back, a random value will be generated and substituted where you have used this variable.