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

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

<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 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.