CODEWITHSUNDEEP
javahtmlseleniumdrop-down-menudropdown
Francisco Maldonado
Francisco Maldonado

Reputation: 11

Selenium Webdriver with Java - Click on an hyperlinked Dropdown Container

I need to click on an element inside a Dropdown container. I've tried several searchs but I haven't been able to find the correct solution. The select method doesn't work, and I still don't know how to work with Selectors when there's no ID, Name or Class related to it. Here's the HTML code:

<a href="/account/settings/info"class="account-link">Account<span class="caret"></span></a>

<div class="account-dropdown__container">
    <ul>
        <li><a href="/account/settings/info" target="_self">Account</a></li>
        <li><a href="/wedding-registry/invite" target="_self">Invite Friends</a></li>
        <li><a href="/account/settings/credits" target="_self">Zola Store Credit</a></li>
        <li><a href="/registry/settings/info" target="_self">Registry Settings</a></li>
        <li><a href="/account/settings/orders" target="_self">Orders You've Placed</a></li>
        <li><a>Log out</a></li>
    </ul>
</div>

The first piece of code is a button, but if I put my mouse over it, it will show the Dropdown container that I am talking about. If I put my mouse over it without clicking, it will show the list of the Dropdown Container. (And I would also like to know how to hover an element to show the list without clicking it, because its hidden).

My question is, then: how can I click on Registry Settings?

It doesn't have an ID, nor a class (although it is inside the class account-dropdown__container). I think I can use By.name("Registry Settings"), but since is not visible unless the Dropdown list is open, it won't click and it will show Css Selector not found error. Care to help? Thanks!

Also, I am using Cucumber + Selenium + Java in IntelliJ IDEA, the synthaxis changes just a bit, but it is still different from the codes I tend to find in this forum. Hence, why I am asking for a specific solution to my problem.

Upvotes: 1

Views: 967

Answers (2)

rkouye
rkouye

Reputation: 533

You have to make the dropdown visible first.

As in Selenium you can't just hover an element, you will have to do it all in one go.

Check this: How to perform mouseover function in Selenium WebDriver using Java?

Actions action = new Actions(webdriver);
WebElement button = webdriver.findElement(By.class("account-link"));
action.moveToElement(button).moveToElement(webdriver.findElement(By.linkText("Registry Settings")).click().build().perform();

You may have to wait in between for the dropdown to appear. I have not tested the code, you will probably have to fix it before it works.

Upvotes: 1

cruisepandey
cruisepandey

Reputation: 29362

As you have mentioned when you put your mouse over to a button, it will show the Dropdown container.

Same can be automated with the help of selenium like this : (I am assuming account is a button ) 

Actions action = new Actions(driver);  
action.moveToElement(driver.findElement(By.linkText("Account"))).build().perform();

Now your drop-down is expanded or visible in UI, and you want to click on Registry Settings . Since your drop down is not made using Select options tags which are available in HTML. You can't use Select class from Selenium.

You will have to store every elements which are present in drop down to a list. and then based on some condition , you can click on your desire element.

Code: 

List<WebElement> options =    driver.findElements(By.cssSelector("div.account-dropdown__container ul li"));
        for(WebElement option : options) {
            if(option.getText().trim().contains("Registry Settings")) {
                option.click();
            }
        }

Hope this will help.

Upvotes: 0

Related Questions