Post#51.Handling Dropdown Part-2 (Multi Value Dropdown)

Multi Value Dropdown

20% of the dropdowns are multiple select dropdowns, there are cases where applications have to let user to choose multiple values from dropdowns like menu in restaurent, menu in fruit selection etc...

We can use all the methods present in the Select class to mess with multiple value dropdowns

Steps to select Multiple options in multi select dropdown:

1. select any option on the multi-select dropdown if you want to select only one option
2. If you want to select more options, press CTRL key on your keyboard and select options.
3. If you want to select x position to y position option, click x option and press Shift key and click y options, all the option between x and y will be selected.

Copy and Save the below code as multiDropdown.html

<select name="cars" multiple>

  <option value="volvo">Volvo</option>

  <option value="saab">Saab</option>

  <option value="opel">Opel</option>

  <option value="audi">Audi</option>

</select>

The drop down will look as  below.

selectByIndex() on Multi value dropdown

Select options which are at index 0 and index 3 using selectByIndex();, this is how we can select multiple values in dropdown using selenium webdriver
If you try to select an index which is not present selenium webdriver throws NoSuchElementException

package pack4;

import java.util.concurrent.TimeUnit;

import org.openqa.selenium.By;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.WebElement;

import org.openqa.selenium.chrome.ChromeDriver;

import org.openqa.selenium.support.ui.Select;

import io.github.bonigarcia.wdm.WebDriverManager;

public class SingleDrodown {

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

                        // set the geckodriver.exe property

                        WebDriverManager.chromedriver().setup();

                        System.setProperty("webdriver.gecko.driver", "C:/path/geckodriver.exe");

                        // open firefox

                        WebDriver driver = new ChromeDriver();

                        driver.manage().timeouts().implicitlyWait(1, TimeUnit.MINUTES);

                        // open webpage

                        driver.get("file:///C:/Users/Sujoy/Desktop/multiDropdown.html");

                        // find the dropdown using xpath

                        WebElement dropdownElement = driver.findElement(By.xpath("//select[@name='cars']"));

                        // create object for Select class

                        Select dropdown = new Select(dropdownElement);

                        // select 1st  and 4th option from the dropdown options

                        dropdown.selectByIndex(0);

                        dropdown.selectByIndex(3);

                        Thread.sleep(10000);

            }

}

Output:

selectByValue() on Multi value dropdown

//open webpage

driver.get("file:///C:/Users/Sujoy/Desktop/multiDropdown.html");

//find the dropdown using xpath

WebElement dropdownElement = driver.findElement(By.xpath("//select[@name='cars']"));

//create object for Select class

Select dropdown = new Select(dropdownElement);

//select options from the dropdown options which have value as 'donut', 'burger'

dropdown.selectByValue("volvo");

dropdown.selectByValue("audi");

selectByVisibleText() on Multi value dropdown

selectByVisibleText() helps us to select multiple values in dropdown using selenium WebDriver, Let us see example how to select 'volvo' and 'audi' from dropdown using selectByVisibleText().

//open webpage

driver.get("file:///C:/Users/Sujoy/Desktop/multiDropdown.html");

//find the dropdown using xpath

WebElement dropdownElement = driver.findElement(By.xpath("//select[@name='cars']"));

//create object for Select class

Select dropdown = new Select(dropdownElement);

//select options from the dropdown options which have value as 'donut', 'burger'

dropdown.selectByVisibleText("volvo");

dropdown.selectByVisibleText ("audi");

deselectAll() on Multiple value dropdown

If there is a situation like, few options are selected by default which is not required for your test, and if we want to deselect them deselectALL() is the best option
deselectAll()- removes the selected items from the selection.

//open webpage

driver.get("file:///C:/Users/Sujoy/Desktop/multiDropdown.html");

//find the dropdown using xpath

WebElement dropdownElement = driver.findElement(By.xpath("//select[@name='cars']"));

//create object for Select class

Select dropdown = new Select(dropdownElement);

//select options from the dropdown options which have value as 'donut', 'burger'

dropdown.selectByValue("volvo");

dropdown.selectByValue("audi");

//deselect all the options

dropdown.deselectAll();

Sinilarly you can deselect by index, value and visible text as below.

 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.

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.

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.