What to do if your mobile website requires a tap instead of a click?
Our development team decided that the mobile website only accepts mobile input (tap instead of click) on some elements because that is the actual user behavior. This does mean that if you use watir (I use 6.10.3) or lapis_lazuli (I use 2.1.3), you will have a bit of rework to do for your mobile tests. So let's check out the options and how this was resolved in the test automation suite of Mproof's latest product "Service-Hub".
 |
| Image credit: Minuum |
Intro
In one of my previous blogposts I talked about setting up the test automation framework and setting up a browser session with appium_lib, watir and lapis_lazuli for mobile test automation. Not mandatory to read, but could be handy if you're new to mobile website test automation to get you started.
Appium_lib gem
Let's start with the most popular solution. Appium is made for mobile test automation, so if you use the appium_lib gem for ruby you can execute all kinds of touch actions which is very handy and most likely even mandatory for testing mobile applications that require gestures. But when you test a website via the mobile browser, it could be that you don't need two seperate test suites. In most cases you can re-use most of your desktop scenario's and interactions, with only a couple of small modifications. So let's have a look at the watir and lapis_lazuli gems to compare these with appium_lib.
Watir & lapis_lazuli gem
The way you select elements in LL and interacting with elements in Watir is under the hood the same since LL is an extension on top of Watir. So in both you can find an element and perform actions like:
- elm.click
- elm.fire_event("click")
- elm.fire_event("dblclick")
But there is no such thing as tap/swipe/pinch functionality like in appium_lib. And in our case this means we can can perform a click on the element, which will be performed, does not raise any error, but is not doing anything since the mobile site expects a touch action. So here it looks like you're a bit stuck, but there is a workaround and that is via the execute_script functionality which will look something like:
- browser.execute_script("s = $('.mp-listcontrol-control').first().controller().scope; s._clickRow(0, { type: 'touchend' }); s.$apply()")
The downside of this approach is that it becomes less readable and harder to maintain. So our developer came up some ruby code that could basically perform a tap in a more readable way for the scripter while it does all the execute_script thingy's in the background.
Eventer
The Eventer gem is a small gem that basically converted the execute_script functionality you see above into something more user (test script writer) friendly. This means that with this little gem we can now simply use something like this to tap on the element we want:
- elm.raise_event(:tap)
The code to make the gem can be found on github.
Example of use
So now let's see this in practice. We locate the element, check if it's a mobile device, if so, perform a tap, if not (desktop), perform a click. Sidenote: Somewhere in the test code I defined some checks that will determine for me if I'm testing on mobile or desktop, but I'll get back to that in another post. The focus for this post is on using tap versus click.
require 'Eventer'
elm = browser.wait(like: [:div, 'data-ng-click', 'toggleContextMenu']) if Device.is_mobile? elm.raise_event(:tap) else elm.click end
elm = browser.wait(like: [:div, 'data-ng-click', 'toggleContextMenu']) if Device.is_mobile? elm.raise_event(:tap) else elm.click end
This way we can re-use most of the element selections we already have for the desktop tests, so we don't have to duplicate all these test just for mobile. The only thing we add is the difference between clicking on the element or triggering a tap via execute_script with this Eventer gem.
Comments
Post a Comment