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.

1 comment: