Dropdowns in Selenium

1.Select Class in Selenium WebDriver.
2.Different Select Methods
      i.selectByVisibleText Methods.
      ii.selectByIndex Method.
      iii.selectByValue Method.
3.Different DeSelect Methods.
      i.deselectByIndex Method.
      ii.deselectByValue Method.
      iii.deselectByVisibleText Method.
      iv.deselectAll Method.


The most basic approach for handling these elements is first to locate their element <group>. We’ve labeled it as a <group> because none of the Dropdown and Multiple Select is a singular entity. They do have the same identity which serves to hold more than one element.

You can simply think both of them as containers for holding multiple options. The only difference between the Dropdown and Multiple Select fields is the deselecting statement & the multiple selections which don’t apply to Dropdowns.

Let’s now look at the point by point summary of what we are going to address here.

  1. Select Class in Selenium WebDriver.
  2. Different Select Methods
    1. selectByVisibleText Methods.
    2. selectByIndex Method.
    3. selectByValue Method.
  1. Different DeSelect Methods.
    1. deselectByIndex Method.
    2. deselectByValue Method.
    3. deselectByVisibleText Method.
    4. deselectAll Method.

1- Select Class In Selenium WebDriver:

It is the Webdriver class which provides the implementation of the HTML SELECT tag. It exposes several “Select By” and “Deselect By” type methods. You can apply these methods to manipulate the selection in the DropDown and Multiple Select object. This class is the part of the Selenium’s <org.openqa.selenium.support.ui.Select> package. Apart from its unique capability, the Select class acts normally. You can define it using the <new> keyword following the standard syntax.

Select select = new Select(<WebElement object>);

You must pass the dropdown or multi-select element object as shown in the above code else it’ll cause the compile-time error in Eclipse IDE.

You can get more clarity on using the <Select> class, just look at the below Java code.

WebElement dropdown = driver.findElement(By.id("Browsers"));
Select select = new Select(dropdown);

// alternatively, you can shorten the same code as given below.

Select select = new Select(driver.findElement(By.id("Browsers")));

Note: For your information, the Selenium <Select> class only supports the elements belonging to the HTML’s <select> tags.

Once you got the <Select> object initialized then, you can access all the methods given by the <Select> class. Please refer the below sections for details over the <Select> class methods.

In the below sections, you’ll get to know how to work with DropDown and Multiselect elements. In the Webdriver’s <Select> class, there are many interesting operations available for these fields.

Next, we hope that you are already aware of the characteristics of a DropDown in the HTML code. If yes, then you would easily understand the HTML source code that we’ve provided (Page Link) for every select/deselect method. This Link will present a regular dropdown box on the web page.

Let’s now read about the most used select/deselect methods.

2- Different Select Methods With Sample Dropdown And WebDriver Example.

2.1- SelectByVisibleText Method.

Command Syntax- select.selectByVisibleText(<Text>);
Usage- It selects all options that match the input text in the argument. It won’t consider any index or value, and it’ll only match the visible text in the dropdown field.

Example: Consider the below dropdown box.

 

Sample WebDriver Code Using Select By Visible Text Method.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.support.ui.Select;
public class DropDownExample {
	public static void main(String[] args) throws IOException {
		WebDriver driver;
		driver = new FirefoxDriver();
		driver.get("url");
		WebElement dropdown = driver.findElement(By.name("Browsers"));
		Select select = new Select(dropdown);
		select.selectByVisibleText("FireFox");
	}
}

2.2- SelectByIndex Method.

Command Syntax- select.selectByIndex(Index);
Usage- It performs the selection based on the index value supplied by the user.

Every Dropdown field has an attribute which holds the index values. We specify it as <values>.

Example: You can use the same dropdown box as given in the previous method.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.support.ui.Select;
public class DropDownExample {
	public static void main(String[] args) throws IOException {
		WebDriver driver;
		driver = new FirefoxDriver();
		driver.get("url");
		WebElement dropdown = driver.findElement(By.name("Browsers"));
		Select select = new Select(dropdown);
		select.selectByIndex(4);
	}
}

2.3- SelectByValue Method.

Command Syntax- select.selectByValue(Value);
Usage- It selects the options that satisfy the value supplied by the user in the argument.

Example You can use the same dropdown box as given in the previous method.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.support.ui.Select;
public class DropDownExample {
	public static void main(String[] args) throws IOException {
		WebDriver driver;
		driver = new FirefoxDriver();
		driver.get("url");
		WebElement dropdown = driver.findElement(By.name("Browsers"));
		Select select = new Select(dropdown);
		select.selectByValue("5");
	}
}

It will select “Opera” as its value is 5

3- DeSelect Methods

3.1- DeselectByIndex Method.

Command Syntax: select.deselectByIndex(<Index>);
Usage: Use it when you want to deselect any option via its index. It accepts the index as argument.

Please follow the live example given at the end of this section.

3.2- DeselectByValue Method.

Command Syntax: select.deselectByValue(<Value>);
Usage: Use it when you wish to deselect all options using a value that matches the value in the dropdown options.

Please follow the live example given at the end of this section.

3.3- DeselectByVisibleText Method.

Comand Syntax: select.deselectByVisibleText(<Text>);
Usage: Use it to deselect all options by supplying the input text that matches the text in the dropdown options.

Please follow the live example given at the end of this segment.

3.4- DeselectAll Method.

Command Syntax: select.deselectAll( );
Usage: Use it to turn off all the selected entries at once. But you can use this method if the <Select> tag has <multiple> attribute enabled in the Html. Otherwise, it’ll throw the <NotImplemented> exception. Hence, it’s compulsory to have an attribute like <multiple=”multiple”> while defining the <Select> tag.

Example: Consider the below dropdown box.

WebDriver Code To Handle Dropdown And Multiple Select.

Here is the code to perform actions on the <dropdown and multiple select> elements.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.support.ui.Select;
public class DropDownExample {
	public static void main(String[] args) throws IOException {
		WebDriver driver;
		driver = new FirefoxDriver();
		driver.get("URL");
		WebElement dropdown = driver.findElement(By.name("Browsers"));
		Select select = new Select(dropdown);
		// Here we will perform the multiselect operation in the dropdown.
		select.selectByVisibleText("Chrome");
		select.selectByValue("Safari");
		// Now, two values will get selected in the dropdown.
		// We'll attempt to deselect one of the value.
		// We've added a wait so that you can notice the execution sequence.
		Thread.sleep(3000);
		select.deselectByValue("Safari");
		// We can also try to deselect the value by using the index.
		// But it'll work if the specified index is already selected.
		select.deselectByIndex(1);
		// It'll deselect the visible text value i.e. "Chrome".
		select.deselectByVisibleText("Chrome");
		// Added a pause to make you see the difference.
		Thread.sleep(3000);
		// The below code will deselect all the values which are selected.
		select.deselectAll();
	}
}

Leave a Reply

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