March 18, 2021

How to create a selenium custom select method for a multiselect dropdown in Angular application

  March 18, 2021

If our application is of type angular, the normal selenium SelectElement class may not work. Especially if the select dropdown allows multi-select.

Normal Scenario:

SelectElement selectElm = new SelectElement(tempSelectElement);

In angular scenario we may need to do some more action to select an element by using clicks, looping, split and send keys.

The steps we need to do will be 

  • Click on the down arrow in select dropdown
  • Get the list of all select options inside the dropdown by getting child items
  • Pass the needed item as a parameter and click on the needed item
  • Repeat this for all items if the dropdown allows multi-select
  • Use a delimiter to split the parameter to get all the options to select
  • If there is any label provided for the dropdown, provide that as a parameter.
UI of the Dropdown we used a sample is given below.

A sample custom code is given below, here we are passing the dropdown label as one parameter and options to select as another parameter.
These parameters will be used to dynamically create the XPath of elements we may need to deal with.

Note: Minor changed maybe needed in Xpath if the UI of the dropdown different

/// <summary>
/// Method to select mutliple option in a custom select dropdown
/// </summary>
/// <param name="selectLabel">Label of the select dropdown</param>
/// <param name="selectValue">Values to select seperated by '#'</param>
public void customMultiSelect(string selectLabel, string selectValue)
	string btnCustomSelectDown = "xpath=//label[contains(text(),'"+ selectLabel + "')]/..//div[@class='multiselect__select']";
	//Use your custom click

	foreach(string selItem in selectValue.Split('#'))
		string itmSelectText = "xpath=//label[contains(text(),'" + selectLabel + "')]/..//li//span[text()='" + selItem + "']";
		//Use your custom click


Thanks for reading How to create a selenium custom select method for a multiselect dropdown in Angular application

« Prev Post

No comments:

Post a Comment

Fixing javascript error: Cannot read properties of null (reading 'querySelector') issue when using CSS identifier in selenium

 JavaScript is another way to interact with web elements when normal selenium methods fail to act. But one issue with javascript is, it does...