如何使用 Selenium 测试在跨度元素中选择值？答案

【问题标题】：How to select value in a span element with Selenium testing?如何使用 Selenium 测试在跨度元素中选择值？
【发布时间】：2012-12-21 01:07:18
【问题描述】：

我要测试的页面有一个 span 元素，它实际上是一个下拉选择菜单。 “选择”元素的 Selenium 代码不起作用并抛出以下内容：

Exception in thread "main" org.openqa.selenium.support.ui.UnexpectedTagNameException: Element should have been "select" but was "span"

该元素的代码如下所示：

<span style="width: 100%" val="30" id="countVal">30</span>

我打开下拉菜单时的代码是：

<tr onclick="selectNewCount(1);" class="selec_option">
<td onmouseout="blankit(this)" onmouseover="colorit(this)" class="bones_pointer out_color" id="tdgroup1">50</td>
</tr>

这是这样的：

编辑 1：

这是我的 Selenium 代码：

            // choose number of records.
        try {
            WebDriverWait wait = new WebDriverWait(driver, /*seconds=*/10);

            element = wait.until(presenceOfElementLocated(By.id("countVal")));

            Select select = new Select(element);
            select.deselectAll();
            select.selectByVisibleText("100");

        } catch (NoSuchElementException ex) {
            System.out.println("PAGE SOURCE: \n" + driver.getPageSource());
            ex.printStackTrace();
        }

这是页面源代码在此元素周围的外观：

如果需要，我可以添加更多详细信息。谢谢。

【问题讨论】：

你能不能分享一下你的 selenium java 代码是什么样子的
跨度在什么范围内？ span的父元素是什么？
@amey，我刚刚在 EDIT 1 下的问题中添加了信息。谢谢。
@niharika_neo，我添加了页面源的图像。谢谢。

标签： java selenium webdriver web-testing

【解决方案1】：

这就是正在发生的事情：

当您单击<div id="countSelect"></div> 时，JavaScript 的show_countSelector() 会被执行并且值会附加到表格中。那些“选择选项”实际上是“表格行”。

所以你的步骤是：
1) 如果在div 下没有id 为countSelect 的类selec_option 的行，那么您需要先单击该div。
2) 之后单击特定行。

因此，我将尝试展示 Java 代码（不过，我使用 Python 处理 Selenium）：

WebElement selectorElement = driver.find(By.xpath('//*[@id="countSelect"]')));

WebElement elementOfInterest;
try {
    //trying to get the "select option"
    elementOfInterest = selectorElement.findElement(By.xpath('//*[contains(@class,"selec_option")]/td[@text()="50"]'))

} catch (NoSuchElementException e) { 
    //so options are not visible, meaning we need to click first
    selectorElement.click()
    //good idea would be to put "wait for element" here
    elementOfInterest = selectorElement.findElement(By.xpath('//*[contains(@class,"selec_option")]/td[@text()="50"]'))
}
//this would select the option
elementOfInterest.click()

类似的东西。 :)

【讨论】：

非常感谢。有用。有没有办法可以操纵原始页面的源并添加不存在的选项？比如，我可以为 300 条记录动态添加下拉选项吗？我知道这是单独的问题，但它与 this 上下文直接相关。谢谢。
@vlr，您可以毫无问题地做到这一点，但这不是自动化的工作（除非您试图验证无法提交不同的值）。首先，您可以通过任何浏览器的开发工具添加 html 代码。其次，你可以在你的代码中调用它：jsfiddle.net/R7e5L 注意：由于你没有在你的 ddl 打开时发布 HTML 代码，我不能保证这个代码在两个地方：tdgroup[number] 和 selectNewCount([number]) 的值。我把 3 作为数字 - 但这只是我的猜测。
@vlr，此外，任何优秀的 Web 开发人员都会阻止您设置新值的尝试（开发人员提供的除外），但是查看 HTML 代码，我认为您的开发人员并不是那么好，这个技巧可能会奏效.
我在这里有一个问题。如何在 try catch 块之外访问 WebElement 的 elementOfInterest 引用？ @vlr
@Purendra 我已将变量声明放在 try/catch 块之外

【解决方案2】：

你试过selectByValue("value")吗？

【讨论】：

即使在我尝试激活任何类型的选择之前，它实际上也不接受该元素。它落在Select select = new Select(element);

【解决方案3】：

那是因为它不是select，即使它看起来像......

您必须使用其他方法。我觉得很简单

element = driver.find(By.id("countVal"));
element.click()

应该工作

你必须找到select的工作方式，后面应该涉及一些javascript。当您知道元素的变化是如何出现的时，您将能够找到在 Selenium 中可以做什么。但这肯定不是纯粹的select

（注意：这是一个未经测试甚至可能无法编译的代码，但它向您展示了我的观点）

【讨论】：

【解决方案4】：

您只能将 Select 类与 html 本机选择一起使用...您使用自定义选择，这实际上是一个跨度。

你的例子：

 public void selectValue(String item) {
    WebElement dropDown = driver.findElement(By.id("countTd"));
    dropDown.click();

    driver.findElement(By.xpath("//td[@id='countTd']/span[text()='" + item + "']")).click();
}

【讨论】：