How to find relative WebView elements in calabash-ios / calabash-android

Question

How can you find relative WebView elements in calabash-ios and calabash-android. I know the syntax is slightly different between the two but the issue is same. Here's an example:

1)  This query is too broad:
    query("webView css:'div'") 
    # Returns all the div elements visible

2)  I can find the div I need with:
    query("webView css:'div'").find { |x| x["textContent"] =~ /text from my div/ }
    # Returns the div element I'm looking for

3)  and I can find all the button elements
    query("webView css:'.button')
    # Returns all the visible elements with .button class

4)  and I can find all the buttons that are in a div
    query("webView css:'div > .button'")
    # Returns all the visible button elements that are children of a div

What I can't do is find a button that is a child of the div I found in example 2.

What I've tried:

pseudo-selectors don't work.
query("webView css:'div:first'")
# Returns an empty array

a combination of inheritance and class didn't work.
query("webView css:'div.classy-class > .button'")
# Returns an empty array

I'm going crazy. How can I find this?

Answer 1

You can find it using xpath:

query("WebView xpath:'//div[text()=\"text from div\"]/*[@class=\"button\"]'")

OR

query("WebView xpath:'//div[contains(text(),\"text from div\")]/*[@class=\"button\"]'") 

2nd is to find div by part of its text. The xpath above finds only buttons which are direct children of the div. If you need to find all buttons in this div use the following:

query("WebView xpath:'//div[text()=\"text from div\"]//*[@class=\"button\"]'")