Interacting with JavaScript drop down menu using W

问题:

I'm writing automation for a web page using Ruby and Selenium WebDriver but have encountered a blocking issue with some of the drop downs on the site which are made using JavaScript instead of standard HTML. On these drop downs users are able to select an option from the drop down or click on it and start typing for it to filter results based on what is typed (I'm assuming the idea is these drop downs are for potentially very long lists of options).

Problem is I can't figure out a way to interact with them using WebDriver, though i have managed to get it to work in the Selenium IDE using the below code, but exporting this IDE script to Ruby doesn't work:

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

The WebDriver code that I am using is:

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'
      )

I have then tried to locate the selection from the drop down in the same way using the xpath of the hidden values field, but it is not able to locate the hidden values.

The javascript that I am trying to interact with is:

<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>

Any ideas on how I can set the value of this drop down using Ruby WebDriver?

回答1:

The javascript is just interacting with a hidden dropdown, so you can unhide the actual drop down using:

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

This will set the display of the hidden dropdown to 'block' so you can interact with it as normal.

回答2:

I work with Python API, but I think you should understand the approach. Here's the method I'm using in my tests. So I actualy click the link, wait for the dropdown to become displayed, click the option.

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

回答3:

This is how I use ruby to interact with a dropdown

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

回答4:

This is how I select from dropdown list in Ruby: -

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

Hope it helps you!