Category: General Tools

mabl’s Adaptive Testing with Angular and React Apps

Test automation can automate some repetitive, but necessary tasks. But if you’re not careful, you can quickly fall into the rabbit hole of chasing failing tests and lose sight of the equally necessary exploratory questions: “Can our users easily complete the user journey?” “Are there potential bugs with this journey?” “Is the quality of this journey regressing?”

Tests are brittle because the underlying mechanics of XPaths, CSS selectors, element IDs, and other descriptors are often tightly coupled with automated tests. This is particularly painful when you have apps with dynamic locators or locators that aren’t necessarily unique, such as can be the case with Angular and React apps.

A machine-learning-driven testing solution like mabl handles apps with dynamic UIs to help testers focus on the human side of testing, which makes the testing role so unique and powerful in the first place.

“I trained a few journeys in my Angular app that required unique values for every execution and was surprised to see that mabl supported this and delighted that my tests completed successfully.”

– Cathy, Lead Test Engineer at Immuta

How does mabl do this? It’s all built into her test adaptation ability.

 

What information does mabl use to enable robust, adaptive tests?

As testers interact with the mabl trainer to create a test, under the covers, mabl captures your user journeys using our own proprietary domain-specific language. She also gathers a great deal of DOM element attributes, properties, and visual details (like XPaths, tag names, class attributes, text, and various contextual identifiers) to help identify conceptually equivalent elements in future test runs of the journey.

So now that she has an understanding of the user journey, as well as all this additional information, mabl knows enough about each action in the journey to identify the appropriate element again, or find likely replacements for it as the UI changes. When there’s only one likely candidate available, mabl will incrementally update her models for the corresponding step of the journey, so tests will stay up to date even after several successive UI changes.

Much of this information can even be applied to the same journey in other environments, so tests running through the same app will run consistently. As mabl gathers more information about replacement candidates across many apps, this will ultimately be used in more advanced models to prioritize future candidates across journeys and even across apps.

But the question is regarding robust changes; can mabl still adapt? What does mabl do when there’s no obvious right answer?

mabl uses the collected information to be experimental. Based on past identifications of elements, she can rank partial and uncertain matches. To verify if the experimental action was correct, mabl evaluates how the remainder of the journey unfolds.

For example, she considers whether assertions pass, whether she can complete subsequent actions, and the visual appearance of the resulting app state compared to previous runs. If mabl determines that her fix for the test was successful, she’ll let you know what the proposed fix was. From here, you can simply reject mabl’s fix for the journey if it was incorrect, and mabl will remember that for future runs. 

Enough talk, let’s see an example of this in Angular!

As mentioned at the onset, one of the difficulties with handling a variety of modern web frameworks like Angular and React is that they rely heavily on DOM manipulation and JavaScript execution. In particular, the DOM elements generated by these frameworks often include minimal and opaque attributes, making them hard to distinguish.

However, humans must be able to recognize how to take a particular action across iterations of the UI; mabl gathers some of the same contextual clues. Although element attributes may be insufficient to identify a particular element for interaction during a journey, there are a variety of other dynamic or computed properties to be used, like inner text and rendered location or size.

Consider a simple example of a dynamically generated list in an Angular app with ngFor (similarly with ng-repeat in AngularJS 1.x or an array of generated list elements in React):

angularAppList_1.png

 

In this example, we have a screen that shows a list of user roles in a hypothetical app where each role can be clicked to get a detailed description of the role. This gets instantiated as a series of list (<li>) elements, each containing an anchor (<a>) element with the clicks handled by Angular — the href attribute of each anchor is the same, self-referential, “#” value even though a click results in displaying a different role description for each through DOM manipulation by Angular JavaScript code. Just considering the element attributes, each element looks identical (e.g., <a _ngcontent-c5 href=”#”> or just <a href=”#”> in React), but the inner text of each differs.

We can train mabl to click on the roles in a specific order. On the bottom right is the mabl trainer, recording each step as we interact with our Angular app:

TrainingMablAngularExample-1.png

 

Below you’ll find the test output from the mabl app. You can see her collecting information at each step of the journey, then completing the test successfully (accompanying screenshots that mabl collects of the app at each step are shown on the right):

mablSuccessfulFirstRun.png

 

So when our hypothetical app adds an “A.3” role in the list ahead of “B.0”, mabl is still able to identify the “Role B.0” anchor element by using the inner text properties of the anchor elements, and updates what she knows about that element.

mablTestOutputA3.png

 

If the names of the roles were later changed (e.g., “B.0” becomes “Beta-Zero”), mabl would know that the correct element was last seen in the 4th position of the list (both by visual location and by last known XPath). So she would rank the “Beta-Zero” link as the most likely candidate and evaluate the rest of the journey to determine that she had made a correct choice and update her knowledge about the new text for the element.

mablTestOutputAbgularBetaZero.png

 

With machine intelligence, mabl makes automated testing easy, low-maintenance, and available to every QA team. 

You can try mabl out in your own apps for free, at app.mabl.com.

 

Public link to Angular example:
https://stackblitz.com/edit/mabl-angular-list-example?file=app%2Fapp.component.ts

Public link to corresponding React example:
https://stackblitz.com/edit/mabl-react-generated-array-example?embed=1&file=index.js

Rally for Rivers – Save India’s Lifelines

I know this post has nothing to do with automation nor does it help anyone who have anything to do with India, but India is in its brink of water scarcity and its getting worse every year.

I am from southern part of India and my native is Madurai and last month while I traveled to India for holiday, I got completely distressed with the way people are living their day to day life, the underground water in most of the areas are completely depleted and most of the people that too living in the heart of city are waiting for drinking water supply from corporation. The bad news is, the water supply happening from corporation is now extended from 3 days once to weekly once and even worse there is NO water in Vaigai river which is the only source of drinking water for people in and around Madurai.

The above statement is applicable for year 2017, but if we dont save water or merge all the rivers now (which is the only hope we got, since we have cut almost all the trees and made complete deforestation) the statement will be something like this

People in Madurai forgot what ground water is and madurai corporation is planning to supply drinking water monthly once.

Sadhguru, in fact my Guru is conducting an great rally named “Rally for Rivers” which is mainly done by Sadhguru with only one motivation, SAVE THE NATION AND HUMANITY.

I support the effort of Sadhguru, hats off Guru ji

Lets all support for the great moment which is going to happen on September 2017

Thanks,

Karthik KK

Distributed test execution in android with Spoon

In this post we will discuss one of the coolest and most useful testing behavior called distributed testing of application in Android. Well, many of readers like you have been asking this to me and this is the answer for your question, Spoon!!

Spoon

Android’s ever-expanding ecosystem of devices creates a unique challenge to testing applications. Spoon aims to simplify this task by distributing instrumentation test execution and displaying the results in a meaningful way.

Spoon makes existing instrumentation tests more useful. Using the application APK and instrumentation APK, Spoon runs the tests on multiple devices simultaneously. Once all tests have completed, a static HTML summary is generated with detailed information about each device and test.

Spoon Components

Spoon has only two components which are basically JAR files you can download from here

  • Spoon Runner
  • Spoon Client library

Spoon client library jar file need to be added in our AUT or Test project for taking screenshots, whereas runner is responsible for running the test in multiple devices.

Spoon Command to run the test

Html Report

Read more

Configuring VS Emulator for Android in Eclipse

In the last post we discussed about VS Emulator for Android installation and its features compared to Android SDK emulator. In this post we will discuss Configuring VS Emulator for Android in Eclipse IDE.

To configure in eclipse IDE, we need to follow three steps as mentioned below

  • Change the Run configuration
  • Add External tools as VS emulator for android
  • Set the android sdk path in regedit (optional)

Here is the complete discussion of the above discussion.

Thanks for reading the post and watching the video !!!

Please leave your comments and let me know if there is anything I should update in this post.

Thanks,
Karthik KK

Visual Studio Emulator for Android (Installation)

Late last year Microsoft introduced VS emulator for android along with Visual studio 2014 (now called as Visual Studio 2015), but now it’s available as a separate package downloadable from https://www.visualstudio.com/en-us/features/msft-android-emulator-vs.aspx. Hence machine without visual studio can also install this emulator and work for any kind of android application development and testing.

What are the major advantages?

  • It’s very fast compared to any emulator till date.
  • It works seamlessly even if your Hyper-V is enabled
  • Since now it is along with Visual studio, you don’t have to buy any 3rd party emulator which works with Visual studio

Apart from that

The emulator has following cool features

  • Supports sensor simulation like Zoom, Orientation
  • Network Info
  • Location (GPS)
  • Accelerometer
  • Power button simulation
  • Screenshot
  • Camera
  • Multi-touch

Read more