unable to select drop down value

Question

I am trying to select value from a drop down, but getting an error Element should have been "select" but was "mat-select". I am testing angularjs application and i am able to select drop down successfully..but i ger error when i try to select value inside the dropdown list.

Following is the method which i have used to select the element from the drop-down list:

public void clickandselectstoregroup(){
        WebElement storegroupIDdropdown = WebDriverUtils.getWebDriver().findElement(By.id(matselectStoreGroup));
        Select se = new Select(storegroupIDdropdown);
        se.selectByIndex(1);

    }

Error log:

org.openqa.selenium.support.ui.UnexpectedTagNameException: Element should have been "select" but was "mat-select"
Build info: version: '3.8.1', revision: '6e95a6684b', time: '2017-12-01T19:05:14.666Z'
System info: host: '', ip: '127.0.0.1', os.name: 'Windows 7', os.arch: 'amd64', os.version: '6.1', java.version: '1.8.0_131'
Driver info: driver.version: unknown
    at org.openqa.selenium.support.ui.Select.<init>(Select.java:47)
    at com.morrisons.automation.pageobjects.sma.SchedulePageObject.clickandselectstoregroup(SchedulePageObject.java:225)
    at com.morrisons.automation.stepdefs.sma.NewScheduleStepDef.i_select_storegroup_dropdown_and_select_dropdown_value(NewScheduleStepDef.java:98)
    at ?.And I select storegroup dropdown and select dropdown value(C:/AutomationNeon1/atom/src/main/features/smascheduler/new-schedule.feature:22)

Answer 1

Looks like AngularJS doesn't have select element. It has something another, and WebDriver can't use your web element, like Select.

I haven't tested AngularJS.

However, I can suggest a solution, in this case, to use just native clicks there. You need to click on replacing select functionality:

• first for opening drop down list
• second, for selecting correct list element.

Code snippet should be something like:

DriverUtils.getWaiter().until(ExpectedConditions.elementToBeClickable(By.id("vchannel_combobox"))).click();
DriverUtils.getWaiter().until(ExpectedConditions.elementToBeClickable(By.xpath(
  String.format("//Rectangle[@id='vchannel_drop_down']/ListView/Item/Item[%d]", RandomUtils.nextInt(1, 4))))
).click();

At example below you can see exactly two appropriate actions. In that case, doesn't matter which element will be selected.
For selecting the correct element from list Xpath locator was used.

Answer 2

The error says it all :

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

It is pretty clear the WebElement storegroupIDdropdown which have been identified as :

WebDriverUtils.getWebDriver().findElement(By.id(matselectStoreGroup));

This WebElement isn't defined within any <select>.....</select> tag. Rather it is defined within an <mat-select>.....</mat-select> tag.

Hence, moving ahead when you try to invoke selectByIndex(n) method (which can be invoked by Select type objects only) the current object is unable to invoke the method. Hence you see the error.

Solution :

If you have a closer look at the HTML DOM you would either find a <select>.....</select> tag or a <ul>..<li>...</li>..</ul> tag which controls the DropDown . You need to identify those and work with them.