Telerik blogs

Telerik Mobile Testing – AppBuilder Case Study

February 28, 2014 Productivity, Testing 0 Comments


Last time we automated a native Android application with Telerik Mobile Testing. Now it's time for AppBuilder. Once again I will make it testable, develop a test plan, write and execute tests, and publish results to the Telerik Platform.

The App-Under-Test

This case study uses a simple application called Comments, created with Telerik AppBuilder and Backend Services. The main screen displays existing comments from the data source, and new comments are added on the second screen.

Android Version

Main screen
 Add comment
 Comment entered
Main screen Add comment Comment entered

 

iOS Version

Main screen
 Add comment
 Comment entered
Main screen Add comment Comment entered

 

Prepare App for Automation

There are four HTML element types I plan to interact with: link, unordered list, textarea, and div. I applied a unique id attribute to each element for easier element identification later.

HTML - ID

Add Testing Extension

I configured the AppBuilder application to be testable based on these instructions. Next I deployed the Android and iOS builds to a Samsung Galaxy S III and an iPhone 5, respectively.

Download Companion App

I need the Mobile Testing companion app to test a hybrid app. I downloaded it from Google Play on the Android device, and from the App Store on the iOS device.

Create a Test Plan

There are five functional scenarios I want to test through automation:

  1. Add a new comment and verify it appears in the list.
  2. Delete the new comment and verify it is not in the list.
  3. Cancel a new comment and verify it is not in the list.
  4. Submit an empty comment and verify it will not save.
  5. Ensure the comment input field clears after canceling.

Write Tests

Create JavaScript File

I started by creating a new JavaScript file. Code may be written to that file using any IDE or text editor. I prefer Sublime Text.

Start with the main spec method:

spec(function(){
  
});

 

Query Repository

Next comes the Query Repository. I defined the queries for all the elements here and assigned each to a variable.

var queries = {
    deleteBtn: { id: 'deleteBtn' },
    addBtn: { id: 'addBtn' },
    cancelBtn: { id: 'cancelBtn' },
    saveBtn: { id: 'saveBtn' },
    commentText: { id: 'commentText' },
    textRequired: { id: 'textRequired' },
    listview: { id: 'listview' }
};

 

Here I defined a few static variables used later in the test steps.

var d = new Date();
 
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
 
var time = h.toString() + m.toString() + s.toString();

 

Step Repository

The bulk of the code comes next via the Step Repository. Each step is labeled with a friendly name, followed by platform-specific operations. Use default for steps that apply to both platforms.

These steps perform the actions and verifications against the application's elements, which are referenced via the query repository. You'll see things like launching the app, tapping links, setting text, and verifying text.

var stepRepository = {
        "Launch app": {
            'ios': [
                ios.launch('Comments://')
            ],
            'android': [
                android.launch('com.telerik.Comments')
            ]
        },
 
        "Tap Delete": {
            'default': [
                web.wait(1000),
                web.tap(queries.deleteBtn)
            ]
        },
 
        "Tap Add": {
            'default': [
                web.tap(queries.addBtn),
                web.wait(1000)
            ]
        },
 
        "Tap Cancel": {
            'default': [
                web.tap(queries.cancelBtn)
            ]
        },
 
        "Tap Save": {
            'default': [
                web.tap(queries.saveBtn)
            ]
        },
 
        "Enter comment": {
            'default': [
                web.setValue(queries.commentText, time)
            ]
        },
 
        "Verify text is required": {
            'default': [
                web.getTextContent(queries.textRequired, function(res){
                    assert(res).equals("Required field.");
                })
            ]
        },
 
        "Verify textarea is blank": {
            'default': [
                web.getTextContent(queries.commentText, function(res){
                    assert(res).equals("");
                })
            ]
        },
 
        "Verify new comment in list": {
            'default': [
                web.getTextContent(queries.listview, function(res){
                    assert(res).contains(time);
                })
            ]
        },
 
        "Verify new comment not in list": {
            'default': [
                web.getTextContent(queries.listview, function(res){
                    assert(res).not.contains(time);
                })
            ]
        }
    };

 

Test Suite

Finally comes the Test Suite. A suite is a group of tests, labeled with a friendly name, that calls the step repository. Each test is also labeled and contains steps, referenced by their friendly names from the step repository.

Based on the test plan I created earlier, I simply mix and match steps to create each test.

describe("Comments", function(){
 
    test("Add a new comment and verify it is in the list", function(){
        step("Launch app");
        step("Tap Add");
        step("Enter comment");
        step("Tap Save");
        step("Verify new comment in list");
 
    });
 
    test("Delete new comment and verify it is not in the list", function(){
        step("Launch app");
        step("Tap Delete");
        step("Verify new comment not in list");
    });
 
    test("Cancel comment", function(){
        step("Launch app");
        step("Tap Add");
        step("Enter comment");
        step("Tap Cancel");
        step("Verify new comment not in list");
    })
 
    test("Ensure text area requires input", function(){
        step("Launch app");
        step("Tap Add");
        step("Tap Save");
        step("Verify text is required");
        step("Tap Cancel");
    });
 
    test("Ensure text area clears on cancel", function(){
        step("Launch app");
        step("Tap Add");
        step("Enter comment");
        step("Tap Cancel");
        step("Tap Add");
        step("Verify textarea is blank");
        step("Tap Cancel");
    });
 
}, stepRepository);

 

Execute Tests

It's time to execute the tests via the Test Runner.

  1. Click Settings and change the Spec Folder path to where your test resides.
  2. Click Save and notice the suite and tests are displayed by their friendly names.
  3. Launch the Mobile Testing app on the device and connect it.
  4. Click Refresh Agents.
  5. Click Run Tests.

Tests

In this case, I executed the agents separately to avoid conflicts with data deletion.

Publish Results

The Results tab loads when execution finishes. All tests passed!

iOS results

Android results

I can additionally publish results to the Telerik Platform for storage and to share with colleagues, managers, and stakeholders.

Conclusion

That's it! The handy query and step repository method makes it easy to add new queries and tests when I add new elements and features to my application.

Stay tuned for the next case study on a mobile Web app.

About the Author

Anthony Rinaldi

Anthony Rinaldi

is the Product Manager of Telerik Mobile Testing. He combines his experience in test automation and quality assurance with his passion for mobile devices and platforms. He is an avid CrossFitter, soccer player, and music fan.

AppBuilder, Mobile Testing, Testing

Related Posts

Web Productivity Testing Vue

Best Practices for Testing Vue Applications

Productivity Testing

Keys to Testing Effectively in Short, Rapid Cycles

Productivity Testing

Is Automated Testing a Good Idea? What Should You Keep in Mind?

Comments

Comments are disabled in preview mode.