[Fixed] Select item in angular selectbox using selenium

Issue

I am trying to make a selection in a dropdown using selenium.
The selectbox is not a html type of ‘select’ but is using angular so it is a ‘mat-select’ html-tag.

I simplified my code to get this to work but could not get it to work, this is my code right now:

var q = driver.FindElement(By.TagName("mat-select"));
new SelectElement(q).SelectByText("My List Value");

When I run this code I get:

Element should have been select but was mat-select

How do I solve this? I tried using SendKeys but since "My List Value" has spaces, the space triggers the selectbox to open or close and it won’t select the correct value. Then I read about SelectByText but that seems to require a normal ” but I only have a ”.

Here is the html of the select:

<div class="mat-form-field-infix">
    <mat-select _ngcontent-qpv-c46="" class="mat-select ng-tns-c12-118 ng-pristine ng-valid mat-select-empty ng-star-inserted ng-touched" role="listbox" id="mat-select-5" tabindex="0" aria-labelledby="mat-form-field-label-41" aria-required="false" aria-disabled="false" aria-invalid="false" aria-multiselectable="false">
        <div class="mat-select-trigger" aria-hidden="true" cdk-overlay-origin="">
            <div class="mat-select-value">
                <!---->
                <span class="mat-select-placeholder ng-tns-c12-118 ng-star-inserted">&nbsp;</span>
                <!---->
            </div>
            <div class="mat-select-arrow-wrapper">
                <div class="mat-select-arrow"></div>
            </div>
        </div>
        <!---->
    </mat-select>
    <span class="mat-form-field-label-wrapper">
        <!---->
        <label class="mat-form-field-label ng-tns-c24-117 mat-empty mat-form-field-empty ng-star-inserted" id="mat-form-field-label-41" for="mat-select-5" aria-owns="mat-select-5">
            <!----><!---->
            <mat-label _ngcontent-qpv-c46="" class="ng-star-inserted">Properties</mat-label>
            <!----><!---->
        </label>
    </span>
</div>

All the options are missing in the html? I know c# but not angular so this looks a bit funny to me. Have not tried to click because I don’t know how to find them when I can’t even see them myself.

When I click on the select all items appear in some magical angular way…

Solution

Selenium doesn’t provide methods for interacting with mat-select. You need to write a custom program for Selenium to interact with a mat-select.

Here is an example of how to select a mat-select option with Selenium using C#:

IWebElement field = driver.FindElement(By.cssSelector('mat-select'));

// Click to open the dropdown.
field.Click();

// Query for options in the DOM. These exist outside of the mat-select component.
IReadOnlyList<WebElement> options = driver.FindElements(By.cssSelector("mat-option"));

// Find the option with the text that matches the one you are looking for.
options.First(element => element.GetText() == "My List Value")
     // Click it to select it.
    .Click();

You will probably want to wrap this up in a re-usable method of some sort.