Monday, October 19, 2009

Watir Tutorial: File fields, file selector/chooser test automation

As defined in HTML specifications, file field provides a means for users to attach a file to the form's contents. It is generally rendered by text field and an associated button which when clicked invokes a file browser to select a file name. The file name can also be entered directly in the text field. Just like type=text you can use the size attribute to set the visible width of this field in average character widths. You can set an upper limit to the length of file names using the maxlength attribute. Some user agents support the ability to restrict the kinds of files to those matching a comma separated list of MIME content types given with the ACCEPT attribute e.g. accept="image/*" restricts files to images. Further information can be found here http://www.w3.org/TR/html401/interact/forms.html#h-17.4


Here is the list of common file field attributes










AttributeTypeDescription
nameCDATAName of the field
valueCDATAStores the value of the field when set, or used to set the default value
disabled(disabled)Will display the file field as disabled
readonly(readonly)User cannot set the file field, will only display the preset value
sizeCDATALength of the file field visible on the web form/page
maxlengthNUMBERMax chars allowed for file fields
altCDATAshort description
tabindexNUMBERposition in tabbing order
acceptContentTypesList of MIME types for file upload


Before we start testing file fields, here are some of the common example of how file fields are used:


Simplest form of the file field is


<input type ='file' value='some value'/>


Here are various examples of the file field that will be used in this tutorial to explain how Watir can access and set the file field on web page using various file field properties/attributes


<input type='file' name='file1' value='uploadtest.html' class='file_class'/>
<input type ='file' id='file2' value='uploadtest.html'/>
<input type ='file' name='disabled' value='uploadtest.html' disabled='disabled'/>
<input type="file" name="datafile" size="40"/>
<input type="file" ... style="color:#fff; background:#030"/>
<input type='file' name='readonly' value='uploadtest.html' readonly='readonly'/>
<input type='file' name='file3' value="" class='file_class'/>
<input type=file name=photo size=20 accept="image/*"/>




File fields can appear with the forms or outside the form.

Here is the sample of file field within the form


<form name='testform' method='get' action='test.html'>
<input type='file' name='file3' value='uploadtest.html'/>
<input name="upload" type="submit" value="upload"/>
</form>


You can also access file fields using :beforeText and :afterText attributes, where file field appears before/after certain targeted text.


<input type='file' name='beforetest' value='uploadtest.html'/>This Text After

This Text Before<input type='file' name='aftertest' value='uploadtest.html'/>



Accessing file field using file field id



<input type ='file' id='file_field_id' value='uploadtest.html'/>


browser.file_field(:id, "file_field_id").exists?


Accessing file field using file field id with regular expression



browser.file_field(:id, /_id/).exists?


Accessing file field using file field name



<input type='file' name='file field_name' value='uploadtest.html' class='file_class'/>


browser.file_field(:name, "test1").exists?
browser.file field(:name, "file field_name").exists?


Accessing file field using file field name and regular expression


browser.file field(:name, /_name/).exists?


Accessing file field using file field index


browser.file field(:index, 1).exists?


Querying file field properties


browser.file_field(:index, 1).value
browser.file_field(:index, 1).name
browser.file_field(:index, 1).id
browser.file_field(:index, 1).disabled
browser.file_field(:index, 1).type
browser.file_field(:index, 1).class_name


Get all file fields in the browser

browser.file_fields


Get number of file fields in the page

browser.file_fields.length


File field iterator


browser.file_fields.length
index = 1
browser.file fields.each do |file_field|
assert_equal(browser.file_field(:index, index).id, file_field.id )
assert_equal(browser.file_field(:index, index).name, file_field.name )
index+=1
end


Accessing file fields in forms


browser.form(:id, "test_form_id").file_field(:id, "test1").exists?
browser.form(:name, "test_form_id").file_field(:index, 1).exists?



Accessing file fields in frames


browser.frame(:id, "Frame").file_field(:id, "test1").exists?
browser.frame(:id, "Frame").file_field(:index, 1).exists?


Iterating thru file fields in frames


count =0
browser.frame(:id, "Frame").file_fields.each do |ff|
....
count+=1
end


OR


browser.file_fields.each { |f| puts f.to_s }


Goto the nth file field on the page

browser.file_fields[n].to_s


Print the details of the file field.


browser.file_fields(:index, n).to_s


This will list type, id, name, value and whether the file field is disabled.

Friday, October 16, 2009

Watir Tutorial: Web links test automation

In this tutorial, we will explore various options to verify and automate web links testing. I tried to add code examples/samples for both HTML source for links and Watir source code to test those scenarios. If you are looking for something specific not covered in this tutorial, drop me an email at shrikantwagh@sbcglobal.net.

Before we start testing links, here are some of the common formats for the links used

Simplest for of the link is


<a href="url">Link text</a>


Here are various examples of the links that will be used in this tutorial to explain how Watir can access the link on web page using various link properties/attributes


<a href="http://www.somedomain.com/">Visit somedomain!</a>
<a href="http://www.somedomain.com/" target="_blank">Visit somedomain in new window!</a>
<a href="http://www.somedomain.com/" target="_top">Go to top!</a>


Anchors


<a name="label">Any content</a>
<a href="#label">Any content</a>
<a href="#tips">Jump to the Tips Section</a>
<a href="http://www.somedoamin.com/someurl.htm#tips">Jump to the Tips Section</a>


You can also use an image as a link:


<a href="http://someurl/somepage.html"><img border="0" src="buttonnext.gif" width="65" height="38"></a>
<a href="http://someurl/somepage.html"><img src="images/button.jpg" border="0" alt=""></img></a> The button is really a link





This is a mail link:


<a href="mailto:someone@somedomain.com?subject=Hello%20again">Send Mail</a>
<a href="lhttp://someurl/somepage.html" class="link_class_1">test1</a>


<a href="http://someurl/somepage.html" name="link_name">Link Using a name</a>
<a href="lhttp://someurl/somepage.html" title="link_title">Link Using a title</a>


Accessing link using link text


assert(browser.link(:text, "test1").exists?)


Accessing link using link text with regular expression


assert(browser.link(:text, /TEST/i).exists?)


Accessing link using link url


assert(browser.link(:url, /someurl.html/).exists?)
assert(browser.link(:url, "specificurl.html").exists?)


Accessing link using link id


assert(browser.link(:id, "link_id").exists?)


Accessing link using link id with regular expression


assert(browser.link(:id, /_id/).exists?)


Accessing link using link name


assert(browser.link(:name, "link_name").exists?)


Accessing link using link name and regular expression


assert(browser.link(:name, /_n/).exists?)


Accessing link using link title


assert(browser.link(:title, "link title").exists?)


Accessing link using link title and regular expression


assert_false(browser.link(:title, /title/).exists?)


Accessing link using link index


assert(browser.link(:index, 1).exists?)


Clicking the link



browser.link(:text, "test1").click
browser.link(:url, /link.html/).click
browser.link(:index, 1).click


Querying link properties


browser.link(:index, 1).href
browser.link(:index, 1).value
browser.link(:index, 1).innerText
browser.link(:index, 1).name
browser.link(:index, 1).id
browser.link(:index, 1).disabled
browser.link(:index, 1).type
browser.link(:index, 1).class_name
browser.link(:index, 7).title
rowser.links[7].innerText


Link iterator


browser.links.length
index = 1
browser.links.each do |link|
assert_equal(browser.link(:index, index).href , link.href )
assert_equal(browser.link(:index, index).id , link.id )
assert_equal(browser.link(:index, index).name , link.name )
assert_equal(browser.link(:index, index).innerText , link.innerText )
index+=1
end


Accessing links in frames


browser.frame("linkFrame").link(:text, "test1").exists?
browser.frame("linkFrame").link(:index, 1).href


Iterating thru links in frames


count =0
browser.frame("linkFrame").links.each do |l|
count+=1
end


Display all links in the page


browser.showLinks

Friday, October 2, 2009

Watir Tutorials: Watir and FireWatir Installation and Setup

Previous blog - Watir QA Automation: Watir Setup - Part I: Installing Ruby explain how to install Ruby on various platforms. This article explains how to install various types of Watir for different browsers and validate your installation.


Watir support Microsoft Internet Explorer [IE], FireFox and Safari browsers. There are separate Watir frameworks for each of these browsers.

  • Watir for IE

  • FireWatir for FireFox

  • SafariWatir for Safari


Since these are separate projects, the version of each of these Watir variations may not be same. I noticed that some of the features are supported by Watir are not available in FireWatir or vice-versa. This sometimes make writing cross browser test cases more challenging. Later I'll discuss this in details about writing interoperable, reusable and cross browser test cases without maintaining test suites for each browsers. We will postpone this discussion till then.


Prerequisites


In order to install Watir, you will need gem. Gem should get automatically installed when you install Ruby. Please refer to previous blog for Ruby installation -


You can verify whether gem is installed by typing the command gem or gem -v on the command prompt



C:\apptests\trunk\test_suite>gem
RubyGems is a sophisticated package manager for Ruby. This is a
basic help message containing pointers to more information.
Usage:
gem -h/--help
gem -v/--version
gem command [arguments...] [options...]
Examples:
gem install rake
gem list --local
gem build package.gemspec
gem help install
Further help:
gem help commands list all 'gem' commands
gem help examples show some examples of usage
gem help show help on COMMAND
(e.g. 'gem help install')
Further information:
http://rubygems.rubyforge.org
C:\apptests\trunk\test_suite>gem -v
0.9.4

If you want to grab the newer version of gem or you do not have gem installed, then go to http://rubygems.rubyforge.org/ or http://docs.rubygems.org/ and install gem. You will find the gem binaries, install instructions and documentation for gem here.


You can also verify whether you had any Watir frameworks installed using gem list



C:\apptests\trunk\test_suite>gem list |grep watir
commonwatir (1.6.2)
Common code used by Watir and FireWatir
firewatir (1.6.2)
flash_watir (1.1.0)
an extension for watir to test flash applications in firefox.
watir (1.6.2)

If you have any older versions of Watir installed then I would recommend to uninstall those before installing the newer versions.


It is possible that you might have latest-greatest version of watir already installed, so before you start uninstalling the existing version, check the gem list. Latest versions of the available gems are published periodically at http://gems.rubyforge.vm.bytemark.co.uk/gems/ and http://gems.rubyforge.org/gems/


Watir for Internet Explorer


Installing watir is as easy as execution one command. If you want specific version of watir then specify version number with -v option



gem install watir
gem install watir -v 1.6.2


Verify your Watir installation



gem list --local


this will list all gem installed on your computer

OR

if use gem list watir, will list only watir info.



C:\apptests\trunk\test_suite>gem list watir
*** LOCAL GEMS ***
watir (1.6.2)
Automated testing tool for web applications.

FireWatir for FireFox


FireWatir setup requires one extra step than installing Watir for IE


  • Install FireWatir and

  • Install JSSH plugins for FireFox


In following section we will explore each of this in details.

Installing FireWatir for FireFox


Installing firewatir is same process as installing watir, only gem name is different. If you want specific version of firewatir then specify version number with -v option



gem install firewatir
gem install firewatir -v 1.6.2

Verify your FireWatir installation



gem list --local

this will list all gem installed on your computer

OR

if use gem list watir, will list only firewatir info.



C:\apptests\trunk\test_suite>gem list firewatir
*** LOCAL GEMS ***
firewatir (1.6.2)
Automated testing tool for web applications using FireFox browser.

Install JSSH for FireFox


To run the FireWatir test cases in FireFox you need to install JSSH [javascript shell] plugins for FireFox


If you do not have FireFox installed yet, then download Firefox browser from http://www.mozilla.com and install it.


Follow the following steps to install JSSH plugins

  • Download .XPI file from http://code.google.com/p/firewatir/downloads/list

  • Start Firefox browser.

  • From File menu select Open File option.

  • Navigate to the path where the downloaded .XPI file is located. Select the .XPI file click open.

  • Wait till a dialog appear stating that do you want to install this extension.

  • Click install.

  • The extension will now show up in the installed extensions list.


For checking the installation of JSSH extension; follow steps below
  • Close Firefox.

  • Restart it from command prompt using "Firefox installation directory/firefox.exe -jssh". Make sure you give "-jssh" as parameter otherwise Firefox will not start JSSh shell.

  • To check if JSSh is listening on port 9997 run command "telnet localhost 9997" from command prompt.