Selenium WebDriver don't see dropdown element (Angular)

Viewed 501

I'm trying to create a script on Java using Selenium which will go throught all registration steps and create new user. I have problem with finding dropdown element. Selenium doesn't see dropdown element at all.

Web application is on Java + Angular Here is my HTML:

<p-dropdown _ngcontent-c9="" appendto="body" class="Main-dropdown ng-tns-c11-7 ng-pristine ng-invalid ng-touched"
        name="regionActual" required="">
<div class="ng-tns-c11-7 ui-dropdown ui-widget ui-state-default ui-corner-all ui-helper-clearfix">
    <div class="ui-helper-hidden-accessible ng-tns-c11-7 ng-star-inserted">
        <select class="ng-tns-c11-7" aria-hidden="true" tabindex="-1" name="regionActual" aria-label=" ">
            <option class="ng-tns-c11-7 ng-star-inserted" value="FirstRegion">FirstRegion</option>
           <option class="ng-tns-c11-7 ng-star-inserted" value="SecondRegion">SecondRegion</option>
        </select>
    </div>
    <div class="ui-helper-hidden-accessible">
        <input class="ng-tns-c11-7" readonly="" role="listbox" type="text" aria-label=" ">
    </div>
    <label class="ng-tns-c11-7 ui-dropdown-label ui-inputtext ui-corner-all ui-placeholder ui-dropdown-label-empty ng-star-inserted">empty</label>
    <div class="ui-dropdown-trigger ui-state-default ui-corner-right">
        <span class="ui-dropdown-trigger-icon ui-clickable pi pi-caret-down"></span>
    </div>
</div>

I tried next:

//p-dropdown[@name='regionActual']//label
//p-dropdown[@name='regionActual']//select
//p-dropdown[@name='regionActual']/div
//p-dropdown[@name='regionActual']//div[@class='ui-dropdown-trigger ui-state-default ui-corner-right']

Nothing works. Selenium CAN click on option, but CAN'T click on the select. If I click on "select" element manualy script go to next steps successfully.


Thanks for all your comments and help. I have found the solution of my problem. I opened Chrome dev tools, clicked to select element and watch what is happen. Two element was highlighting at the same time: p-dropdown and first div. For clicking on "select" I have to click on this two elements successively. This is the sequence of elements I have to click on:

//p-dropdown[@name='regionActual']
//p-dropdown[@name='regionActual']/div
//div[@class='ui-dropdown-items-wrapper']/ul/li[2]

It wasn't obvious for me, but it works. Thanks again!

1 Answers

As this this dropdown is build with tag so you can use Select class directly.

Sample code:

import org.openqa.selenium.support.ui.Select;
...
WebElement region = driver.findElement(By.xpath("//select[@name='regionActual']"));
Select sel = new Select(region);
sel.selectByVisibleText("FirstRegion"); //this will select from dropdown 'FirstRegion'
Related