Watir click on drop down value that is not visible until scroll down

Question

I'm a newbie to web app automation testing. I'm using watir-webdriver to automate our functional testing with an application. In the process we need to click on a drop down and select a value from the drop down. The problem i'm facing is that i'm able to click on the elements that are visible in the drop-down however, when i tried clicking on an item which is just below the visible item it sets the default value to the drop down and exit without any error.

My HTML extract:

  <td width="50%">
    <strong>Drop Down Header</strong>
    <br />
    <div style="POSITION: relative; TOP: 0px">
      <div class="SelectRight">Select Item...</div>
      <div style="Z-INDEX: 998; WIDTH: 717px; DISPLAY: none; TOP: 639px; LEFT: 21px" class="SelectTarget" id="currentSelectedOptions"
      originalparent="null">
        <iframe style="POSITION: absolute; FILTER: alpha(opacity=0); WIDTH: 100%; DISPLAY: block; HEIGHT: 150%; TOP: 0px; LEFT: 0px"
        marginheight="0" src="javascript:&#39;&#39;;" frameborder="0" marginwidth="0" scrolling="no" align="bottom"></iframe>
        <ul style="Z-INDEX: 998; WIDTH: 684px; HEIGHT: 200px" class="SelectOptions">
          <li>
            <a id="option_0" href="javascript:void(0)">Select Item...</a>
          </li>
          <li>
            <a id="option_1" href="javascript:void(0)">Item 1</a>
          </li>
          <li>
            <a id="option_2" href="javascript:void(0)">Item 2</a>
          </li>
          <li>
            <a id="option_3" href="javascript:void(0)">Item 3</a>
          </li>
          <li>
            <a id="option_4" href="javascript:void(0)">Item 4</a>
          </li>
          <li>
            <a id="option_5" href="javascript:void(0)">Item 5</a>
          </li>
          <li>
            <a id="option_6" href="javascript:void(0)">Item 6</a>
          </li>
          <li>
            <a id="option_7" href="javascript:void(0)">Item 7</a>
          </li>
          <li>
            <a id="option_8" href="javascript:void(0)">Item 8</a>
          </li>
          <li>
            <a id="option_9" href="javascript:void(0)">Item 9</a>
          </li>
          <li>
            <a id="option_10" href="javascript:void(0)">Item 10</a>
          </li>
          <li>
            <a id="option_11" href="javascript:void(0)">Item 11</a>
          </li>
        </ul>
      </div>
    </div>
    <select id="dropDownItem" class="Shidden" name="dropDownItem" rows="3" wrap="soft">
      <option selected="selected" value="-1:::">Select Item...</option>
      <option value="291:::Item 1">Item 1</option>
      <option value="310:::Item 2">Item 2</option>
      <option value="350:::Item 3">Item 3</option>
      <option value="100:::Item 4">Item 4</option>
      <option value="102:::Item 5">Item 5</option>
      <option value="103:::Item 6">Item 6</option>
      <option value="104:::Item 7">Item 7</option>
      <option value="105:::Item 8">Item 8</option>
      <option value="106:::Item 9">Item 9</option>
      <option value="108:::Item 10">Item 10</option>
      <option value="109:::Item 11">Item 11</option>
    </select>
  </td>

My Watir Code:

  contentframe = b.frame(:id => 'contentframe')
  contentframe.element(:xpath => "//td[contains(.,'Drop Down Header') and ./div/div[@class='SelectRight']]").click
  contentframe.element(:xpath => "//div[@id='currentSelectedOptions']/ul[@class='SelectOptions']/li/a[contains(.,'Item 9')]").click

Would be of help if someone can point me in the right direction to correct this

Thanks, Ara

Answer 1

Its really weird, instead of

contentframe.element(:xpath => "//div[@id='currentSelectedOptions']/ul[@class='SelectOptions']/li/a[contains(.,‌​'Item 9')]").click

i tried

contentframe.element(:xpath => "//div[@id='currentSelectedOptions']/ul[@class='SelectOptions']/li/a[contains(.,‌​'Item 9')]").fire_event 'onclick'

and it worked!!!