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

Question

How can you find relative WebView elements in calabash-ios and calabash-android. I know that the syntax is slightly different between the two, but the problem is the same. Here is 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 cannot do is find the button, which is the child of the div found in the 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 - div . xpath , div. div, :

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