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

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.

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);
	}

}