06 webview support

Benjos Antony edited this page Jun 22, 2018 · 10 revisions

Calabash Android supports 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 will clean this up at some point), but there is quite good support.

Here are some examples:

  1. 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.

  1. 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). You can, as with any other queries, disable visibility filtering by adding 'all' at the start of your query string. query("all webView css:'*'")

Touching

As usual, anything you can query, you can touch (but the element must be visible to be found).

query("webView css:'a'").first
touch("webView css:'a'")

Entering text

You can use the enter_text method to enter text in a webview (in addition to any other android widget).

enter_text("webView css:'input.login'", "run")

This will enter the text "run" into the first input field of the class 'login'.

If the input field already has focus, you can use keyboard_enter_text(text) to append the text.

Cordova Web Views

Note that when using cordova android platform or cordova webviews you must instead specify cordovaWebView or SystemWebView, like so:

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

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

If you don't specify cordovaWebView or SystemWebView your calabash test will completely fail to recognize the webview and you'll probably cry.

React Native Web Views

Similar to Cordova, when using react native, you need to specify reactWebViewinstead of webView like so

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

JavaScript alerts

When an alert is displayed (via the window.alert() method), you can confirm its appearance on screen with

Then I wait to see "The alert text"

and you can dismiss it with

Then I press "OK"
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.