Element is not clicked even after explicit wait

Question

I am trying to verify default selected value of a dropdown.

<div class="p-3 p-md-4 mt-4 mt-md-4 card"><div class="row"><div class="d-flex align-items-center col-md-6"><img class="jss2475" src="https://dialog-qa-bucket.s3.ap-southeast-1.amazonaws.com/2021-06/icon-mobile-connected.svg" alt="connection type icon"><h6 class="MuiTypography-root-1545 ml-2 ml-md-3 jss1543 jss2487 MuiTypography-h6-1555">761234567</h6></div><div class="pt-3 pt-md-0 col-md-6"><div class="MuiFormControl-root-2541 MuiFormControl-fullWidth-2544" id="i6a664" paperwidth="377.5"><label class="MuiFormLabel-root-2553 MuiFormLabel-colorSecondary-2554 MuiInputLabel-root-2545 jss2534 MuiInputLabel-formControl-2547 MuiInputLabel-animated-2550 MuiInputLabel-shrink-2549 MuiInputLabel-outlined-2552 MuiFormLabel-filled-2555" data-shrink="true" for="filled-age-native-simple"></label><div class="MuiInputBase-root-2579 MuiOutlinedInput-root-2567 jss2535 MuiInputBase-colorSecondary-2585 MuiOutlinedInput-colorSecondary-2568 MuiInputBase-formControl-2580" inputprops="[object Object]"><div class="MuiSelect-root-2557 MuiSelect-select-2558 MuiSelect-selectMenu-2561 MuiSelect-outlined-2560 MuiInputBase-input-2587 MuiOutlinedInput-input-2574" tabindex="0" role="button" aria-haspopup="listbox">Transaction History</div><input aria-hidden="true" tabindex="-1" class="MuiSelect-nativeInput-2566" value="0"><svg class="MuiSvgIcon-root-1630 MuiSelect-icon-2562 MuiSelect-iconOutlined-2565" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10l5 5 5-5z"></path></svg><fieldset aria-hidden="true" class="jss2598 MuiOutlinedInput-notchedOutline-2573 jss2537" style="padding-left: 8px;"><legend class="jss2599" style="width: 0.01px;"><span>​</span></legend></fieldset></div></div></div></div></div>

Below is the script.

public TransactionHistoryPage verifyDefaultSelectedValue() {
    
    //drop down element
    List<WebElement> dropdownInCategory = new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfAllElementsLocatedBy(By.xpath("//div[@aria-haspopup='listbox']")));
    
    
    /*if(dropdownInCategory.isDisplayed()) {
    
        try {
            Thread.sleep(8000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }*/
            
    //click dropdown
    JavascriptExecutor js = (JavascriptExecutor) driver;
    js.executeScript("arguments[0].click();", dropdownInCategory.get(0) );
    //}
    
    //get selected value
    WebElement defaultValue = driver.findElements(By.xpath("//li[@role='option']")).get(0);
    
    System.out.print(defaultValue.getText());
    
    //Check whether default value is Transaction History
    Assert.assertEquals(defaultValue.getText(),"Transaction History");
    
    driver.navigate().back();
    
    //return new TransactionHistoryPage object
    return new TransactionHistoryPage();
    
}

Even though element was found dropdown click is not happening. Can someone give a solution?

Answer 1

In the HTML bit that you have shared in the question, there is no <li> element (//li[@role='option']).

Hence this line threw error for me:

WebElement defaultValue = driver.findElements(By.xpath("//li[@role='option']")).get(0);

Based on the shared HTML, the below code did the job for me.

List<WebElement> dropdownInCategory = new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfAllElementsLocatedBy(By.xpath("//div[@aria-haspopup='listbox']")));
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].click();", dropdownInCategory.get(0) );
//get selected value
String defaultValue = driver.findElement(By.xpath("//div[@aria-haspopup='listbox']")).getText();
//Check whether default value is Transaction History
if (defaultValue.matches("Transaction History")) {
    System.out.println("Pass");
} else {
    System.out.println("Fail");
}