Web Page Testing with Firefox 4.0 (and HTML 5 Dojo Toolkit Data Tags)

We should verify that our new dojo-tagged form example (Demo_Form_v16.html) still works in our automated environment. But Firefox 4.0 no longer have the jssh plugin and firewatir is no longer an option. The watir installation page suggests use of watir-webdriver, which has a runtime dependency on selenium -I’ll have to check this version 2.0 option-.

So we’ll uninstall firewatir and then install watir-webbriver (see detailed install instructions) using the command shell:

$ sudo gem uninstall firewatir
$ sudo apt-get install ruby1.8-dev
$ sudo gem1.8 install watir-webdriver

Now the ruby definition code needs two modifications that you can see in green in the following code: 1) the require and, 2) instantiation of browser (ff):

#includes
require 'rubygems' # optional
require 'watir-webdriver'
require 'test/unit'

class TC_recorded < Test::Unit::TestCase
 def test_webpage
  ff = Watir::Browser.new :firefox

Our code won’t run yet, check this for other differences. In our case, our file only needs two more methods to be changed:

  1. ‘.clearSelection’ is now ‘.clear’ in multiselect
  2. ‘.contains_text(,)’ in assertion now drops the error text and becomes .text.include?()

Check the final code ‘demo_form.rb‘ that can be run with:

$ ruby demo_form.rb
Form web page test result

Form web page test result

watir-webdriver seems faster than firewatir and you can test against chrome as well, I like the new tool. Documentation: class list,

Note: Thanks to Al Hoang on a post for fixing ‘mkmf error’ install problem with Ruby on ubuntu, XPlayer for its test article, and Alister Scott for maintaing the watir site.


[Edit May 12th, 2011]

In my Ubuntu 10.04, I just uninstalled Ruby 1.8.7, using synamtic, also installed Ruby 1.9.1 and rubygems andreinstalled rails and click on apply. Result: The watir test works!. So go ahead, upgrade!

DojoToolkit 1.6 and HTML 5

This is our first step to make our form example a HTML 5 compliant web page, we’ll need to make small modifications to our dojo toolkit widget’s tags. These will not be necesary until 2.0 when the actual notation eill be deprecated, but we can start our migration now.

First, download the full 1.6 version (3.7MB) of dojo and replace our old 1.5 files in /var/www/dojo (in ubuntu). Then acording to the data-attribute documentation -you may want to check the 1.6 release too- we need to:

  1. Change the doc type (<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”&gt;) to:
    <!DOCTYPE htlm=html>
  2. Change dojo config (src=”/dojo/dojo/dojo.js” djconfig=”isDebug: true, parseOnLoad: true”) to:
    src=”/dojo/dojo/dojo.js” data-dojo-config=parseOnLoad: true, isDebug: true
  3. Do a global replace from ‘dojoType=’ to:
    data-dojo-type=’
  4. For each widget it is necesary to check attributes and move them inside the tag data-dojo-props.
    In our form, the date value was set to “value=’2010-08-31′”, the name must be repeated also as I found out thanks to this conversation between Jérôme Despatis and Peter Higgins, and now is:
    data-dojo-props=name:’dtText’, value:’2010-08-31′.
    In the Checkbox and Radio Button the checked state and value are also included.
  5. The events also need modification, as they are evaluated, so in the button the onclick=”getValues()” is now:
    data-dojo-props=onClick:function(){getValues();}.  Notice that the event is now in camelCase form.

This is the final code: Demo_Form_v16.html. [this is a pdf file wich contains the code]

And this is how it runs in Firefox 4.0, Opera 11.10 and Chromium 10.0.648:

The actual code running un three browsers

Firefox, Opera, Chrome