Telerik blogs

Telerik Mobile Testing – Web Case Study

by Anthony Rinaldi
March 03, 2014 Productivity, Testing 0 Comments


Last time we automated a hybrid AppBuilder application with Telerik Mobile Testing. Now it's time for Web. 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 sushi ordering application created with Telerik Kendo UI. The home screen displays menu items from the data source, which can be added to the cart and submitted..

Home screen Shopping cart My account

 

Prepare App for Automation

The are three HTML element types I plan to interact with: link, span, and header. Most have a unique id attribute for easier element identification later. Those without can be located with className and index.

Add Testing Extension

I configured the Web application to be testable based on these instructions. Next I ran the app locally with Node.js. If you're curious how this done, see the following file in our download bundle:

  • /samples/Web/DemoApplication/demo_webserver.js

Create a Test Plan

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

  1. Redirect the browser to the site under test.
  2. Go to the Account page and toggle settings.
  3. Add the first menu item to the cart, verify the total price, and submit the order.
  4. Add two menu items to the cart, remove one, and verify the lower price.

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, assigned each to a variable, and separated them by section.

var queries = {
 
    tabstrip: {
        home: { id: "home" },
        cart: { id: "cart" },
        account: { id: "account" }
    },
     
    items: {
        sashimiSalad: { className: "details-link", index: 0 },
        seaweedSalad: { className: "km-button", index: 2 },
        edamame: { className: "km-button", index: 3 }
    },
 
    itemDetails: {
        orderBtn: { id: "add-to-cart" },
        addedSpan: { id: "added" }
    },
 
    cart: {
        total: { id: "total" },
        checkoutBtn: { id: "checkout" },
        deleteBtn: { className: "red-button km-button", index: 1 },
        thanks: { id: "thanks" },
        doneBtn: { id: "done-button" }
    },
 
    account: {
        productsSwitch: { className: "km-switch-label-on", index: 0 },
        promosSwitch: { className: "km-switch-label-off", index: 1 }
    }
 
};

 

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

var CURR_DOMAIN = "http://localhost:1234/";
var PREP_DOMAIN = "http://localhost:1234/agent/TelerikTestingPrepareDomain.html";

 

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. This example only uses Web operations.

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, and verifying text.

var stepRepository = {
         
        "Redirect to site under test": {
            web: [
                web.prepareDomain(PREP_DOMAIN),
                web.navigateToUrl(CURR_DOMAIN),
                web.wait(500),
                web.waitForUrl(CURR_DOMAIN, 5000)
            ]
        },
 
        "Get details for Sashi Salad": {
            web: [
                web.tap(queries.items.sashimiSalad)
            ]
        },
 
        "Add Seaweed Salad": {
            web: [
                web.wait(500),
                web.tap(queries.items.seaweedSalad)
            ]
        },
 
        "Add Edamame": {
            web: [
                web.wait(500),
                web.tap(queries.items.edamame)
            ]
        },
 
        "Tap Order button": {
            web: [
                web.wait(500),
                web.tap(queries.itemDetails.orderBtn)
            ]
        },
 
        "Tap Menu button": {
            web: [
                web.tap(queries.tabstrip.menu)
            ]
        },
 
        "Tap Cart button": {
            web: [
                web.tap(queries.tabstrip.cart)
            ]
        },
 
        "Tap Account button": {
            web: [
                web.tap(queries.tabstrip.account)
            ]
        },
 
        "Tap Done button": {
            web: [
                web.wait(500),
                web.tap(queries.cart.doneBtn)
            ]
        },
 
        "Tap Checkout button": {
            web: [
                web.wait(500),
                web.tap(queries.cart.checkoutBtn)
            ]
        },
 
        "Tap Delete button": {
            web: [
                web.wait(500),
                web.tap(queries.cart.deleteBtn)
            ]
        },
 
        "Tap Products switch": {
            web: [
                web.wait(500),
                web.tap(queries.account.productsSwitch),
                web.getTextContent(queries.account.productsSwitch, function(res){
                    assert(res).equals("on");
                })
            ]
        },
 
        "Tap Promos switch": {
            web: [
                web.wait(500),
                web.tap(queries.account.promosSwitch),
                web.getTextContent(queries.account.promosSwitch, function(res){
                    assert(res).equals("off");
                })
            ]
        },
 
        "Verify item added to cart": {
            web: [
            web.getTextContent(queries.itemDetails.addedSpan, function(res){
                    assert(res).equals("Item added to cart");
                })
            ]
        },
 
        "Verify total is $12.00": {
            web: [
            web.getTextContent(queries.cart.total, function(res){
                    assert(res).equals("$12.00");
                })
            ]
        },
 
        "Verify total is $4.00": {
            web: [
            web.getTextContent(queries.cart.total, function(res){
                    assert(res).equals("$4.00");
                })
            ]
        },
 
        "Verify order processed": {
            web: [
            web.getTextContent(queries.cart.thanks, function(res){
                    assert(res).equals("Thanks for shopping!");
                })
            ]
        },
    };

 

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("Sushi tests", function(){
 
    test("Redirect to SUT", function() {
        step("Redirect to site under test");
    });
 
    test("Change account settings", function(){
        step("Tap Account button");
        step("Tap Products switch");
        step("Tap Promos switch");
    });
 
    test("Order first item and verify success", function(){
        step("Get details for Sashi Salad");
        step("Tap Order button");
        step("Verify item added to cart");
        step("Tap Cart button");
        step("Verify total is $12.00");
        step("Tap Checkout button");
        step("Verify order processed");
        step("Tap Done button");
    });
 
    test("Edit shopping cart", function(){
        step("Add Seaweed Salad");
        step("Add Edamame");
        step("Tap Cart button");
        step("Tap Delete button");
        step("Verify total is $4.00");
    });
 
}, 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. Click Add Agents and navigate your mobile browsers to the provided URL.
  4. Click Refresh Agents.
  5. Click Run Tests.

Publish Results

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

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.

Mobile Testing, Testing, Web
About the Author

Anthony Rinaldi

Anthony Rinaldi 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.

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.