使用 WebDriver 和 Ruby 与 JavaScript 下拉菜单交互？答案

【问题标题】：Interacting with JavaScript drop down menu using WebDriver and Ruby?使用 WebDriver 和 Ruby 与 JavaScript 下拉菜单交互？
【发布时间】：2013-02-13 04:10:31
【问题描述】：

我正在使用 Ruby 和 Selenium WebDriver 为网页编写自动化程序，但遇到了网站上使用 JavaScript 而不是标准 HTML 制作的一些下拉菜单的阻塞问题。在这些下拉列表中，用户可以从下拉列表中选择一个选项或单击它并开始输入它以根据输入的内容过滤结果（我假设这些下拉列表可能用于非常长的列表选项）。

问题是我想不出使用 WebDriver 与它们交互的方法，虽然我已经设法使用下面的代码让它在 Selenium IDE 中工作，但是将此 IDE 脚本导出到 Ruby 不起作用：

<tr>
    <td>select</td>
    <td>css=select[name=dsref]</td>
    <td>demo</td>
</tr>

我使用的 WebDriver 代码是：

def clickOn (parameters = {})
      # This will accept a locator type and name to click on
      #
      # EXAMPLE
      #
      # clickOn(
      #   locatorType: :link,
      #   locatorName: 'Home'
      # )
      #
      # This will click on the link named 'Home'
      locatorType = parameters[:locatorType]
      locatorName = parameters[:locatorName]
      $driver.find_element(locatorType, locatorName).click
    end

    clickOn(
          locatorType: :xpath,
          locatorName:     '/html/body/form/fieldset[4]/div[2]/div/div/div/a/span'
      )

然后我尝试使用隐藏值字段的 xpath 以相同的方式从下拉列表中找到选择，但它无法找到隐藏值。

我尝试与之交互的 javascript 是：

<div id="tabWarehousing" class="cansee">
<div class="lineFirst">
<div class="of8">
    <label for="formdsref">Warehouse</label>
    <br>
    <select id="sel2DZ" class="admn_dropdownmenu chzn-done" size="1" name="dsref"     style="display: none;">
        chosen=Chosen { form_field=select#sel2DZ.admn_dropdownmenu, options= {...}, active_field=

        true

        , more...}

        <option selected="" value=""></option>
        <option value="demo">demo</option>
        <option value="demodownload">demo download</option>
    </select>
    <div id="sel2DZ_chzn" class="chzn-container chzn-container-single chzn-container-single-  nosearch" style="width: 115px;">
        <a class="chzn-single" tabindex="-1" href="javascript:void(0)"> <span>demo</span>
        <div>
            <b></b>
        </div>
        </a>
        <div class="chzn-drop" style="left: -9000px; width: 113px; top: 18px;">
            <div class="chzn-search">
                <input type="text" autocomplete="off" style="width: 78px;">
            </div>
            <ul class="chzn-results">
                <li id="sel2DZ_chzn_o_1" class="active-result result-selected" style="">demo</li>
                <li id="sel2DZ_chzn_o_2" class="active-result" style="">demo download</li>
            </ul>
        </div>
    </div>
</div>

关于如何使用 Ruby WebDriver 设置此下拉列表的值的任何想法？

【问题讨论】：

标签： ruby firefox selenium automation webdriver

【解决方案1】：

javascript 只是与隐藏的下拉菜单交互，因此您可以使用以下命令取消隐藏实际的下拉菜单：

@driver.execute_script("document.getElementsByName('#{<REF_TO_HIDDEN_DROPDOWN}')[0].style.display = 'block'")

这会将隐藏下拉菜单的显示设置为“阻止”，以便您可以正常与之交互。

【讨论】：

【解决方案2】：

我使用 Python API，但我认为您应该了解这种方法。这是我在测试中使用的方法。所以我实际上点击了链接，等待下拉菜单显示，点击选项。

def select_random_js_dropdown_option(driver, link_to_call_dropdown_xpath, dropdown_option_xpath):
    options = driver.find_elements_by_xpath(dropdown_option_xpath) 
    driver.find_element_by_xpath(link_to_call_dropdown_xpath).click()
    wait_for_element_to_load(driver, dropdown_option_xpath)
    random.choice(options).click()

def wait_for_element_to_load(driver, element_xpath, time_to_wait):
    try:
        return WebDriverWait(driver, time_to_wait).until(lambda driver : driver.find_element_by_xpath(element_xpath).is_displayed())
    finally:
        pass

【讨论】：

我了解您使用的方法，并且正在使用相同的方法单击下拉框。我可以看到下拉框变为活动状态并下拉，但一旦下拉，我无法选择任何值。
尝试在你需要的选项上使用 webdriver 的 click() 方法。或者显示 ruby 代码示例和错误日志
我已经更新了原件，并提出了问题（如果您对该方法有任何疑问或 cmets，请告诉我 - 对此仍然很陌生，并不总是确定最佳编码实践等）

【解决方案3】：

这就是我使用 ruby 与下拉菜单交互的方式

Selenium::WebDriver::Support::Select.new(@driver.find_element(:name, name)).select_by(:text, data_to_select)

【讨论】：

【解决方案4】：

这是我从 Ruby 的下拉列表中选择的方式：-

option = Selenium::WebDriver::Support::Select.new(browser.find_element(:id => "00NZ0000001G35y")
)
option.select_by(:text, "Mumbai")

希望对你有帮助！

【讨论】：