Writing test cases for Drop down box in Selenium

Writing test cases for Drop down Box

In this tutorial, we are going to demonstrate writing test cases for Drop down box in Selenium.

This tutorial is chapter 19 of complete Selenium 3.0 Tutorials, being developed by Techcanvass. These tutorials are categorized into Java, Selenium, TestNG, Automation Framework and Grid.

Objective of this tutorial is to demonstrate:

  • How to write test cases for unit testing  of  Drop down boxes?
  • What are key usage scenario for drop down list boxes

Web page used for this tutorial

We are going to use http://techcanvass.com/examples/register.html for this example. This is a simple web page to register early for buying a smartphone to avail heavy discounts.

Register Page

 

Writing test cases for drop down box

WebDriver’s Select class is used to handle the drop down boxes present on a web page.

We create a reference variable for Select class and instantiate it using Select class and the identifier for the drop down box

We can use the XPath strategy for Drop down boxes also. The code for creating an instance of a drop down box using Select class is shown below

Select dropdown1 = new Select(driver.findElement(By.xpath(“.//*[@id=’login’]/form/fieldset/p[3]/select”)));

Please note the long XPATH URL used as locator for the drop down box.

There are three ways to select the desired value in the dropdown box as listed below:

  •   selectByValue()
  •   selectByVisibleText()
  •   selectByIndex()

Case I: select the first operator using “select by value”

The first value in the drop down box is “Mega123 Large Screen”. If you inspect the element, you will find that value for this field is “Mega123” as shown in the image below:

Select by Value

The complete code for selecting this value is:

Select dropdown1= new Select(driver.findElement(By.xpath(“.//*[@id=’login’]/form/fieldset/p[3]/select”)));

 dropdown1.selectByValue(“Mega123m”);

Just replace “Mega123” by the option value, you want to select for your test case.

Case II: Select by using “select by visible text”

This works by comparing the actual text in the drop down list box rather than the value. So to select the value “Serene Pad 64G”, we are going to use the same in the code as well. The code would be as follows:

Select dropdown1= new Select(driver.findElement(By.xpath(“.//*[@id=’login’]/form/fieldset/p[3]/select”)));

dropdown1.selectByVisibleText(“Serene Pad 64G”);

Case III: Select the value in the dropdown using “select by index”

We can also select a value in the drop down using index value. Please note that the index value starts from 0 and not 1. So, to select the 4th value, we need to use an index value as 3.

Select dropdown1 = new Select(driver.findElement(By.xpath(“.//*[@id=’login’]/form/fieldset/p[3]/select”)));

dropdown1.selectByIndex(3);

Above code will select the fourth value in the drop down.

Complete code for selecting the values in a drop down box

The complete code showing all the three methods is shown below. You can replace the package and class name as convenient. Also to see the working of each of the selection method, put the Thread.sleep(10000) at the right place.

package basicSeleniumScripts;
import org.openqa.selenium.By;

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;

public class DropDownListBox {

public static void main(String[] args) throws InterruptedException {

//Define & Initialize Chrome Driver

System.setProperty(“webdriver.chrome.driver”, “E:\\Selenium 3\\chromedriver.exe”);
WebDriver driver;
driver = new ChromeDriver();

//Open the web page

driver.get(“http://techcanvass.com/examples/register.html”);

Select dropdown1 = new Select(driver.findElement(By.xpath(“.//*[@id=’login’]/form/fieldset/p[3]/select”)));
//Select using selectByValue
dropdown1.selectByValue(“Ser64”);

//Select using selectByVisibleText
dropdown1.selectByVisibleText(“Serene Pad 64G”);

//Select using selectByIndex
dropdown1.selectByIndex(3);

Thread.sleep(10000);
driver.quit();

}

}

Finding the selected value in the drop down list box

How can you find the selected value in the drop down list box ?

We have a getFirstSelectedOption() method in selenium for getting the selected value from the drop down list box. This method returns a WebElement object. The code below shows the usage:

WebElement option = dropdown1.getFirstSelectedOption();

We can also print the selected value by using getText() method as shown below:

System.out.println(option.getText()); //prints selected option

Listing down all the option

We can list down all the options or values of the drop down list box by using the following piece of code:

//Listing down all the options
List<WebElement> options = dropdown1.getOptions();
for (WebElement option : options) {
System.out.println(option.getText()); //Prints “Option”, followed by “Not Option”
}

We have covered the most important methods for the usage in the case of a drop down list box. You can explore the other methods.

The next tutorial in this series is on writing the test scripts for list boxes.

About Techcanvass

Techcanvass is a software training organization and offers certification courses in Business Analysis and automation testing. Our courses in selenium are:

Selenium Certification (CP-SAT) Training

Selenium Certification Course

Selenium 3.0 Training with Java

Selenium Training Course

Leave a Reply

Your email address will not be published. Required fields are marked *