22. Accessing Form Elements - Overview

Accessing Form Elements

Input Box

Input boxes refer to either of these two types:

1.      Text Fields- text boxes that accept typed values and show them as they are.

2.      Password Fields- text boxes that accept typed values but mask them as a series of special characters (commonly dots and asterisks) to avoid sensitive values to be displayed.

Entering Values in Input Boxes

The sendKeys() method is used to enter values into input boxes.

Deleting Values in Input Boxes

The clear() method is used to delete the text in an input box. This method does not need any parameter. The code snippet below will clear out the text "tutorial" in the User Name text box.

Radio Button

Toggling a radio button on is done using the click() method.

Check Box

Toggling a check box on/off is also done using the click() method.

The code below will click on Facebook's "Keep me logged in" check box twice and then output the result as TRUE when it is toggled on, and FALSE if it is toggled off.

Links

Links also are accessed by using the click() method.

Consider the below link found in Mercury Tours' homepage.

You can access this link using linkText() or partialLinkText() together with click(). Either of the two lines below will be able to access the "Register here" link shown above.

Drop-Down Box

Before we can control drop-down boxes, we must do following two things :

1.      Import the package org.openqa.selenium.support.ui.Select

2.      Instantiate the drop-down box as a "Select" object in WebDriver

As an example, go to Mercury Tours' Registration page (http://newtours.demoaut.com/mercuryregister.php) and notice the "Country" drop-down box there.  

Step 1

Import the "Select" package.

Step 2

Declare the drop-down element as an instance of the Select class. In the example below, we named this instance as "drpCountry".

Step 3

We can now start controlling "drpCountry" by using any of the available Select methods. The sample code below will select the option "ANTARCTICA".

Selecting Items in a Multiple SELECT element

We can also use the selectByVisibleText() method in selecting multiple options in a multi SELECT element. As an example, we will take http://jsbin.com/osebed/2 as the base URL. It contains a drop-down box that allows multiple selections at a time.

The code below will select the first two options using the selectByVisibleText() method.

Select Methods

The following are the most common methods used on drop-down elements.

Method	Description
selectByVisibleText() and deselectByVisibleText() Example:	·         Selects/deselects the option that displays the text matching the parameter. ·         Parameter: The exactly displayed text of a particular option
selectByValue() and deselectByValue() Example:	·         Selects/deselects the option whose "value" attribute matches the specified parameter. ·         Parameter: value of the "value" attribute ·         Remember that not all drop-down options have the same text and "value", like in the example below.
selectByIndex() and deselectByIndex() Example:	·         Selects/deselects the option at the given index. ·         Parameter: the index of the option to be selected.
isMultiple() Example:	·         Returns TRUE if the drop-down element allows multiple selections at a time; FALSE if otherwise. ·         Needs parameters needed
deselectAll() Example:	·         Clears all selected entries. This is only valid when the drop-down element supports multiple selections. ·         No parameters needed

Submitting a Form

The submit() method is used to submit a form. This is an alternative to clicking the form's submit button.

 You can use submit() on any element within the form, not just on the submit button itself.

When submit() is used, WebDriver will look up the DOM to know which form the element belongs to, and then trigger its submit function.

Summary

·         The table below summarizes the commands to access each type of element discussed above.

Element	Command	Description
Input Box	sendKeys()	used to enter values onto text boxes
	clear()	used to clear text boxes of its current value
Check Box, Radio Button,	click()	used to toggle the element on/off
Links	click()	used to click on the link and wait for page load to complete before proceeding to the next command.
Drop-Down Box	selectByVisibleText()/ deselectByVisibleText()	selects/deselects an option by its displayed text
	selectByValue()/ deselectByValue()	selects/deselects an option by the value of its "value" attribute
	selectByIndex()/ deselectByIndex()	selects/deselects an option by its index
	isMultiple()	returns TRUE if the drop-down element allows multiple selection at a time; FALSE if otherwise
	deselectAll()	deselects all previously selected options
Submit Button	submit()

·         WebDriver allows selection of more than one option in a multiple SELECT element.

·         To control drop-down boxes, you must first import the org.openqa.selenium.support.ui.Select package and then create a Select instance.

·         You can use the submit() method on any element within the form. WebDriver will automatically trigger the submit function of the form where that element belongs to.