Select element from dropdown list in <ul><li>..</li><ul> tag where <ul> tag having attribute style -display:none

Question

I want to click on div[@id='main_filter'] and then select a li element from the dropdown.

But the problem i am facing is, parent tag has attribute style = display: none, so li items are hidden. so I am unable to get elements from the li tag.

I am creating a generic method to selectfromdropdown.

<div id="main_filter" class="drop-select-wrap">
<span data-title="Active Clinic Patients" data-value="101" class="optionValue ov-gradient">Active Clinic Patients&nbsp;&nbsp;▼</span>

    <ul class="dropSelect" id="parentFilter" style="display: none; width: 175px;">
        <li id="filterTypes" data-value="102" onclick="tier1FilterChanged(this);" data-rel="My Active Patients">
        <span data-title="My Active Patients">My Active Patients</span>
        </li>
        <li id="filterTypes" data-value="101" onclick="tier1FilterChanged(this);" data-rel="Active Clinic Patients">
        span data-title="Active Clinic Patients">Active Clinic Patients</span>
        </li>
        <li id="filterTypes" data-value="126" onclick="tier1FilterChanged(this);" data-rel="Inactive Patients">
        <span data-title="Inactive Patients">Inactive Patients</span>
        </li>
    </ul>
</div>

my solution : private IWebElement parentFilter => driver.FindElement(By.XPath("//div[@id='main_filter'][1]/span"));

public void SelectFilter(string filterOption)

{

   ElementHandler.Click(parentFilter);
   IWebElement element = driver.FindElement(By.Id("parentFilter"));
        ((IJavaScriptExecutor)driver).ExecuteScript("arguments[0].removeAttribute('style')", element);
 IWebElement filterName = element.FindElement(By.XPath("//li/span[contains(text(),'" + filterOption + "')]"));
                    //driver.FindElement(By.XPath("/ul[@id='parentFilter']/li/span[contains(text(),'"+ filterOption + "')]"));

ElementHandler.SelectFromDropdown(parentFilter, filterName);

}

public static void SelectFromDropdown(IWebElement element1,IWebElement element2)

{

  Actions action = new Actions(driver);
  action.ClickAndHold(element1).Build().Perform();
            action.ClickAndHold(element1).MoveToElement(element2).Click().Build().Perform();

}

what happens when you use your code? Is there a specific error message? — Breaks Software
The problem i am facing with my code is - it is not clicking on li element . because everytime i need to click on dropdown and then select from li. But since i am writing generic method this solution is not working for me. — Kalyani Thosar
You said that UL list items are hidden. So why do you want to select the LI item? If your goal is to execute the onclick event than try to find the correct LI element using its data value or using the text from the span element and try to fire event from your code. — Deepak-MSFT

CEH CEH · Accepted Answer · 2019-10-03T14:38:22

You could try executing some Javascript on the hidden ul element to change its style attribute and display it. I see you're already trying to remove the style attribute, but let me show you an approach I've taken before that has worked:

IWebElement elementToShow = driver.FindElement(By.XPath("//ul[@class='dropSelect']"));
((IJavaScriptExecutor)driver).ExecuteScript("arguments[0].style.display = 'block';", elementToShow);

If that works, then you should be able to click on the li elements.

Select element from dropdown list in <ul><li>..</li><ul> tag where <ul> tag having attribute style -display:none

2 Answers