Forms are the fundamental web elements to receive information from the website visitors. Web forms have different GUI elements like Text boxes, Password fields, Checkboxes, Radio buttons, dropdowns, file inputs, etc.
We will see how to access these different form elements using Selenium Web Driver with Java. Selenium encapsulates every form element as an object of WebElement. It provides API to find the elements and take action on them like entering text into text boxes, clicking the buttons, etc. We will see the methods that are available to access each form element.
In this tutorial, we will see how to identify the following form elements
- Introduction to WebElement, findElement(), findElements()
- Input Box
- Entering Values in Input Boxes
- Deleting Values in Input Boxes
- Submit Buttons
- Radio Button
- Check Box
- Complete Code
Selenium Web Driver encapsulates a simple form element as an object of WebElement.
There are various techniques by which the WebDriver identifies the form elements based on the different properties of the Web elements like ID, Name, Class, XPath, Tagname, CSS Selectors, link Text, etc.
Web Driver provides the following two methods to find the elements.
- findElement() – finds a single web element and returns as a WebElement object.
- findElements() – returns a list of WebElement objects matching the locator criteria.
Let's see the code snippets to get a single element – Text Field in a web page as an object of WebElement using findElement() method. We shall cover the findElements() method of finding multiple elements in subsequent tutorials.
Step 1: We need to import this package to create objects of Web Elements
Step 2: We need to call the findElement() method available on the WebDriver class and get an object of WebElement.
Refer below to see how it is done.
Input boxes refer to either of these two types:
- Text Fields- text boxes that accept typed values and show them as they are.
- 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.
The method findElement() takes one parameter which is a locator to the element. Different locators like By.id(), By.name(), By.xpath(), By.CSSSelector() etc. locate the elements in the page using their properties like`````` id, name or path, etc.
You can use plugins like Fire path to get help with getting the id, xpath, etc. of the elements.
Using the example site http://demo.guru99.com/test/login.html given below is the code to locate the "Email address" text field using the id locator and the "Password "field using the name locator.
- Email text field is located by Id
- Password field is located by name
To enter text into the Text Fields and Password Fields, sendKeys() is the method available on the WebElement.
Using the same example of http://demo.guru99.com/test/login.html site, here is how we find the Text field and Password fields and enter values into them.
- Find the "Email Address" Text field using the id locator.
- Find the "Password" field using the name locator
- Enter text into the "Email Address" using the sendKeys() method.
- Enter a password into the "Password" field using the sendKeys() method.
The clear() method is used to delete the text in an input box. This method does not need a parameter. The code snippet below will clear out the text from the Email or Password fields
The buttons can be accessed using the click() method.
In the example above
- Find the button to Sign in
- Click on the "Sign-in" Button in the login page of the site to login to the site.
Submit buttons are used to submit the entire form to the server. We can either use the click () method on the web element like a normal button as we have done above or use the submit () method on any web element in the form or 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.
Radio Buttons too can be toggled on by using the click() method.
Using http://demo.guru99.com/test/radio.html for practise, see that radio1.click() toggles on the "Option1" radio button. radio2.click() toggles on the "Option2" radio button leaving the "Option1" unselected.
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.
isSelected() method is used to know whether the Checkbox is toggled on or off.
Here is another example: http://demo.guru99.com/test/radio.html
Here is the complete working code
If you encounter NoSuchElementException() while finding elements, it means that the element is not found in the page at the point the Web driver accessed the page.
- Check your locator again using Firepath or Inspect Element in Chrome.
- Check whether the value you used in the code is different from the one for the element in Firepath now.
- Some properties are dynamic for few elements. In case, you find that the value is different and is changing dynamically, consider using By.xpath() or By.cssSelector() which are more reliable but complex ways.
- Sometimes, it could be a wait issue too i.e., the Web driver executed your code even before the page loaded completely, etc.
- Add a wait before findElement() using implicit or explicit waits.
- The table below summarizes the commands to access each type of element discussed above
|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.|
- WebDriver allows selection of more than one option in a multiple SELECT element.
- 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.