angularselenium-webdriverautomated-tests

How do I find mat-select using selenium webdriver?


I am using selenium web driver to automate an angular website. I couldn't use select commands because the error shown as Element should have been "select" but was "mat-select" enter image description here

enter image description here

<div class="mat-input-infix mat-form-field-infix"> <mat-select _ngcontent-c2="" class="mat-select ng-tns-c6-1 ng-pristine ng-valid ng-touched" role="listbox" ng-reflect-is-disabled="false" ng-reflect-model="award" ng-reflect-disabled="false" id="mat-select-0" tabindex="0" aria-required="false" aria-disabled="false" aria-invalid="false" aria-owns="mat-option-1 mat-option-2" aria-multiselectable="false"><div class="mat-select-trigger" aria-hidden="true" cdk-overlay-origin=""><div class="mat-select-value"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span class="mat-select-value-text ng-tns-c6-1" ng-reflect-ng-switch="false"><!----><span class="ng-tns-c6-1">Award</span><!--bindings={
  "ng-reflect-ng-switch-case": "true"
}--></span></div><div class="mat-select-arrow-wrapper"><div class="mat-select-arrow"></div></div></div><!--bindings={
  "ng-reflect-_deprecated-origin": "[object Object]",
  "ng-reflect-_deprecated-positions": "[object Object],[object Object",
  "ng-reflect-_deprecated-offset-y": "-15",
  "ng-reflect-_deprecated-min-width": "206",
  "ng-reflect-_deprecated-backdrop-class": "cdk-overlay-transparent-backdr",
  "ng-reflect-_deprecated-scroll-strategy": "[object Object]",
  "ng-reflect-_deprecated-open": "false",
  "ng-reflect-_deprecated-has-backdrop": ""
}--></mat-select> <span class="mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper"><!--bindings={
  "ng-reflect-ng-if": "false"
}--></span></div>
<span class="mat-option-text">Institute Proposal</span>

Solution

  • As its not containing the <select> tag, You need to manually select it.

    You can select it with:

    Id: By.id("mat-select-0")

    OR

    Xpath: //mat-select[@ng-reflect-model="award"] OR //mat-select[@id="mat-select-0"]

    For your case :

    driver.findElement(By.id("mat-select-0")).click();

    Updated last 3 lines:

    //add click() method
    driver.findElement(By.id("mat-select-0"));
    //Remove below 2 lines
    Select dropdown = new Select(link_to);
    dropdown.selectByVisibleText("Awards")