Fix 'Element should have been select but was mat-select' error while Angular application automation using selenium

 The controls of angular applications are a bit different, so it may cause some issues if we try to automate the application using selenium.

One such issue is while automating a select dropdown. In Angular applications, we can see mat-Select instead of Select.

Here the normal SelectElement action selenium will not work and an exception will be shown as below.

 'Element should have been select but was mat-select' 

An easy workaround for this issue is by using the normal click element in selenium. First, we need to click on the mat-select element and when the dropdown opens, we can click on the mat-option using the text.

Make sure the XPath of mat-option is relative to the parent mat-select to avoid clicking the wrong control.

A sample method to implement is given below.

public void matOptionSelect(string elementIdentifier, string selectText)
{
    driver.FindElement(By.XPath(elementIdentifier).Click();
    driver.FindElement(By.XPath("//mat-option/span[text()='"+ selectText + "']/..").Click();

}