使用WebDriver和JavaScript与下拉菜单进行交互？

Question

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

问题是我不能想出一种使用WebDriver与他们交互的方法，尽管我已经设法使用下面的代码让它在Selenium 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'
      )

然后，我尝试使用hidden values字段的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设置这个下拉列表的值，你有什么想法吗？

Answer 1

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

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

这会将隐藏下拉菜单的显示设置为“block”，这样您就可以像往常一样与它交互。

Answer 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

Answer 3

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

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