Interacting with JavaScript drop down menu using WebDriver and Ruby?

Question

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?

David Ambler · Accepted Answer · 2013-03-08 13:14:30Z

0

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.

answered Mar 8, 2013 at 13:14

David Ambler

1531 gold badge1 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Furious Duck · Accepted Answer · 2013-02-27 14:59:55Z

0

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

answered Feb 27, 2013 at 14:59

Furious Duck

2,0291 gold badge16 silver badges18 bronze badges

3 Comments

ByronW Over a year ago

I understand the approach you are using and am using the same method to click on the drop down box. I can see the drop down box become active and drop down, but I am unable to select any of the values once it has dropped down.

Furious Duck Over a year ago

Try to use webdriver's click() method on the option you need. Or show the example of ruby code and the error log

ByronW Over a year ago

I've updated the original with question with the way it is being done (let me know if you have any questions or comments on the approach - still really new to this and not always sure of best coding practices etc)

Amey · Accepted Answer · 2013-02-27 21:39:34Z

0

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)

answered Feb 27, 2013 at 21:39

Amey

8,5489 gold badges47 silver badges64 bronze badges

Comments

SoftwareTestingEnthusiast · Accepted Answer · 2014-04-22 01:34:25Z

0

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!

answered Apr 22, 2014 at 1:34

SoftwareTestingEnthusiast

3033 gold badges9 silver badges22 bronze badges

Collectives™ on Stack Overflow

Interacting with JavaScript drop down menu using WebDriver and Ruby?

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related