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
	driver.clickElement(btnCustomSelectDown);

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

}
logoblog

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

Previous
« Prev Post

No comments:

Post a Comment

How to send email from current Outlook instance using Java + VBScript

If we are using .Net, we can easily access outlook and send emails using its own libraries. But what if we are using Java? Here we can seek ...