如何用Selenium驱动程序/Selenium实现jQueryUI选择菜单的自动化

Question

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

有关设置的一些背景：

• 使用Selenium IDE Firefox插件
• 使用jQueryUI SelectMenu演示页面进行测试(这样我们就可以确保代码片段是每个人都可以访问的，并且消除了选择菜单作为其演示站点至少得到了正确的实现)

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

我已经尝试针对selenium单击的span.ui-selectmenu-文本，然后单击ID=ui-id-5的元素，没有结果。然后我试着点击span.速按钮，然后选择这个选项。也没有运气。

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

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

1. 双击命令以打开菜单。
2. 双击命令以选择正确的ID元素。
3. 再次双击命令，以选择正确的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>

如果有人能指出正确的方向，任何提示或暗示，或实际解决问题的办法，那就太好了。

在发布这篇文章之前，我确实进行了搜索，但我找到的唯一一个是3年前的版本，而这个解决方案已经行不通了：

how to test using ui selectmenu (jQuery) and selenium

Answer 1

如果您感兴趣的只是选择一个值，您可以这样做，而无需单击和打开菜单。只需运行:为实际的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-按钮是插入在页面上的jQuery.ui.select的DIV (使用Chrome或FF中的检查器查看DOM结构)。要进行选择，请查看页面底部的DOM，其中有一个带有UL的DIV，通常使用ui- ID -1菜单生成的id，在其中有下拉选项，您只需使用选择器并发送clickAt命令。

例如，我想出了如何通过用户扩展s.js命令向下滚动并逐页获取选项的屏幕截图：

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);
};

​

Answer 2

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

希望能帮上忙。

保罗，当你花时间写这个答案的时候，公平地说，我将由选民来选择“接受的答案”。谢谢你的贡献。