Select item in angular selectbox using selenium

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...



Read more here: https://stackoverflow.com/questions/67003867/select-item-in-angular-selectbox-using-selenium

Content Attribution

This content was originally published by MrApnea at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: