如何使用Selenium Web驅動程序/ Selenium IDE自動執行jQueryUI selectmenu

Question

我正在努力讓Selenium從jQueryUI官方插件生成的選擇菜單中選擇一個選項，如下面更詳細的描述，Selenium打開菜單，然后單擊以選擇一個項目，關閉菜單，但是未選擇該選項。

設置背景：

• 使用Selenium IDE Firefox插件
• 使用jQueryUI SelectMenu演示頁面進行測試（因此，我們可以確保每個人都可以訪問該代碼段，並避免將select菜單至少正確實現為其演示站點）

測試源： http : //jqueryui.com/selectmenu/

我嘗試將硒單擊作為span.ui-selectmenu-text的目標，然后單擊ID = ui-id-5的元素，沒有運氣。 然后，我嘗試單擊span.speed-button，然后選擇選項。 也沒有運氣。

在所有情況下，菜單都會打開和關閉，但是仍會選擇原始值。

但是，發生了一件奇怪的事情。 在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年前的解決方案，它不再起作用了：

如何使用ui selectmenu（jQuery）和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中查找，其中DIV帶有UL，通常通過生成的ui-id-1-menu的ID進入UL，並且在其中具有下拉選項，您可以僅使用選擇器並發送clickAt命令。

我一個人弄清楚了如何通過user-extensions.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，然后單擊它。 問題解決了。

希望能幫助到你。

保羅，在您花時間編寫該答案時，為了公平起見，我將由選民選擇“接受的答案”。 感謝您的貢獻。