Unable to click on element from dropdown menu item

Question

I want to perform following steps:

Type some element (variable name - 'username') in the input area
Dropdown suggestions open up. [declaration : username = "user2"]

Check if element 'username' is present in dropdown; if yes, then want to click on that element and done.

<span class="main-dropdown"> <div class="tt"> <span class="all-suggestions"> <div class="suggestion"> <p>user1</p> </div> <div class="suggestion"> <p>user2</p> </div> <div class="suggestion"> <p>user3</p> </div> </span> </div> </span>

I have tried following :

@browser.div(:class,"suggestion").p(:text,username).wait_while_present @browser.div(:class,"suggestion").p(:text,username).click
@browser.span(:class,"all-suggestions").div(:class,"suggestion").p(:text,username).wait_while_present @browser.span(:class,"all-suggestions").div(:class,"suggestion").p(:text,username).click
@browser.span(:class,"main-dropdown").div(:class,"suggestion").p(:text,username).wait_while_present @browser.span(:class,"main-dropdown").div(:class,"suggestion").p(:text,username).click

Issue: 'user2' shows up in dropdown list but it is unable to click on that element from dropdown.

Any help would be appreciated.

Justin Ko · Accepted Answer · 2015-08-07 14:55:53Z

The problem is that the path to the element is over-specified. Watir handles each element method individually, returning the first match of each call. It does not account for chained methods.

For example, consider the first code that does not work:

@browser.div(:class,"suggestion").p(:text,username).click

Actually says:

Find the first div on the page with class "suggestion".
Within that div, find the first p with text username.

This means that Watir will only find the "user1" paragraph.

When nesting element calls, you only want to include elements that are the same ancestor for all elements. For example, any of the following would work:

# Using the only matching div.suggestion @browser.div(:class => 'suggestion', :text => username).p.click # Only using the common ancestor span.all-suggestions @browser.span(:class,"all-suggestions").p(:text,username).click

If you really want to keep all of the nesting, you will need to use XPath:

@browser.p(:xpath => "//div[@class='suggestion']/p[text()='#{username}']").click

Thanks Justin!. I was able to get this working by - # Using the only matching div.suggestion @browser.div(:class => 'suggestion', :text => username).p.click but "Only using the common ancestor span.all-suggestions" doesn't work. — Smriti, CommentedAug 8, 2015 at 11:19
@browser.span(:class,"all-suggestions").p(:text,username).click will only work if there is one span(:class,"all-suggestions") on the page. This is because Watir returns the first match only. — Justin Ko, CommentedAug 8, 2015 at 15:46
hey @justin..how would you implement the same example above in page object model? I tried something like this: one div locator is: div(:autoSuggestList, :xpath => "//div[contains(@class,'tt-suggestion')]") and then autoSuggestList_element.paragraph_element(:text => /user1/) if I want to check for text 'user1' but this would always check for the first element in the autoSuggestList element. How can we look for all <p> tags within the class=tt-suggestion and then check for existence of some specific text from there? — Smriti, CommentedNov 24, 2016 at 18:53
Correct. As you need to specify a value, username, at runtime, you cannot use the accessor methods (as they generated methods do not accept arguments). — Justin Ko, CommentedNov 25, 2016 at 13:53

Collectives™ on Stack Overflow

Unable to click on element from dropdown menu item

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related