Post

1 Star2 Stars3 Stars4 Stars5 Stars
Loading ... Loading ...

By Rafaela Azevedo
Hello everyone :)
I am testing a hybrid app these days and I am learning a lot…Ok, but what is a hybrid app ?
Like native apps, run on the device, and are written with web technologies (HTML5, CSS and JavaScript). Hybrid apps run inside a native container, and leverage the device’s browser engine (but not the browser) to render the HTML and process the JavaScript locally. A web-to-native abstraction layer enables access to device capabilities that are not accessible in Mobile Web applications, such as the accelerometer, camera and local storage.
Summarising…. You have to test native elements mixed with web elements… Cool, don’t you think ? HaHa Hard work !
This post have some examples of a query using CSS and an action (click) using Javascript(IOS and Android platform):
Using Javascript to click: (Example)
query(“webView index:1”, :stringByEvaluatingJavaScriptFromString ‘document.getElementsByTagName(“iframe”)[0].contentWindow.document.getElementByTag(“a”).click()’)
This example, you have to write first the WebView hat contains the HTML and after put that conversor from String to Javascript. Finally, put your code in Javascript :)
I don’t know many things about javascript, but you can use the console of the inspector of Chrome or Safari to identify web elements in mobiles (iphone,ipad,tablet).
Examples – CSS:
query(“SlidePanelWebView index:2 css:’#articleContainer .currentPanel figure .video-play-button'”)
query(“SlidePanelWebView index:4 css:’#article_1 .data-copy p strong a'”)
element_does_not_exist(“WebView css:’.inner a'”)
Below the explanation of each part to form a CSS query on Calabash:
query(“WebView index:4 css:’#article_1 .data-copy p strong a'”)
– First: Put the element and the index that contains the element that you want. How you discover this ? You can try each index according with the position where is your element. Like in the end of a page… more chances to be the last index of the element.
– Second: Write css:
– Third: Inside each ‘ you will choose what properties, class, id or tag you want to use to find the element.
– Fourth: When you know the id of the div or the element, you can write here. Put # and then the id of the div… If the element that you want was not found until this point, you can use the id of the first div in the hierarchy. Like:

In this example, you can use the id of the first div instead of the id’s element. And try writing the way to find the element with the tags or classes provided.
– Fifth: Class, here you can use the class element. To identify that this is a class you need to put a . before the name of the class… And I used to write only the last name of the class when this has more then one class name. Example:

– Sixth: The last thing that you should know it is about the tag name. Like , , … When you want to find a tag you just write the tag names separated by space. Like: div p a , following the example bellow.

I will update this post later because still missing a part when you want to find a property in the middle of the css. Like when you want to search a specific value for href, following the example bellow:

Maybe tomorrow :)

If you have any suggestion, questions or comments just write below please !
Bye !!

Source: http://azevedorafaela.wordpress.com/2014/08/05/javascript-and-css-testing-on-hybrid-apps/

Category: Programming, Programming, QA, Test and Automation Stuffs, QA, action of javascript with calabash, calabash android, calabash-android iframe click element, calabash-ios, click a element inside a iframe mobile automation, click a element with javascript and calabash, click on element inside a iframe – calabash, example how to click an element using jquery and calabash, example query calabash-android, example query calabash-ios, example query css calabash, example query css cucumber, examples of querys with css and calabash, find a iframe with calabash, find an element n a iframe – calabash and javascript, finding a element inside a iframe calabash, finding web elements with calabash, get element by tag javascript and calabash, how find a element inside a iframe with calabash, how find the elements using calabash-android, how find the web elements calabash-ios, how to click a element with javascript and cucumber, how to find a css on calabash, how to find a css on cucumber, how to use css with calabas-android, how to use css: with cucumber, how to use javascript to click a element with calabash, how to use jquery with calabash, how to use jquery with cucumber, how use css with calabash, how use css with calabash-ios, how use css: with query in calabash, hybrid app automated tests, hybrid app calabash tests, hybrid app calabash-android, hybrid app calabash-ios, hybrid app cucumber, hybrid apps tests, hybrid tests examples, iframe and calabash, iframe calabash element, iframe calabash-ios element click, iframes and calabash, javascript calabash, javascript calabash click, javascript calabash example click, javascript cucumber, javascript cucumber click example, query of jquery with calabash, query with jquery with cucumber, using css and calabash, using css to automated tests

Você também pode querer ler

Comments are off for this post.