如何使用 Selenium WebDriver 和 C# 选择在 <span> 标签下定义的下拉菜单项

Posted 2023-03-05

【中文标题】如何使用 Selenium WebDriver 和 C# 选择在 <span> 标签下定义的下拉菜单项

【英文标题】：How to select dropdown menu item which is defined under <span> tag using Selenium WebDriver and C#

【发布时间】：2019-01-25 20:42:57

【问题描述】：

<div class="span3">
                <div>
                    LSP Account<br>
                    <span title="" class="k-widget k-dropdown k-header" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-owns="cboAccountSettings_listbox" aria-disabled="false" aria-busy="false" aria-activedescendant="7245f0ab-5ba4-4c7b-b722-6c204d700e9f" style="width: 98%;">
                    <span unselectable="on" class="k-dropdown-wrap k-state-default">
                    <span unselectable="on" class="k-input">Any</span>
                    <span unselectable="on" class="k-select">
                    <span unselectable="on" class="k-icon k-i-arrow-s">select</span></span></span>
                    
                    <select id="cboAccountSettings" style="width: 98%; display: none;" data-value-primitive="true" data-bind="value: SWO_Id" data-role="dropdownlist">
                    <option value="" selected="selected">Any</option>
                    <option value="SWO-ARG">SoftwareONE ARG</option>
                    <option value="SWO-AUS">SoftwareONE AUS</option>
                    <option value="SWO-BOL">SoftwareONE BOL</option>
                    <option value="SWO-BRA">SoftwareONE BRA</option>
                    <option value="SWO-CAN">SoftwareONE CAN</option>
                    <option value="SWO-CHL">SoftwareONE CHL</option>
                    <option value="SWO-COL">SoftwareONE COL</option>
                    <option value="SWO-CRI">SoftwareONE CRI</option>
                    <option value="SWO-DOM">SoftwareONE DOM</option>
                    <option value="SWO-ECU">SoftwareONE ECU</option>
                    <option value="SWO-EMEA">SoftwareONE EMEA</option>
                    <option value="SWO-GTM">SoftwareONE GTM</option>
                    <option value="SWO-HKG">SoftwareONE HKG</option>
                    <option value="SWO-HND">SoftwareONE HND</option>
                    <option value="SWO-IDN">SoftwareONE IDN</option>
                    <option value="SWO-JAM">SoftwareONE JAM</option>
                    <option value="SWO-JPN">SoftwareONE JPN</option>
                    
                    </select>
                    </span>
                </div>
            </div>

1) 我可以点击标签使用，但无法选择项目：

driver.FindElement(By.CssSelector("span[aria-owns='cboAccountSettings_listbox']")).Click();

2）我也使用了这段代码，但找不到特定的元素：

var LSPAccount = WebBrowser.FindElement(By.CssSelector("span[aria-owns='cboAccountSettings_listbox']"));   
Thread.Sleep(1000);
var selectElement = new SelectElement(LSPAccount);
Thread.Sleep(1000);
selectElement.SelectByValue("SWO-ARG");

3）我也试过这个，但没有成功：

var xpath = "//span[contains(@class,'k-widget k-dropdown k-header')][contains(@id,'cboAccountSettings')][contains(text(),'SoftwareONE ARG')]";
var admi = WebBrowser.FindElement(By.XPath(xpath));
Thread.Sleep(1000);
admi.Click();

【问题讨论】：

请阅读为什么是screenshot of html or code or error is a bad idea。考虑使用基于格式化文本的相关 HTML、代码试验和错误堆栈跟踪来更新问题。

这个页面有公共链接吗？

【参考方案1】：

您可以尝试以下操作：

//get the select html element
var selectList = driver.FindElement(By.Selector("select#cboAccountSettings"));
//wrap it inside webdriver's SelectElement and select option with value "SWO-ARG"
var selectElement = new SelectElement(selectList);
selectElement.SelectByValue("SWO-ARG");

SelectElement 需要一个代表 html 选择的 IWebElement。另外，请检查目标选择元素是否不在某个框架内。在这种情况下，请先切换到目标框架。

【讨论】：

或者，更简单地说：var selectList = driver.FindElement(By.Id("cboAccountSettings"));

确实！！但是，我更喜欢使用 css 选择器，因为我可以指定元素类型以及 id，以防万一有其他元素具有相同的 id。否则，我将不得不找到所有并使用索引或其他替代方法来到达目标元素！

没有帮助，正如已经提到的 - 项目在 标记内，所以通过这个 - 你将无法找到特定的#Id。

【参考方案2】：

选择元素不可见，这是问题所在。您可以使用javascript来选择选项（Java）：

String option = "SWO-ARG";
((JavascriptExecutor) driver).executeScript("arguments[0].selected='selected';", driver.findElement(By.cssSelector("#cboAccountSettings option[value='" + option + "']")));

也试试这个：

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].removeAttribute('selected');", driver.findElement(By.cssSelector("#cboAccountSettings option[selected]")));
js.executeScript("arguments[0].setAttribute('selected', 'selected');", driver.findElement(By.cssSelector("#cboAccountSettings option[value='SWO-ARG']")));

【讨论】：

感谢您的回答，但似乎 - 我可以通过此代码找到特定元素，但未在下拉列表中选择特定值。在调试时 - 它在变量中给出“空”。 --你能不能复习一下

将 html 分享为文本

在代码中编辑 Htm，希望您的代码能读懂 - 复制粘贴很困难 - 请同时参考屏幕截图，同时使用相同的代码创建环境

请手动选择“SoftwareONE ARG”之类的值，然后打开开发人员工具并搜索“SoftwareONE ARG”，您可能会在 html 中找到具有值的 div 或 ul/li 并共享这些 html 部分。如果可以分享网址，那就容易多了。