Question

我很难让Selenium从jQueryUI官方插件生成的选择菜单中选择一个选项，如下面更详细的描述，Selenium打开菜单，然后点击选择项目，关闭菜单，但未选择该选项。

有关设置的一些背景知识：

使用Selenium IDE Firefox插件
使用jQueryUI SelectMenu演示页面进行测试（因此我们可以确保代码段是每个人都可以访问的，并且消除了selectmenu至少是正确实现的，就像它们的演示站点一样）

测试来源：http://jqueryui.com/selectmenu/

我尝试过针对selenium点击的span.ui-selectmenu-text，然后点击ID = ui-id-5的元素，没有运气。然后我尝试单击span.speed按钮，然后选择该选项。也没有运气。

在所有情况下，菜单都会打开并关闭，但原始值仍处于选中状态。

然而，发生了一件奇怪的事情。在Selenium IDE中，如果我执行以下操作，则会选择它：

双击命令以打开菜单。
双击Command以选择正确的ID元素。
再次双击Command以选择正确的ID元素。

现在突然，所选选项已更新。但是，当我端到端地运行脚本时，只需单击两次命令，它就会再次失败，并且只在页面上选择了默认选项。

代码：

<tr>
    <td>open</td>
    <td>/selectmenu/</td>
    <td></td>
</tr>
<tr>
    <td>click</td>
    <td>css=span.ui-selectmenu-text</td>
    <td></td>
</tr>
<tr>
    <td>click</td>
    <td>id=ui-id-5</td>
    <td></td>
</tr>

如果有人可以指出我正确的方向，任何提示或提示，或问题的实际解决方案，那将是伟大的。

我在发布之前就已经搜索了SO，但我能找到的唯一一个来自3年前，解决方案不再适用了：

how to test using ui selectmenu (jQuery) and selenium

Answer 1

如果您只对选择单个值感兴趣，则无需单击并打开菜单即可。简单地运行： | select |您想要的实际SELECT html元素|值的定位器|

这是有效的，因为jQuery.ui.selectmenu采用SELECT html元素并相应地对其进行样式化。

<tr>
  <td>select</td>
  <td>id=address-state</td>
  <td>label=Alabama</td>
</tr>

现在，如果您真的想用UI模拟整个用户输入，那么您应该使用clickAt命令，例如：

<tr>
  <td>clickAt</td>
  <td>id=ui-id-1-button</td>
  <td></td>
</tr>

其中ui-id-1-button是在页面上插入的jQuery.ui.select的DIV（使用Chrome或FF中的检查器查看DOM结构）。要选择，请查看页面底部的DOM，其中有一个带有UL的DIV，通常会生成ui-id-1菜单的生成ID，在其中你有下拉选项，你可以使用选择器并发送clickAt命令。

我找到了如何滚动下拉菜单并通过user-extensions.js命令逐页截取选项的屏幕截图：

＆＃13;

Selenium.prototype.doScreenshootSelectMenuOptions = function(btnLocator, jsonOptions) {
    /**
     * Capture the jQuery.ui.selectmenu dropdown option values page by page screenshots.
     *
     * @param btnLocator    Element locator for the selectmenu button
     * @param jsonOptions   Options for the command as a JSON string. They are <code>
     *                      {"dropdownLocator":"<optional value>", "fileName":"<optional value>", "extension":"<optional value>"}
     *                      <\code>
     *                      <ul>
     *                          <li>dropdownLocator: Optional element locator for hidden selectmenu options locator. If
     *                          ommited it will be computed from options.dropdownLocator</li>
     *                          <li>fileName: Optional name of the file to use for the screenshot. It will be appended
     *                          with ' pg#' where # is the drop down page number. If omitted the default file name is
     *                          'Dropdown'</li>
     *                          <li>extension: Optional name of the file extension to use for the screenshot. If
     *                          omitted the default extension is '.png'</li>
     *                      </ul>
     */
    LOG.debug("user-extensions: doScreenshootSelectMenuOptions('" + btnLocator + "', '" + jsonOptions + "')");

    var btn = this.browserbot.findElement(btnLocator);
    if(btn.id.indexOf('-button') <= 0) {
        throw new SeleniumError("screenshootSelectMenuOptions: wrong value for 'btnLocator'. It's applied to jQuery.ui.selectmenu drop downs!");
    }

    var options = JSON.parse(jsonOptions);
    if(typeof options.dropdownLocator  === 'undefined') {
        options.dropdownLocator = btn.id.substr(0, btn.id.indexOf('-button')) + '-menu';
    } else if(options.dropdownLocator.indexOf('-menu') <= 0) {
        throw new SeleniumError("screenshootSelectMenuOptions: wrong value for 'jsonOptions.dropdownLocator'. It's applied to jQuery.ui.selectmenu drop downs!");
    }

    options.fileName  = (typeof options.fileName  !== 'undefined') ? options.fileName  : "Dropdown";
    options.extension = (typeof options.extension !== 'undefined') ? options.extension : ".png";
    var ddBtn           = this.browserbot.findElement(btnLocator),
        opts            = this.browserbot.findElement(options.dropdownLocator);
    ddBtn.scrollIntoView();     // Scroll to dropdown so it has room to open downwards
    this.doClickAt(btnLocator); // Open dropdown

    var height          = isNaN(parseInt(opts.style.height)) ? opts.scrollHeight : parseInt(opts.style.height),
        scrollHeight    = opts.scrollHeight,
        pages           = scrollHeight / height,
        level           = utils.screenshoot.getNextLevel();
    if(pages <= 0) {
        throw new SeleniumError("screenshootSelectMenuOptions could not computer the number of dropdown menu pages to screenshoot!");
    }

    // For each dropdown values page(s)
    for(var pgNr = 0; pgNr < pages; pgNr++) {
        var pgHeight = (pgNr * height);
        LOG.debug("user-extensions: screenshootSelectMenuOptions opts.scrollTo('0', '" + pgHeight + "')");
        opts.scrollTo(0, pgHeight);
        this.doScreenshotEntirePage(options.fileName + ' pg' + (pgNr + 1) + options.extension, level);
        ddBtn.scrollIntoView();
    }

    this.doClickAt(btnLocator); // Close dropdown
    utils.screenshoot.resetFromLevel(level);
};

＆＃13;

Answer 2

我终于找到了一个非常简单的答案来解决这个问题。首先在元素上使用mouseOver，然后单击它。问题解决了。

希望它有所帮助。

保罗，你花时间写下答案，对你公平，我会让选民选择“接受的答案”。谢谢你的贡献。

如何使用Selenium Web驱动程序/ Selenium IDE自动化jQueryUI selectmenu

2 个答案: