Unable to locate element in a dropdown

Question

ul class="appt-dropdown-menu">
<li id="service-slot-blocker" class="slot-blocker-holder">
<li id="service-05b41399015375913">
<code class="light-blue"></code>
<span class="appt-details-dropdown-service-title">Facial</span>
<span class="appt-details-dropdown-service-time">59mins</span>
<div class="clearfix"></div>
</li>
<li id="service-sebd91399015377146">
</ul>

I want to select dropdown value-Facial. I tried the below options for finding the element:

    driver.findElement(By.xpath("/html/body/div[2]/div[2]/div[1]/div[4]/div[3]/ul/li[2]/div[1]/ul/li[2]")).click();
------------------------------------------------------------------------------------------
    WebElement s=driver.findElement(By.xpath("/html/body/div[2]/div[2]/div[1]/div[4]/div[3]/ul/li[2]/div[1]/ul/li[2]"));
    s.click();

I am getting error as -element not visible

Answer 1

I am getting error as -element not visible: is the element visible? Selenium can't interact with invisible elements.

If it is visible, you can do something like:

driver.findElement(By.xpath("//span[@class='appt-details-dropdown-service-title']")).click();

Answer 2

To select a value from a dropdownlist or multiselect using Selenium, you will have to use the Select function instead of trying to click on the element.

example:

Select dropdown = new Select(driver.findElement(By.className("appt-dropdown-menu")));
dropdown.selectByVisibleText(Facial);

but as Mutt pointed out, the html code you have given does not contain a dropdown element. for the above code to work you have to located a valid dropdown.

Answer 3

I believe this application utilizes a GUI rendering library like YUI, PrimeFaces etc.

While manually testing, which element do you click on to make the dropdown options visible?

Kindly paste the HTML code for the element which you clicked and for the menu itself.

For eg.

// Dropdown Trigger
<div id="xyz" class="appt-dropdown-button">...</div>
// Dropdown Menu 
<ul class ="appt-dropdown-menu"> .. </ul>

Kindly provide the above details and I will be able to provide you with the code to select the correct option. Thanks.

Answer 4

In this case, I think you should capture the element first, just use capture by cssSelector.

driver.findElement(By.CSSSelector("span.appt-details-dropdown-service-title")).click();

OR, if the element is not captured by using CSS above, I think this element is temporary hidden then we should use ActionClass to action on the parent element first, --> click the sub-child element after.

On your given html, it's not the "Select" actually, so I don't think we can use SelectElement class. If it's , we can use: The HTML will be:

<select id="optionID">
<option value="Value">Option</option>
<option value="NotValue">Not Option</option>
</select>

So, the select class will be following:

WebElement selectElement = driver.findElement(By.id("optionID")); 
Select select= new Select(selectElement);
select.selectByValue("Value");

Hope this help.

Answer 5

Using Python :

element = wd.find_element_by_xpath(

"//ul[@class='appt-dropdown-menu']/li[2]/span[@class='appt-details-dropdown-service-title' and contains(.,'Facial')]"

)

element.click()

Answer 6

When you create a drop down using HTML ul and li tags, then to access the drop down list, First you have click on Drop down box then try finding "Facial" element.

Answer 7

Seems like dynamic drop down. You have to provide more information about the HTML code in order to get it done easily. You can follow the process:

1. Make sure to click on to drop down whether it is unordered list <ul> or <li>
2. Then only you can select the option by directly clicking on to that element.

Note: Default api provided by selenium may not work in dynamic dropdowns.