How to select a combo list text item defined within in a div tag where all div tags have the same class name using watir webdriver

Question

I am trying to select an item in a combo-list with text "1 : 272988" where the combo list is defined as a list of div tags all with the same class name as below:

<div style="width: 108px; height: 300px;" id="ext-gen334" class="x-   combo-list-inner">
  <div class="x-combo-list-item">1 : 1066</div>
  <div class="x-combo-list-item">1 : 2132</div>
  <div class="x-combo-list-item">1 : 4265</div>
  <div class="x-combo-list-item x-combo-selected">1 : 8530</div>
  <div class="x-combo-list-item">1 : 17061</div>
  <div class="x-combo-list-item">1 : 34123</div>
  <div class="x-combo-list-item">1 : 68247</div>
  <div class="x-combo-list-item">1 : 136494</div>
  <div class="x-combo-list-item">1 : 272988</div>
  <div class="x-combo-list-item">1 : 545977</div>

I have tried the following options below but all result in a watir unknown object exception error

@browser.div(:class => "x-combo-list-inner", :text => "1 :272988").click
@browser.div(:class => "x-combo-list-inner").div(:class => "x-combo-list-item", :text => "1 : 272988").click
@browser.div(:class => "x-combo-list-inner").div(:class => "x-combo-list-item", :index => 8)
@browser.div(:class => "x-combo-list-inner").div(:text => "1 : 272988").click

For all the above I have also tried substituting

.click

with

.wait_until_present

and get watir timeout exception errors. I have also tried performing a

.exists?

for all the above options and they return false.

The results would suggest that the combo list items don't actually exist however when I check the containing div elements that hold the combo list items as below

puts @browser.div(:class => "x-combo-list-inner").div(:class => "x-combo-list-item").exists?

a true value returned.

Would greatly appreciate any other ideas as I have run out.

Are there multiple of these combo lists on the page? @browser.div(:class => "x-combo-list-inner") returns the first match. My guess is that it is not the first one that has this specific list. What do you get if you output @browser.divs(:class => "x-combo-list-inner").length — Justin Ko
Thanks again @Justin Ko for the hint. I tried your above suggestion and got back a value of 2. After this I tried the following line @browser.divs(:class => "x-combo-list-inner")[1].div(:class => "x-combo-list-item", :text => "1 : 272988").clickand it worked! — Costa

Justin Ko Justin Ko · Accepted Answer · 2015-03-02T13:48:25

The problem with nested element locators, ie @browser.div(:class => "x-combo-list-inner").div(:class => "x-combo-list-item", :text => "1 : 272988") is that Watir only looks in the first matching parent element.

That means that in an HTML like:

<body>
  <div class="x-combo-list-inner">
    <div class="x-combo-list-item">Wrong Text</div>
  </div>
  <div class="x-combo-list-inner">
    <div class="x-combo-list-item">1 : 272988</div>
  </div>
</body>

Watir would be looking in the first div element, which only has the list item "Wrong Text". You have a couple of options.

If the list item is unique on the page, the easiest solution is to remove the parent element locator:

@browser.div(:class => "x-combo-list-item", :text => "1 : 272988")

If it is not unique, you have to tell Watir which combo list to use. As mentioned in the comments, you could tell Watir to use a specific index:

@browser.div(:class => "x-combo-list-inner", :index => 1).div(:class => "x-combo-list-item", :text => "1 : 272988")

or

@browser.divs(:class => "x-combo-list-inner")[1].div(:class => "x-combo-list-item", :text => "1 : 272988")

However, care should be taken when using index since adding another combo list could unexpectedly break the test. If possible, you should see if there is something within the combo lists that can be used to differentiate them. For example, an id or user visible text.

How to select a combo list text item defined within in a div tag where all div tags have the same class name using watir webdriver

1 Answers