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” “”&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:
  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


Web Page Testing in Windows-IE and Linux-FF

This post shows tree things:

  • Construction of a web page with Dojo Toolkit widgets.
  • The code to test that form in windows using the internet explorer browser with watir.
  • The code for testing in linux using firefox with firewatir.
    [Edit: this will only work up to firefox 3.6, check this post for firefox 4.0]

The Form

This is a form that is included with the dojo toolkit 1.5 SDK in the dijit/test subdirectory, simplified a bit.

The code for (Demo_Form.html) is:

  <title>Form unit test</title>
  <style type="text/css">
   @import "/dojo/dojo/resources/dojo.css";
  <link id="themeStyles" rel="stylesheet" href="/dojo/dijit/themes/claro/claro.css">
  <script type="text/javascript" src="/dojo/dojo/dojo.js"
 djconfig="isDebug: true, parseOnLoad: true">

That sets the form styles to dojo.css and claro.css.The path for the dojo.js is set as well as the flags to turn on the debug messages. Then dojo componets are required and a javascript rutine will be used to get the values of the form fields at the bottom of the page as a text result to test:

 <script type="text/javascript">
 function getValues(){
   var obj = dijit.byId('myForm').get('value');
   var strObj = dojo.toJson(obj, true);
    "Form Fields Content:<br/>" + strObj.replace(/["]/g,"'");

The following html code is how the form and fields are defined in dojo. Notice the use of ids for reference and the digit.form.TYPE-OF-FIELD declaration:

 <form dojotype="dijit.form.Form" id="myForm"
  enctype="multipart/form-data" action="../formAction.html"
  method="" target="_formSubmitIframe">
  <table style="border: 1px solid rgb(159, 159, 159);" cellspacing="10">
    <input id="dtText" name="dtText" dojotype="dijit.form.DateTextBox"
     value="2010-08-31" type="text"></td>
    <select id="Combo1" name="Combo1" dojotype="dijit.form.ComboBox">
     <option value="one">one</option>
     <option value="two">two</option>
     <option value="three">three</option>
   <tr><td>CheckBox widget</td><td>
    <input dojotype="dijit.form.CheckBox" id="cb2a" name="cb2"
     value="1" type="checkbox"> 1
    <input dojotype="dijit.form.CheckBox" id="cb2b" name="cb2"
     value="2" checked="checked" type="checkbox"> 2
    <input dojotype="dijit.form.CheckBox" id="cb2c" name="cb2"
     value="3" checked="checked" type="checkbox"> 3
    <input dojotype="dijit.form.CheckBox" id="cb2d" name="cb2"
     value="4" type="checkbox"> 4
   <tr><td>Radio widget</td><td id="radio-cells" name="radio-cells">
    <input dojotype="dijit.form.RadioButton" id="r2a" name="r2"
     value="1" type="radio"> 1
    <input dojotype="dijit.form.RadioButton" id="r2b" name="r2"
     value="2" checked="checked" type="radio"> 2
    <input dojotype="dijit.form.RadioButton" id="r2c" name="r2"
     value="3" type="radio"> 3
    <input dojotype="dijit.form.RadioButton" id="r2d" name="r2"
     value="4" type="radio"> 4
    <select id="ms1" name="ms1" multiple="true" dojotype="dijit.form.MultiSelect"
     style="border: 5px solid rgb(237, 237, 237); height: 100px; width: 175px;">
     <option value="TN">Tennessee</option>
     <option value="VA" selected="true">Virginia</option>
     <option value="WA" selected="true">Washington</option>
     <option value="FL">Florida</option>
     <option value="CA">California</option>
  <button dojotype="dijit.form.Button" name="bgetval" onclick="getValues();">
   Get Values from form!</button></form>
  <div id="result"></div>

From the previous post you should have installed the Dojo Toolkit files at the same level that the form so you can see if everything’s all right by opening the form and using the calendar functionality.

Test in Windows and IE

The ruby code for this demo is demo_watir.rb. I use also a simple batch to test with a double click demo_watir.bat or you can just type ruby demo_watir.rb

The first lines require watir and the assertion libraries as well as defining the class.

# Demo for testing dojo.toolkit widgets @ Linux & Firefox #includes
require 'watir'
require 'test/unit'
 class TC_recorded < Test::Unit::TestCase
 def test_webpage

A browser is instantiated and opens the Demo form

 ie =
 #:::::::::login page::::::::::::::::::

Lets see how the we fields in the form are changed.

The date field is a normal textbox and the name used is dtText. The combo field is really a text box. You can check this by open the form with firefox with firebug add-in and use the context menu (right click) and select inspect element.

The checkbox and radio option are normal elements and set and clear methods are used. The select list needs to be cleared and then the Tennesse element selected.

The button is rendered different and we need to use a span element by its text to trigger its click event.

 #:::::::::form page::::::::::::::::::   #date into text field
 ie.text_field( :id, "dtText").set("01/09/2010")
 #select the second option of combobox, tow values: display and option value
 ie.text_field( :id, "Combo1").set("two")
 #set first checkbox
 ie.checkbox( :id, "cb2b").clear
 #set radio to first option :id, "r2a").set
 #select first option of multiselect. First we clear all, then select only the first one
 ie.select_list( :id, "ms1").clearSelection
 ie.select_list( :id, "ms1").select("Tennessee")
 #and click de submit button, by text
 ie.span( :text, "Get Values from form!").click
 sleep 1

The last part is the actual test, an assertion of expected text. If it is the expected one, the excecution will continue and the browser will be closed. Otherwise the excecution will be stoped and the error ‘Text not found’ will be shown.

 # check for de json output
 assert( ie.contains_text(
  "{ 'dtText': { }, 'Combo1': 'two', 'cb2': [ '3' ], 'r2': '1', 'ms1': [ 'TN' ], 'bgetval': '' }"),
   'ERROR: Text not found of form #1' )

This should work.

Test in Linux and FF

For firefox the ruby code has a few diferences, check demo_firewatir.rb.

The first lines are for requiring firewatir and the assertion libraries as well as defining the class.

# Demo for testing dojo.toolkit widgets @ Linux & Firefox #includes
require 'rubygems'
require 'firewatir'
require 'test/unit'

class TC_recorded < Test::Unit::TestCase
 def test_webpage

A browser is instantiated and opens the Demo form

 ff =
 #:::::::::login page::::::::::::::::::

The rest of the script is the same as the example above:

 #:::::::::form page::::::::::::::::::
 #date into text field
  ff.text_field( :id, "dtText").set("01/09/2010")
 #select the second option of combobox, tow values: display and option value
  ff.text_field( :id, "Combo1").set("two")
 #set first checkbox
  ff.checkbox( :id, "cb2b").clear
 #set radio to first option :id, "r2a").set
 #select first option of multiselect. First we clear all, then select only the first one
  ff.select_list( :id, "ms1").clearSelection
  ff.select_list( :id, "ms1").select("Tennessee")
 #and click de submit button, by text
  ff.span( :text, "Get Values from form!").click
  sleep 1
 # check for de json output
 assert( ff.contains_text(
   "{ 'dtText': { }, 'Combo1': 'two', 'cb2': [ '3' ], 'r2': '1', 'ms1': [ 'TN' ], 'bgetval': '' }"),
   'ERROR: Text not found of form #1' )

To run this test you can type ruby demo_firewatir.rb

Thats it.

Automatic Web Page Testing

What Is It For

Automatic testing for me, above all, means: ‘peace of mind’. After you do development work or code maintenance of a web page, you easily can verify that things works as expected, which is a wonderfull experience.

I only do functional testing, time constraints prevent me from doing TDD or achieve ample test code coverage. Functional testing means that in a short time I can warranty  the software works as it did before or that the new functionality is acomplished.

What Does This Post Is About

This article describes how to automatically generate user interactions like filling text, number fields, textboxes, selecting values and clicking on elements in MS IE (Microsoft Internet Explorer browser*) and logging in a file the result, confirming that the app complies with expected results or where it fails.

The main focus is on web pages using the dojo toolkit framework 1.5.

* These tools are reported to work with firefox and safari, check watir installation. If You are using linux check this blog. [Edit: or check this for firefox and chrome]

What Do You Need

Follow the install procedures and you’ll get a text editor associated with the extension .rb, a command line interpreter to run your ruby programs and tools to browse your web page objects.

The Ruby Script

First we declare required files

# Aug 2010: Demo for testing dojo.toolkit #includes 
require 'watir'
require 'test/unit'

Now our Ruby program can drive the internet browser and test elements in our web page.

So, we define a test class and open a browser window, bring it to the front and wait for it to be ready. Notice that the browser will be instantiated into a ie named variable

class TC_recorded < Test::Unit::TestCase
 def test_webpage
  ie =

In this example will show how to open a real web page, log in, typing user, password and click en the login button:

  ie.form( :name, "login_userpw").text_field( :name, "form_loginname").set("youruser")
  ie.form( :name, "login_userpw").text_field( :name, "form_pw").set("yourpassword")
  ie.form( :name, "login_userpw").submit

or if you use only unique name identifiers, you could use a shorter notation:

  ie.text_field( :name, "form_loginname").set("youruser")
  ie.text_field( :name, "form_pw").set("yourpassword")

This code will log you into sourceforge. The login form looks something like this:
Login screen
The HTML for that form -cleaned- is something like:

<form action="" method="post" name="login_userpw">
 <div>Enter your account info:</div>
 <div>Username:<input maxlength="15" name="form_loginname" type="text"></div>
  <div>Password:<input maxlength="32" name="form_pw" type="password" /></div>
 <input name="login" type="submit" value="Log in" />

Look at the name attribute and the type of field, you filled the first two and clicked the third with Ruby.

The best way to see the code is to install firefox add-in firebug and use the context menu (right mouse button over the page object) and select inspect element.

We’ll see what happens with the HTML after the dojo.toolkit renders its elements that are called widgets. Our test form looks like this (is a modified version from the file that you downloaded  ./digit/tests/form/Form.html):

Now, to fill this page with the test data we use the code:

 #date into text field
ie.text_field( :name, "").set("28/08/2010")
 #select first option of combobox, tow values: display and option value
ie.text_field( :name, "plop.combo").set("one")
ie.text_field( :hidden, "plop.combo").set("one")
 #set first checkbox
ie.text_field( :id, "c2b").click
 #set radio to first option
ie.text_field( :name, "r2").click
 #select first option of multiselect.
 #first we clear all, then select only the first
ie.select_list( :name, "ms1").clearSelection
ie.select_list( :name, "ms1").select("Tennessee")
#and click de submit button
ie.button( :name, "bgetval").click


  • Fill date field with text ’28/08/2010′ that is day, month, year
  • The combo needs two fields: the original one that you declared on your html and a second one used by dojo as value. This has the same named as your field but is of type hidden.
  • The check box and the radio are referenced as your fields but are of type text in the final rendered page. The event to use is click
  • The last one is a selection and is handled as a normal select_list
  • The button could be triggered by a submit or a click

Now the result should be checked as it could be a full page postback or an ajax panel call. This is the code to test if the result shown is as expected.

  sleep 0.4
  assert(ie.contains_text("text expected"),"ERROR: check test #1, form fill")

So well wait a little and then test for text that should be in the answer. It could be a valid answer or the warning of an error. If the text is found the script continues until the end is reached and a sumary like this one is shown.

Loaded suite test_webpage
Finished in 0.355 seconds.
1 tests, 1 assertions, 0 failures, 0 errors

If not, then the test is halted and the text ERROR… is send to the console output.

Final note: If you want to test a tree widget, you will have to look for the text in each branch and click it. In this example we use the <span> text:

ie.span(:text, "branch option").click

Thats it!. The test of two web pages in a few lines.

Here you can find the Ruby code demo_watir_test_rb.

Batch File
In windows I prefer a file I can start with two clicks, this is the content of that file:

del test_result_web_page.txt
Ruby demo_watir_test.rb > test_result_web_page.txt
PAUSE Check test result on file: test_result_web_page.txt

Watir documentation here
Watir matrix reference for page elements here
Watir HTML reference here
Watir reference or actions here