06 WebView Support

Calabash iOS version 0.9.33 and above support querying and acting on webview content.

To look into a webview you simply use the query function and syntax. The syntax for webviews is a bit irregular (and we might clean this up at some point), but there is quite good support.

You can do all of the following:

1. Get the page url

   query "webView", :request ["<NSMutableURLRequest http://www.google.dk/m/places#ipd:mode=search&q=Barer&icon=2&source=mlpp>"]

2. Query for an element with id, class or tagname

   query("webView css:'#header'") query("webView css:'.js-current-repository'") query("webView css:'a'")

The string after css: can be any css selector. You can also use xpath by writing, e.g., xpath:'//div[@class]'

3. Get all the HTML associated with the webview:

   query("webView css:'*'")

Note query will only return DOM nodes that are visible on the screeen! (They should be visible and their center should be within the webview viewport).

Note If you have several web views you have to choose the appropriate web view using the Predicate syntax:

query("webView {accessibilityLabel = 'mylabel'} css:'a'")

the reason is that "webView marked:'mylabel'" has special meaning for web views: it does a textual search throughout the web view to find the text.

Touching

As usual, anything you can query, you can touch (but the element must be visible to be found). Here is a session where I interact with the webview in the sample app from github (LPSimpleExample).

irb(main):036:0> scroll "webView", :down
=> ["<UIWebView: 0x7b702f0; frame = (0 0; 320 411); autoresize = W+H; layer = <CALayer: 0x6e35eb0>>"]

query "webView css:'a'"
=> [{"rect"=>{"left"=>48, "top"=>355, "width"=>24.890625, "bottom"=>374, "right"=>72.890625, "height"=>19}, "nodeName"=>"A", "id"=>"", "center"=>{"X"=>60.44531, "Y"=>384.5}, "nodeType"=>"ELEMENT_NODE", "webView"=>"<UIWebView: 0x7b702f0; frame = (0 0; 320 411); autoresize = W+H; layer = <CALayer: 0x6e35eb0>>", "class"=>"", "nodeValue"=>nil, "html"=>"<a href=\"http://www.googl.com\">link</a>"}]

irb(main):042:0> result=query("webView css:'a'").first
=> {"rect"=>{"left"=>48, "top"=>355, "width"=>24.890625, "bottom"=>374, "right"=>72.890625, "height"=>19}, "nodeName"=>"A", "id"=>"", "center"=>{"X"=>60.44531, "Y"=>384.5}, "nodeType"=>"ELEMENT_NODE", "webView"=>"<UIWebView: 0x7b702f0; frame = (0 0; 320 411); autoresize = W+H; layer = <CALayer: 0x6e35eb0>>", "class"=>"", "nodeValue"=>nil, "html"=>"<a href=\"http://www.googl.com\">link</a>"}

irb(main):043:0> result['html']
=> "<a href=\"http://www.googl.com\">link</a>"

irb(main):044:0> touch("webView css:'a'")
=> [{"rect"=>{"left"=>48, "top"=>355, "width"=>24.890625, "bottom"=>374, "right"=>72.890625, "height"=>19}, "nodeName"=>"A", "id"=>"", "center"=>{"X"=>60.44531, "Y"=>384.5}, "nodeType"=>"ELEMENT_NODE", "webView"=>"<UIWebView: 0x7b702f0; frame = (0 0; 320 411); autoresize = W+H; layer = <CALayer: 0x6e35eb0>>", "class"=>"", "nodeValue"=>nil, "html"=>"<a href=\"http://www.googl.com\">link</a>"}]

Entering text

Using the functions keyboard_enter_char and keyboard_enter_text (documented here) is preferred. But you can also use the set_text function to set the text using JavaScript (your query must be a textfield or textarea).

set_text "webView css:'input.login'", "ruk"