Hello everyone 🙂
I am testing a hybrid app these days and I am learning a lot…Ok, but what is a hybrid app ?
Summarising…. You have to test native elements mixed with web elements… Cool, don’t you think ? HaHa Hard work !
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 [style=\'Font:Tahoma\']'")
– 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:
<div id: second>
<element id: third></element>
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:
<div class: class name second>
– Sixth: The last thing that you should know it is about the tag name. Like <p>, <a href>, <strong>… When you want to find a tag you just write the tag names separated by space. Like: div p a , following the example bellow.
<div class: first>
<a href: third></a>
– Seventh: When you want to find a property in the middle of the css.You need to put [name of property=value of property] Like when you want to search a specific value for href: [href=https://azevedorafaela.wordpress.com], following the example bellow.
<a href: https://azevedorafaela.wordpress.com></a>
More examples of queries calabash with CSS:
query("WebView index:4 css:'#three .scrollable [data-component=buttonBlock] .sectionList li span'")
query("PanelWebView css:'#article .data-copy p strong a'")
query("View index:3 css:'.viewInactive'")
If you have any suggestion, questions or comments just write below please !