How do I find mat-select using selenium webdriver

selenium select angular dropdown
element should have been "select" but was "mat-select" selenium
aria-activedescendant selenium
how to select multiple value in dropdown using selenium webdriver
how to handle div dropdown in selenium webdriver
how to get the selected value of dropdown in selenium webdriver
how to find xpath in angularjs application
how to handle dynamic dropdown in selenium webdriver

I am using selenium web driver to automate an angular website. I couldn't able to 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>

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") 

Unable to locate mat-option selenium, I would suggest that you put this into a function that you can use to set the country dropdown and then pass in the country name you want to select  Select Option from Drop-Down Box. Before we can control drop-down boxes, we must do following two things: Import the package org.openqa.selenium.support.ui.Select. Instantiate the drop-down box as a "Select" object in WebDriver.

I went through the same issue. Try the following snippet.

driver.findElement(By.id("mat-select-0")).click();
driver.findElement(By.xpath("//xpath to the awards text,'Awards')]")).click();

Click on mat-select dropdown inside mat-form-field · Issue #7838 , Bug Report Angular Material Select (mat-select) inside Form Field (mat-form-field​) ignores Selenium click To Reproduce Part of DOM in DevTools webdriver) { // Wait is needed until data is loaded and select is enabled  Some properties are dynamic for few elements. In case, you find that the value is different and is changing dynamically, consider using By.xpath() or By.cssSelector() which are more reliable but complex ways. Sometimes, it could be a wait issue too i.e., the Web driver executed your code even before the page loaded completely, etc.

I have solved the problem like this:

In the component's html code, i have created the id of each of the elements dynamically:

<mat-select [(ngModel)]="idRoom" id="roomSelected" name="roomSelected">
  <mat-option [value]="null">-- Select a room --</mat-option>
  <mat-option *ngFor="let room of rooms; let i = index" [value]="room.id" [id]="'room' + i">
    {{room.identifier}} - {{room.type}}
  </mat-option>
</mat-select>

Then I have created the next method in my class Selenium:

private WebDriver driver;

public TestUtil(WebDriver driver) {
    this.driver = driver;
} 

public void matSelectInput(String id, String value) {
    driver.findElement(By.id(id)).click();
    driver.findElement(By.id(value)).click();
}

Finally, to make the test I add the following call:

@Test
public void addOnSuccess() {
    ...
    testUtil.matSelectInput("roomSelected", "room0");
    ...
}

How to test angularJS search dropdown with Selenium, For selecting a value from dropdown (developed using Angular material) it requires two clicks and often scrolling. In first click, rather than to select CSS selector,  FYI: To use a Select Element, you need to include the Selenium Webdriver Support package which is a different NuGet package than the Selenium WebDriver. I'm using the firefox driver , selenium version 2.53.1 and support library 2.53 , The SelectByText doesnt seem to be working. Im able to see all the options .

How to select checkboxes using selenium java webdriver?, How do you get the selected text of a dropdown in selenium? FindElement command syntax: Find Element command takes in the By object as the parameter and returns an object of type WebElement. By object in turn can be used with various locator strategies such as ID, Name, Class Name, XPATH etc. Below is the syntax of FindElement command in Selenium web driver.

Handling DropDown And Multiple Select Operations in Webdriver, How do I select multiple values from a dropdown in selenium? Selenium webdriver : how to find the element in DOM based on custom attribute. How to identify Elements using text attribute by Selenium Webdriver in TestNG. 0.

Usage of Selenium Select Class for Handling Dropdown Elements , WebDriver Code using Selenium Select Class. Please take a note that, for script creation,  A Scrollbar is a lets you move around screen in horizontal or vertical direction if the current page scroll does not fit the visible area of the screen. It is used to move the window up and down. Selenium Webdriver does not require scroll to perform actions as it manipulates DOM. But in certain web pages, elements only become visible once the

Comments
  • can you try driver.findElement(By.tagName("mat-select")); ?
  • not working error shown as Element should have been "select" but was "mat-select"
  • Please add the relevant HTML.
  • //link_to = driver.findElement(By.id("mat-select-0")); link_to= driver.findElement(By.tagName("mat-select")); Select dropdown = new Select(link_to); dropdown.selectByVisibleText("Awards");
  • I tried this. but error is till there. what about the select dp = new select command here?
  • org.openqa.selenium.support.ui.UnexpectedTagNameException: Element should have been "select" but was "mat-select"
  • We require to see your trial code as Well, Please update your question with HTML code and Your trial code.
  • You are passing locator to <select> tag, which will not work for your case because of <mat-select>. Remove both <select> line, You just need to pass id of <mat-select> and click it. Refer my updated answer.
  • then how can i select the 2nd value from the mat-select?
  • E.g. -: driver.findElement(By.id("mat-select-0")).click(); driver.findElement(By.xpath("//span[@class='mat-option-text' [contains(text(),'Awards')]")).click();