从 <ul><li>..</li><ul> 标签的下拉列表中选择元素，其中 <ul> 标签具有属性样式 -display:none答案

【问题标题】：Select element from dropdown list in <ul><li>..</li><ul> tag where <ul> tag having attribute style -display:none从 <ul><li>..</li><ul> 标签的下拉列表中选择元素，其中 <ul> 标签具有属性样式 -display:none
【发布时间】：2020-02-01 16:40:03
【问题描述】：

我想点击 div[@id='main_filter'] 然后从下拉列表中选择一个 li 元素。

但我面临的问题是，父标签有属性 style = display: none，所以 li 项目被隐藏。所以我无法从 li 标签中获取元素。

我正在创建一个用于 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>

我的解决方案： 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();

}

【问题讨论】：

使用代码时会发生什么？有具体的错误信息吗？
我的代码面临的问题是 - 它没有点击 li 元素。因为每次我需要单击下拉菜单，然后从 li 中选择。但由于我正在编写通用方法，所以这个解决方案对我不起作用。
您说 UL 列表项是隐藏的。那么为什么要选择LI项呢？如果您的目标是执行 onclick 事件，而不是尝试使用其数据值或使用 span 元素中的文本找到正确的 LI 元素并尝试从您的代码中触发事件。

标签： c# html selenium internet-explorer selenium-webdriver

【解决方案1】：

Selenium 的核心功能之一是，当 Webdriver 尝试与被覆盖或隐藏的元素交互时，它会失败。这是一件好事，因为它允许我们在测试环境中检测到此类异常，而不是将此类行为暴露给我们的用户。

不过，这有时会有点令人困惑。例如，尝试单击被透明覆盖的 Web 驱动程序将失败，因为它被覆盖，尽管它可能看起来像人眼的可单击元素。

【讨论】：

【解决方案2】：

您可以尝试在隐藏的 ul 元素上执行一些 Javascript 来更改其样式属性并显示它。我看到您已经在尝试删除 style 属性，但让我向您展示我之前采用的一种方法：

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

如果可行，那么您应该能够点击li 元素。

【讨论】：

这绝对不是 Selenium 的预期用途（至少不在测试中）。它的核心目的之一是使与隐藏/覆盖元素的交互失败。
我发现了使用 Selenium 的有用场景。例如，有时您通过接受击键的input 元素上传文件。自然而然，你将send_keys 与文件路径一起放入文件input。但是，您会收到一个错误，因为 input 通常是隐藏的。此脚本修复了该问题，它可以帮助解决不适合自动化的 UI。