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

Here is the list of common file field attributes

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"/>

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


Get number of file fields in the page


File field iterator

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

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|


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

Goto the nth file field on the page


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.

1 comment: