Testing Sencha Applications using Sencha Test


senchatestimage

Problem Statement

Automating Ext JS Application testing is often tricky because of the dynamically generated HTML elements. For example, a combo box in Ext JS is not simply a <select> element, but a text input with a detached drop down list. 

When you think about a tool, which can handle dynamically generated HTML Elements, Unit Testing and End-to-End Testing on multiple browsers, simultaneously; Sencha Test looks like an obvious choice. Sencha Test is extensively used for testing Ext JS Single Page Applications and it leverages powerful Jasmine testing framework, which is used to test Javascript and has rich APIs to handle HTML elements.

Overview

Sencha Test is an automation tool that is used for testing Ext JS applications. This tool consists of two applications :

  1. Sencha Studio (GUI), which uses a Workspace to organise tests and  has a default test suite as ‘jasmine’ for writing tests.
  2. Sencha Test command or STC (for Command line)

As of now, Sencha Test supports

  1. Running scripts on remote browsers using browser farms
  2. Event Recorder and
  3. Code Coverage

This article explains Sencha Test Studio setup and a quick test for verifying the login feature in SenchaTutorials application.

In this article, we will talk about:

  1. How to create a workspace and configure tests in Sencha Studio?
  2. How to create a Jasmine test suite for writing tests?
  3. Test script for login screen for Sencha application
  4. How to run the scripts  and see the results?

Pre-requisites:

  1. Javascript knowledge to write tests
  2. Jasmine knowledge is required
  3. Basic knowledge on Sencha Ext JS

Getting Ready

  1. Sencha Test can be downloaded from Sencha website https://www.sencha.com/products/test/#overview
  2. You need to sign up with your Email ID to activate your licence.
  3. Start the Sencha Test after it is activated.

gettingstarted

Creating a Workspace and configuring tests in Sencha Studio

  1. Click on File New Workspace… menu

createworkspace

2. Give the name and destination path for the workspace and click on OK button, as shown below :

sencha1

3. Sencha Studio displays its content in its project navigation tree as shown in the below diagram.
sencha2

4. Configure the test project by selecting Tests node as shown below :

sencha3

5. To launch the application from Sencha Studio, In Project Settings, specify (URL). We will disable global leak detection by setting * as Allowed Globals and default test framework as Jasmine. Refer to Sencha Test Docs for more information.

sencha4
6. Nodes under the Tests node in the tree are called the Scenarios. By default, a new test project is given a “Unit Tests” scenario, where we have changed it to Authentication as we would be using it to test the SenchaTutorials authentication

sencha5
The same is reflected in the Studio:

sencha6

Creating a Jasmine test suite for writing tests

1. Right click on the scenario under Tests node and create a new Jasmine Test Suite, as shown below :

sencha7

2. Specify a name for your test suite, say, LoginTest and click on OK button.

sencha8

3. Observe that a new node is added under the scenarios as shown below:

sencha9

Script for validating login screen

  1. Below is the Jasmine code to test login feature for SenchaTutorials application:
describe(“LoginTest”, function () {
   var expected = ‘Username and password do not match or you do not have an account yet.<br> If the problem persists, write to  <a href=”mailto:support@walkingtree.in”>Support Team</a>’;
   
   it(“InvalidCredentials and validate failure message”, function () {
       // Giving invalid credentials
       ST.element(“//input[@name=’username’]”) // Get username field element reference using locator
           .type(“testing@walkingtree.tech”); // Enter userid in the username field
       ST.element(“//input[@name=’password’]”)
           .type(“esting”); //Get password field element reference using locator and enter password

       // Firing click event on sign in button component
       ST.component(“//a[contains(@class,’x-btn signintext’)]/span”)
           .click(10, 10).wait(2000).and(function () {
               // Get Error message text
               var text = ST.find(“//span[contains(text(),’Username and password’)]”).innerHTML;
               // Compare it with the expected
               expect(text).toMatch(expected);
           });
   });

   it(“ValidCredentials”, function () {
       // Giving invalid credentials
       ST.field(“//input[@name=’username’]”).type(“testing@walkingtree.tech”); //Get Username field element reference using locator and enter Username
       ST.field(“//input[@name=’password’]”).type(“testing”); // Get password field element reference using locator and enter password

       // Firing click event on sign in button component
       ST.component(“//a[contains(@class,’x-btn signintext’)]/span”)
           .click(10, 10).wait(6000).and(function () {
               // Get Error message text
               var elementRating = document.getElementsByClassName(‘forum faq’);
               // Compare it with the expected
               expect(elementRating.length).toBeGreaterThan(0);
           });
   });
});

 

Running tests and seeing the results

1. To run our tests, click on the scenario (Authentication) in the tree node.

2. An interactive Test Runner is launched, which consists of all the local browsers and test suites.

3. Select a test suite, the list of browser and click on Run button.

 sencha10

4. The below image shows how the results of the tests are displayed in test runner.

sencha11

On successful execution of the test script, a user will be logged into SenchaTutorials and shall see the tutorials, as shown below:

sencha12

5. The test runner allows  to select specific tests, execute them in parallel against multiple browsers and see the results in real-time.

6. To verify the code coverage, select a test suite, the browser and click on Coverage.

sencha13

7. Sencha Test uses Istanbul for code coverage to determine how much of our code has been tested as part of a test script. HTML reports showing a detailed coverage are generated as shown below:

sencha14

Summary

In this article, we discussed about setting  up Sencha Test tool. We also looked at writing tests in Jasmine suite, generating reports post test execution, code coverage and view results in Sencha Studio. Hope this will get you started with Sencha Test and do reach out to us for any question/suggestion.

WalkingTree’s Professional Services team have in-depth experience in  developing and managing enterprise applications built using frameworks like Ext JS and Angular. We also helped number of our customer in migrating their applications from older version of Sencha to the latest version. We would love to connect with you and help you make effective use of the awesome framework!

References

 

Tagged with: , , , , , ,
Posted in Sencha ExtJS, Sencha Test, Sencha Tutorials, Test Automation

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out https://walkingtree.tech/index.php/blog for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: