Select Class in Selenium

Methods in Select Class

The following are some commonly used methods provided by the select class:-

isMultiple() method

This method returns a boolean value indicating whether a dropdown is multi-select or not.

Example

The following code selects a dropdown menu, then uses the isMultiple() method on it.
 

const {Builder, Browser, By, Select} = require('selenium-webdriver');
(async function example() {
  let driver = await new Builder().forBrowser(Browser.CHROME).build();
  await driver.get('https://www.selenium.dev/selenium/web/formPage.html')
  const selectElement = await driver.findElement(By.name('selectomatic'))
  const select = new Select(selectElement)
  console.log(await select.isMultiple())
  await driver.quit()
})();

You can also try this code with Online Javascript Compiler

Run Code

Terminal Output

The method returned false because the specified drop-down doesn’t support selecting multiple options to be selected.

selectByValue() method

This method expects a single parameter. It selects an option based on its value attribute.

Example

The following code selects an option by using the selectByValue() method.
 

const {Builder, Browser, By, Select} = require('selenium-webdriver');
(async function example() {
  let driver = await new Builder().forBrowser(Browser.CHROME).build();
  await driver.get('https://www.selenium.dev/selenium/web/formPage.html')
  const selectElement = await driver.findElement(By.name('selectomatic'))
  const select = new Select(selectElement)
  await select.selectByValue('two')
})();

You can also try this code with Online Javascript Compiler

Run Code

Result

Option with value ‘two’ was selected in the outlined dropdown menu.

selectByIndex() method

This method expects a single parameter that indicates the index of the option to be selected from the specified dropdown list.

Example

The following code selects an option by using the selectByValue() method.

const {Builder, Browser, By, Select} = require('selenium-webdriver');
(async function example() {
  let driver = await new Builder().forBrowser(Browser.CHROME).build();
  await driver.get('https://www.selenium.dev/selenium/web/formPage.html')
  const selectElement = await driver.findElement(By.name('selectomatic'))
  const select = new Select(selectElement)
  await select.selectByIndex(3)
  await driver.quit()
})();

You can also try this code with Online Javascript Compiler

Run Code

Result

Option at the third index was selected in the specified drop-down menu.

As you can see from the screenshot above, option at the third index is selected.

selectByVisibleText() method

This method expects a single parameter, it selects an option based on its innerHTML value.

Example

The following code selects an option by using the selectByValue() method.
 

const {Builder, Browser, By, Select} = require('selenium-webdriver');
(async function example() {
  let driver = await new Builder().forBrowser(Browser.CHROME).build();
  await driver.get('https://www.selenium.dev/selenium/web/formPage.html')
  const selectElement = await driver.findElement(By.name('selectomatic'))
  const select = new Select(selectElement)
  await select.selectByVisibleText('Four')
  await driver.quit()
})();

You can also try this code with Online Javascript Compiler

Run Code

Result

Option at the inner HTML value ‘Four’ was selected in the selected menu.

getOptions() method

This method returns a list of web elements containing all the options of the specified dropdown.

Example

The following code uses the getOptions() method to find the number of options in the specified dropdown list.

const {Builder, Browser, By, Select} = require('selenium-webdriver');
(async function example() {
  let driver = await new Builder().forBrowser(Browser.CHROME).build();
  await driver.get('https://www.selenium.dev/selenium/web/formPage.html')
  const selectElement = await driver.findElement(By.name('selectomatic'))
  const select = new Select(selectElement)
  console.log((await select.getOptions()).length)
  await driver.quit()
})();

You can also try this code with Online Javascript Compiler

Run Code

Terminal Output

The specified drop-down menu contains 4 options thus the array returned from getOptions() method contains 4 web elements.

Limitations of the Select Class

The select class in selenium has the following limitations:-

• It is only compatible with the <select> tag in HTML. Custom dropdowns cannot be tested with this class.
   
• Due to dynamic loading, the class cannot be used for interacting with dropdowns that are not visible due to the hidden attribute or not loaded in the DOM.
   
• The class does not provide Keyboard interactions with dropdowns, even though it can be done using other utility classes.
   
• It doesn’t have support for testing complex interactions such as custom filtering or searching.
   
• If non-standard elements such as <div> or <li> are used for dropdown options, the class may work incorrectly or fail to interact with those options.

Check this out : Xpath in Selenium

Frequently Asked Questions

What is XPath in Selenium?

XPath or XML path language is used for locating elements in an HTML page based on the hierarchical relationships between nodes in the DOM tree. In Selenium, you can use the XPath to select web elements.

How to select multiple options using the Select Class?

If a dropdown list supports multiple selections, you can simply select different options one at a time. Select class doesn’t directly support choosing multiple options at the same time.

Is there an alternative for interacting with dropdowns in Selenium?

You can use the findElement() method and action class methods such as click() and navigate to interact directly with dropdowns. These techniques can be used as a workaround for interacting with custom dropdown menus.

Conclusion

The select class in Selenium provides a simple way for handling dropdowns in web application testing. It provided various methods such as getOptions(), selectByIndex(), isMultiple(), etc., for interacting with single and multi-select dropdown lists that are implemented specifically using the <select> tag in HTML.

In this article, you learned about the select class in Selenium and its methods with the help of some examples.

Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Enroll in our courses and refer to the mock test and problems available. Take a look at the interview experiences and interview bundle for placement preparations.

Happy Learning!