Selecting item from mat-select drop down list


#1

How can i select ui elements from mat-select drop down list? I want to select an item that is not visible i the first set of items of the list. it is required to scroll to the item and click on it


#2

Hi @Ujwala,

it would help us tremendously if you could share a sample website. This way we can certainly help you in a better way than second guessing what potential issues might appear.


#5


There are many options like this…i need to select, sat last option, which is not visible on the drop down list when opened.


#6

sry for being unclear, what I meant was a online hosted site that shows that behavior? From the minimal html snippet we can’t really tell what the point is that you’d want to achieve.

E.g here is the official documentation of angular material - seeing _ngcontent I guess thats what your target site uses - and shows a few examples https://material.angular.io/components/select/overview.
Can you reproduce your issue here? If so please describe in steps what you’d like to achieve. If we can make it this way, we can come up with a sample code that should achieve what you’re looking for.


#7

I just went ahead and created a sample for the favorite food example (the first select box)

// testfile.java
@Test
    public void SampleTestCase() {
        WebDriver driver = getDriver();
        Sample sample = new Sample(driver);
        sample.open("https://material.angular.io/components/select/overview");
        
        sample.SelectTacos();
        String selectedFood = sample.GetFavoriteFood();

        Assert.assertEquals(selectedFood, "Tacos");
    }

// Sample.java --> The PO
// Ranorex Webtestit Page Object File

package uitest.pageobjects;

import java.util.List;

import org.openqa.selenium.*;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.support.ui.*;

public class Sample {
    // Additional data: {"img":"screenshots/e960d09c-16ad-211d-ba8c-a95d86b987e0.png"}
    private By favoriteFood = By.cssSelector("[class='mat-select ng-tns-c153-4 ng-tns-c150-3 mat-select-empty ng-star-inserted']");
    // Additional data: {"img":"screenshots/3391a68a-ecf3-2a84-fa51-4a647beda92e.png"}
    private By tacos = By.cssSelector("mat-option:nth-of-type(3) > .mat-option-text");
    // Additional data: {"img":"screenshots/d6e2a86e-ceae-0270-0868-c70521b000a7.png"}
    private By selectedFood = By.cssSelector("[class='ng-tns-c153-4 ng-star-inserted']");

    /*
     * NOTE: Use Ranorex Selocity or the Elements Panel to generate element code
     */

    protected WebDriver driver;
    protected WebDriverWait wait;

    public Sample(WebDriver driver) {
        this.driver = driver;
        this.wait = new WebDriverWait(driver, 10);
    }

    public Sample open(String url) {
        this.driver.get(url);

        return this;
    }

    public String getTitle() {
        return this.driver.getTitle();
    }

    /*
     * NOTE: Drag elements from the Elements panel into the code editor to generate
     * methods. Drag elements into existing methods to add steps.
     */

    public Sample SelectTacos() {
        WebElement favoriteFoodElement = this.wait.until(ExpectedConditions.visibilityOfElementLocated(this.favoriteFood));
        
        ((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView()", favoriteFoodElement);
        this.wait.until(ExpectedConditions.visibilityOfElementLocated(this.favoriteFood)).click();
        this.wait.until(ExpectedConditions.visibilityOfElementLocated(this.tacos)).click();
    
        
        return this;
    }
    
    public String GetFavoriteFood() {
        String selectedFoodText = this.wait.until(ExpectedConditions.visibilityOfElementLocated(this.selectedFood)).getText();
        
        return selectedFoodText;
    }
    
}

It first scrolls to the element, then opens the dropdown and selects the third entry (Tacos). Afterwards we evaluate the selected text of the control