Categories

Netsparker Web Application Security Scanner

How To Access Forms In WebDriver

In this tutorial, we are going to learn about accessing HTML web forms and its elements such as input box, radio button, checkbox, hyperlink, dropdown box, etc. using Selenium WebDriver API.

 

Input Box:

There are two web elements that fall into this category. They are text box and password box.

Text Box:Text Box in HTML is represented by ‘input’ tag and has type ‘text’as shown below.

[code lang=”js”]
<b>First name:</b>
<input type="text" name="firstname">
[/code]

In the above HTML statement, text box has name as ‘firstname’. We can use Webdriver to access the text box and enter the text into it using the following steps.

Step 1: Firstly, we need to import the ‘By’ class from the WebDriver API using the following import command.

[code lang=”js”]
import org.openqa.selenium.By;
[/code]

Step 2:Secondly, use the ‘findElement’ method of FirefoxDriver object. Use ‘By’ class’s‘name’ method to lookup for web element by name as shown below.

[code lang=”js”]
// Input Box
driver.findElement(By.name("firstname")).sendKeys(" softwaretestingclass");
[/code]

Step 3:Use the ‘sendKeys’ method of ‘WebElement’ class to enter the required text into the selected text box as shown above.

 

Password Box:

Password Box is similar to the Text Box, the only difference is that in case of password box, the entered text is hidden and are visible as dots or asterisk. It is represented by ‘input’ tag and has type ‘password’.

[code lang=”js”]
<b>Password:</b>
<input type="password" name="password">

[/code]

In the above HTML statement, password box has name ‘password’. We can use Webdriver to access the password box and enter the text into it using the following steps.

Step 1: Firstly, we need to import the ‘By’ class from the WebDriver API using the following import command.

[code lang=”js”]
import org.openqa.selenium.By;
[/code]

Step 2: Secondly, use the ‘findElement’ method of FirefoxDriver object. Use ‘By’ class’s ‘name’ method to lookup web element by name as shown below.

[code lang=”js”]
// Password Box
driver.findElement(By.name("password")).sendKeys("testingclass");
[/code]

Step 3: Use the ‘sendKeys’ method of ‘WebElement’ class to enter the required text into the selected text box as shown above.

 

Radio Button:

Radio button as a web element is used to choose a single option out of two or more options. Radio button in HTML is represent by ‘input’ tag that has type as ‘radio’ as shown below.

[code lang=”js”]
<b>Gender:</b>
<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female

[/code]

In the above HTML statement, radio button has name as ‘gender’. We can use Webdriver to access the radio button using the following steps.

Step 1: Firstly, we need to import the ‘By’ class from the WebDriver API using the following import command.

[code lang=”js”]
import org.openqa.selenium.By;
[/code]

Step 2: Secondly, use the ‘findElement’ method of FirefoxDriver object. Use ‘By’ class’s ‘cssSelector’ method to lookup for web element by CSS selector as shown below.

[code lang=”js”]
// Radio Button
driver.findElement(By.cssSelector("input[value=’male’]")).click();
[/code]

Step 3: Use the ‘click’ method of ‘WebElement’ class to click on the radio button with value as ‘male’as shown above.

 

Drop-down Box:

Drop-down web element displays multiple elements in the drop down menu but allows to select only one element. Drop down box in HTML is represented by ‘select’ tag with option tag holding all the elements in the drop down menu that has ‘value’ and caption as shown below.

[code lang=”js”]
<b>Vehicle Type:</b>
<select name="vehicle">
<option value="Car">Car</option>
<option value="Bike">Bike</option>
<option value="Van">Van</option>
<option value="Truck">Truck</option>
</select>

[/code]

We can use Webdriver to access an element from the drop down menu using the following steps.

Step 1: Firstly, we need to import the ‘Select’ and ‘By’ classes from the WebDriver API using the following import command.

[code lang=”js”]
import org.openqa.selenium.By;
import org.openqa.selenium.support.ui.Select;
[/code]

Step 2: Secondly, use the ‘findElement’ method of FirefoxDriver object. Use ‘By’ class’s ‘name’ method to lookup for web element by name. Next create the ‘Select’ object after passing the WebElement object obtained before as shown below.

[code lang=”js”]
// Drop-down Box
Select dropDown = new Select(driver.findElement(By.name("vehicle")));
dropDown.selectByVisibleText("Truck");
[/code]

Step 3: Use the ‘selectByVisibleText’ method of select object created in previous step to select a single element (here ‘Truck’) from the dropdown menu as shown above.

 

Selecting Items in a Multiple SELECT element:

Multiple Select web element is like dropdown menu, the only difference is that it allows to select more than one element from the available list of elements. It is represented by ‘select’ tag with option tag holding all the elements in the drop down menu that has ‘value’ and caption as shown below. We can use ‘multiple’ attribute to display the required number of elements in the list.

[code lang=”js”]
<b>Profession:</b>
<select multiple=4 name="profession">
<option value="Engineer">Engineer</option>
<option value="Doctor">Doctor</option>
<option value="Lawyer">Lawyer</option>
<option value="Teacher">Teacher</option>
</select>

[/code]

We can use Webdriver to access one or more elements from the multiple select drop down menu using the following steps.

Step 1: Firstly, we need to import the ‘Select’ and ‘By’ classes from the WebDriver API using the following import command.

[code lang=”js”]
import org.openqa.selenium.By;
import org.openqa.selenium.support.ui.Select;
[/code]

Step 2: Secondly, use the ‘findElement’ method of FirefoxDriver object. Use ‘By’ class’s ‘name’ method to lookup web element by name. Next create the ‘Select’ object after passing the WebElement object obtained before as shown below.

[code lang=”js”]
// Selecting Items in a Multiple SELECT element
Select selectItem = new Select(driver.findElement(By.name("profession")));
selectItem.selectByVisibleText("Doctor");
[/code]

Step 3: Use the ‘selectByVisibleText’ method of select object created in previous step to select an element (here ‘Doctor’) from the dropdown menu as shown above.

 

TextArea:

TextArea web element allows to enter multiple lines of text. It is represented by ‘textarea’ tag which have attributes such as ‘name’, ‘rows’ and ‘col’ which define the name of textarea, number of rows and columns to be presented on the web page. HTML statement for textarea is shown below.

[code lang=”js”]
<b>Comments:</b>
<textarea name="comments" row="4" col="100"></textarea>
[/code]

We can use Webdriver to enter multiple line text into textarea using the following steps.

Step 1: Firstly, we need to import the ‘Select’ and ‘By’ classes from the WebDriver API using the following import command.

[code lang=”js”]
import org.openqa.selenium.By;
[/code]

Step 2: Secondly, use the ‘findElement’ method of FirefoxDriver object. Use ‘By’ class’s ‘tagName’ method to lookup web element by tag name as shown below.

[code lang=”js”]
// TextArea
driver.findElement(By.tagName("textarea")).sendKeys("Selenium WebDriver Tutorials");
[/code]

Step 3: Use the ‘sendKeys’ method of ‘WebElement’ class to enter the required multiple lines of text into the text area as shown above.

 

Hyperlink:

Hyperlink is a web element that redirects to a new web page URL as defined in the ‘href’ attribute of the tag ‘a’which represents a hyperlink in HTML as shown below.

[code lang=”js”]
<a href="http://www.softwaretestingclass.com">Visit our Selenium tutorial</a>

[/code]

We can use Webdriver to click on a hyperlink using the following steps.

Step 1: Firstly, we need to import the ‘Select’ and ‘By’ classes from the WebDriver API using the following import command.

[code lang=”js”]
import org.openqa.selenium.By;
[/code]

Step 2: Secondly, use the ‘findElement’ method of FirefoxDriver object. Use ‘By’ class’s ‘linkText’ method to lookup for web element by link text as shown below.

[code lang=”js”]
// Links
driver.findElement(By.linkText("Visit our Selenium tutorial")).click();
[/code]

Step 3: Use the ‘click’ method of ‘WebElement’ class to click on the hyperlink “Visit our Selenium tutorial”as shown above.

 

Submit Button:

Submit button in HTML is used to submit the action form with the current form elements values to a new URL using GET or POST method. It is represent by following HTML statement.

[code lang=”js”]
<input type="submit" name="button" value="Submit">
[/code]

We can use Webdriver to click on submit button using the following steps.

Step 1: Firstly, we need to import the ‘Select’ and ‘By’ classes from the WebDriver API using the following import command.

[code lang=”js”]
import org.openqa.selenium.By;
[/code]

Step 2: Secondly, use the ‘findElement’ method of FirefoxDriver object. Use ‘By’ class’s ‘name’ method to lookup for web element by name as shown below.

[code lang=”js”]
// Submit Button
driver.findElement(By.name("button")).submit();
[/code]

Step 3: Use the ‘click’ method of ‘WebElement’ class to click on the submit button as shown above.

We have discussed number of web elements which we are going to run as a live demo example. Below are the steps.

STEP 1: Create a HTML web page using the code as shown below.

 

HTML Page Under test:

 

[code lang=”js”]
<html>
<head>
<title>
Form elements Demo by Selenium Webdriver
</title>
</head>
<body>

<form>
<b>First name:</b>
<input type="text" name="firstname">
<b>Password:</b>
<input type="password" name="password">

<b>Gender:</b>
<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female

<b>Vehicle Type:</b>
<select name="vehicle">
<option value="Car">Car</option>
<option value="Bike">Bike</option>
<option value="Van">Van</option>
<option value="Truck">Truck</option>
</select>

<b>Profession:</b>
<select multiple=4 name="profession">
<option value="Engineer">Engineer</option>
<option value="Doctor">Doctor</option>
<option value="Lawyer">Lawyer</option>
<option value="Teacher">Teacher</option>
</select>

<b>Comments:</b>
<textarea name="comments" row="4" col="100"></textarea>

<a href="http://www.softwaretestingclass.com">Visit our Selenium tutorial</a>

<input type="submit" name="button" value="Submit">
</form>
</body>
</html>
[/code]

 

STEP 2: Save this HTML file at following system path.

C:/selenium_demo/HTML_Form.html

STEP 3: Test script for above web page using Selenium WebDriver. Given below is the test script that needs to be executed in the similar way as we did in the past chapters of this tutorial.

 

Selenium WebDriver Demo Program:

 

[code lang=”js”]
package seleniumpackage;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.support.ui.Select;

public class SeleniumFormElements {
public static void main(String[] args) {
WebDriver driver = new FirefoxDriver();
String baseWebUrl = "file:///C:/selenium_demo/HTML_Form.html";
driver.get(baseWebUrl);
// Input Box
driver.findElement(By.name("firstname")).sendKeys("softwaretestingclass");
// Password Box
driver.findElement(By.name("password")).sendKeys("testingclass");
// Radio Button
driver.findElement(By.cssSelector("input[value=’male’]")).click();
// Drop-down Box
Select dropDown = new Select(driver.findElement(By.name("vehicle")));
dropDown.selectByVisibleText("Truck");
// Selecting Items in a Multiple SELECT element
Select selectItem = new Select(driver.findElement(By.name("profession")));
selectItem.selectByVisibleText("Doctor");
// TextArea
driver.findElement(By.tagName("textarea")).sendKeys("Selenium WebDriver Tutorials");
// Submit Button
driver.findElement(By.name("button")).submit();
// Links
driver.findElement(By.linkText("Visit our Selenium tutorial")).click();
/*closing Firefox Browser*/
driver.close();/*Exiting the System*/System.exit(0);
}
}
[/code]

 

STEP 4: Once we execute above program, we can see the test output as shown below.

 

Test Output:

Sample html form to do your practice on: How To Access Forms In WebDriver

Note: Form is not functional working

How To Access Forms In WebDriver

Conclusion:

In this tutorial, we have learnt to access various web elements for testing using WebDriver API. Many more to come in the selenium tutorial series stay tuned.

You can add any specific topic you want STC to cover on Selenium then please do share in the comments below. We will definitely publish the requested content after the tutorial will done.

 


If you really liked

⇓ Subscribe Us 


Sign up for our free email newsletter!! Sign up just providing your email address below:

Enter your email address:

Check email in your inbox for confirmation to get latest updates Software Testing for free.

Happy Testing!!!


1 comment to How To Access Forms In WebDriver

  • Chaitanya

    I am fresher in testing field.
    Could you please share me how to identify the object using firebug.

    One of the thor tutorial you mention record secretly using Selenium IDE and covert into webdriver, pls point me the article.

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>