Watir Tutorials

Watir Tutorial: Quick trick to identify IE browser version

2010-01-14T16:25:00.000-08:00

Watir Tutorials: Quick trick to identify IE browser version

Sometimes your testcases are browser version dependent and you need to perform tasks depending on the IE browser version. E.g. handling file chooser dialog boxes in IE7 and IE8. I'll discuss this IE7 and IE8 file chooser dialog box compatibility issue in my next blog.

In this kind of situation, the correct approach would be - itentify the version of the browser at runtime and excute the testcase for that browser. So you do not end up with three versions of same testcase, ecah for IE6, IE7 and IE8. It is easy to identify the version of the IE browser at runtime.

Following few lines of code will accomplish that:


$browser = Watir::IE.new()
full_ver = $browser.document.invoke('parentWindow').navigator.appVersion
tmp_str =/MSIE\s(.*?);/.match(full_ver)
$ie_ver = tmp_str[1]
puts "IE VERSION = #{$ie_ver}"

Once you know the browser version then you can use any control structure of your choice to exceute browser specific test cases.

Watir Tutorial: Developing cross-browser Watir-IE/FireWatir-FireFox test case with logging capability

2009-11-04T16:52:00.000-08:00

Developing cross-browser Watir-IE/FireWatir-FireFox test case with logging capability

Those who have their test cases written for Watir/IE with logging capability must have bump into this issue. WatirLogger is not available for FireWatir. Suggested solution is - Create your own subclass of Logger instead of using WatirLogger. Or use Log4R.

http://wiki.openqa.org/display/WTR/Firewatir+Compatibility

Which means as a test developer you will have to maintain two set of test cases one for Watir/IE and other for FireWatir/FireFox. And maintaining two sets of scripts for same test scenario is never a good idea. I always prefer to develop a test that works with at least IE and FireFox and not to maintain two different sets.

So if you want to write cross-browser test cases with logging functionality, you have one fo the following three options.

Do not use WatirLogger and create your own subclass of Logger.

Do not use WatirLogger and use Log4R or any other logger gem available.

Temporarily extend the FireWatir to support logging capabilities

In this blogpost I'll explore third option mentioned above.

This is what I tried to extend FireWatir to use with logger and do not have to change my test cases for FireWatir

1. Copy the file logger.rb from Watir gem to <FireWatir-gem-dir>\lib\firewatir and Modify the file to define FireWatirLogger as shown below.


module FireWatir
  class FireWatirLogger < Logger
    def initialize(filName, logsToKeep, maxLogSize)
      super(filName, logsToKeep, maxLogSize)
      self.level = Logger::DEBUG
      self.datetime_format = "%d-%b-%Y %H:%M:%S"
      self.debug("FireWatir starting")
    end
  end

  class DefaultLogger < Logger
    def initialize
      super(STDERR)
      self.level = Logger::WARN
      self.datetime_format = "%d-%b-%Y %H:%M:%S"
      self.info "Log started"
    end
  end
end

You can use the same logger.rb without any modification and just include watir/logger, but I choose to copy the logger.rb and modify it. I thought this might be cleaner and less confusing approach.

2. Add this line to firewatir.rb. This is optional and you can explicitly include this in the file you want to use logger, including firefox.rb. So include this in firewatir.rb and you will not have to worry about it later.


require 'firewatir/logger'

3. Add the following lines of code in firefox.rb

a. declare the accessor


    # access to the logger object
    attr_accessor :logger

b. initialize the logger instant in the constructor

If you choose not to copy and modify the logger from Watir and use it as it is then add this line to FireFox class constructor [initialize method]


      @logger = DefaultLogger.new

OR if you followed step #1 then you v=can also use the FireWatirLogger as below


      @logger = FireWatirLogger.new

4. define log method for FireFox class in firewatir.rb


    def log(what)
      @logger.debug(what) if @logger
    end

5. Declare global variable $browser_type and set it to IE/FF in your test case or in your top level testlist/test configuration file if you are following unit test framework.


e.g. $browser_type = "FF"

6. Include the related files depending on which browser you want to run this test in


if ($bType == "IE")
 require 'watir'
 require 'watir/exceptions'
elsif ($bType == "FF")
 require 'firewatir'
 require 'firewatir/exceptions'
 require 'firewatir/logger' #if not included in firewatir.rb
else
 $browser.logger.fatal( "Invalid browser type only IE or FF")
 exit
end

7. Write method startFireFox_with_logger
In your test case, if you want the same script to run for FF as well as IE, then following trick works for me.
Write the method to start FireFox with logger as you have for Watir


def start_ie_with_logger
  $browser = Watir::IE.new()
  $browser.logger = Watir::WatirLogger.new( 'debug.txt', 4, 10000 )
  $browser.logger.level = Logger::INFO
end

def start_ff_with_logger
  $browser = FireWatir::Firefox.new()
  $browser.logger = FireWatir::FireWatirLogger.new( 'debug.txt', 4, 10000 )
  $browser.logger.level = Logger::INFO
#  any other customization ...
end

8. Initialize the browser instance depending on the browser type


if ($bType == "FF")
puts "creating FF browser instance"
 start_ff_with_logger
elsif ($bType == "IE")
 puts "creating IE browser instance"
 start_ie_with_logger
else
 puts "cannot create browser instance"
end

9. You can use the logger as you would do when using Watir/IE


$browser.logger.debug("Executing TC_" + numonic + "_Title: Testcase " + name + " title...")
$browser.logger.info($browser.title)
$browser.logger.fatal( "Invalid browser type only IE or FF")

I hope you find this blog post useful. If you got any cool tricks, workarounds, or any issues you experience during test automation with Watir, please do share your experience and thoughts by posting your comments.

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

2009-10-19T12:37:00.000-07:00

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

Attribute	Type	Description
name	CDATA	Name of the field
value	CDATA	Stores 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
size	CDATA	Length of the file field visible on the web form/page
maxlength	NUMBER	Max chars allowed for file fields
alt	CDATA	short description
tabindex	NUMBER	position in tabbing order
accept	ContentTypes	List 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


 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


 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


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

Goto the n^th 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.

Watir Tutorial: Web links test automation

2009-10-16T12:31:00.000-07:00

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

Watir Tutorials: Watir and FireWatir Installation and Setup

2009-10-02T22:08:00.000-07:00

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.

Watir Tutorial: Installation and Setup - Part I

2009-09-25T13:38:00.000-07:00

Watir installation and setup - Part I

Installing watir is just two step process

Step #1 - Install Ruby

Step #2 - Install Watir

Step #1 - Installing Ruby

Download ruby binaries or installers.

Installing Ruby on Windows

You might have Ruby already installed. It is always good idea to check whether Ruby is already installed in your machine and the version of Ruby if it is available. Execite the following commond from your windows command prompt.


C:\Documents and Settings\Shrikant Wagh>ruby -v
ruby 1.8.6 (2007-09-24 patchlevel 111) [i386-mswin32]

If it is not installed you will get the following message


C:\Documents and Settings\Shrikant Wagh>ruby -v
'ruby' is not recognized as an internal or external command,
operable program or batch file.

Easiest way to install Ruby on Windows platforms is to use one-click installer. Click on this link to download the one-click installer
Ruby 1.8.6 One-Click Installer

Run the one-click installer and follow the instruction to install Ruby.

After installation is complete, verify your Ruby installtion using the same commant mentioed above.

If you want to explore other option to install Ruby, please visit http://ruby-lang.org/en/downloads.

Installing Ruby On Linux

For most of the Linux flavors, compiled packages/binaries are available to install Ruby.

Red Hat and Fedora Linux

Verify whether Ruby is already installed.


rpm -q ruby
package ruby is not installed

If it is not yet instyalled then you can install it using yum update manager. Any installtion tasks requires root access, so you can login with root access or use sudo


sudo yum install ruby

Follow the instructions prompted by installer to install required packages.

Verify your Ruby installtion once complete.


ruby -v
ruby 1.8.1 (2003-12-25) [i386-linux-gnu]

Debian or Ubuntu Linux

Verify whether Ruby is already installed.


ruby
The program 'ruby' is currently not installed.
You can install it by typing:
sudo apt-get install ruby
-bash: ruby: command not found

If it is not yet instyalled then you can install it using app-get. Any installtion tasks requires root access, so you can login with root access or use sudo


sudo apt-get install ruby

Follow the instructions prompted by installer to install required packages.

Verify your Ruby installtion once complete.


ruby -v
ruby 1.8.1 (2003-12-25) [i386-linux-gnu]

Installing Ruby On OS X

Your Mac might have Ruby already installed, verify which version on Ruby is installed on your Mac.


ruby -v
ruby 1.8.6 (2008-08-11 patchlevel 287) [universal-darwin9.0]

You got the right version. Do nothing. If you got older versiona dn want to installt new version then you can use MacPorts or Fink

On MacPorts, you can install Ruby with…


% port install ruby

Also, you can doenload the source code and compile it locally.

For source code and more details of installting Ruby on OS X, refer to Ruby source code" for source, Ruby for Leopard for building Ruby on Mac OS X 10.5 (Leopard) and Ruby for Tiger for builing Ruby on Mac OS X 10.4 (Tiger)

Watir Tutorial - How to check for web component rendering

2009-09-25T00:00:00.000-07:00

For any web page testing, almost very test engineer has the dilemma of how much wait is optimal for the page/certain component to render. How much time will it take to render the component before you can check that components or the enclosed in the components depends on so may parameters and your guess is as good as mine. If you wait for less, you get to many false failures. If you wait more, you test execution get sluggish.
You can always use this trick, few lines if extra code, but make you test execution much efficient - sleep for small duration, check for component in a loop and break out soon it is available.
Here is the test automation scenario. You have a web page with the form and you have to automate filling the form fields and form submission. So if you try to check for components using assert() or try to edit the form fields before the form is rendered on the page, you test will fail just because the page took longer to load. If you take the worst case scenario and put 30 sec of wait time, it will be annoying for person who will execute those test cases, as he/she have to wait for that duration everytime.
Following approach will address this issue, just use any looping structure you are comfortable with, sleep for small duration and check if the form is rendered, break out of the loop soon form is available and continue with rest of the test case.
Sample Code:
tries = 0
until ($browser.form(:id, "service-form").exists? or tries > 5)
sleep 2
$browser.logger.info( "waiting...")
tries = tries + 1
end