e2e testing an AngularJS app using Protractor

This blog provides you an idea about how to test your Client side AngularJS app using Protractor, through a small example 

Introduction:

  1. End-to-end (e2e) testing is an integration testing approach that checks if a system or feature (as a combination of intertwined modules) functions as expected. Testing your web-sites for its functionality like a real time user is the essence of e2e tests.
  2. As your application grows it becomes necessary to automate your testing style and test for all the edge conditions that might occur. E2e testing incurs minimalistic time requirements and is flawlessly beneficial for testing your Angular app.

Using Protractor:

  1. Protractor and its purpose for e2e testing purpose is best explained in the following links: Protractor and AngularJS e2e testing (explains how AngularJS apps are tested using Protractor).
  1. Protractor is build around Selenium WebDriver which will automate the browser to run your tests. So, it contains all the features that are available with Selenium WebDriver.
  2. Protractor has a config file that has all the necessary configuration settings. I have set ‘browserName’ to ‘Chrome’ as a capability for the WebDriver (for viewing my tests in Google Chrome).

Sample Form validation code for a ‘signup’ page:

 

DOM for testing:

<form name="loginForm" on-submit="login()">
<input type="text" name="j_username" placeholder="Email" ng-model="userInstance.email" autofocus="" title="Please enter email">

<input type="password" name="j_password" ng-model="userInstance.password" placeholder="Password"> 
<div id="signup-alert">The code you provided is not found as invite code</div>

<button type="submit">Login</button>

</form>

Protractor defines a spec file for writing tests. Here, I am presenting a code snippet for testing validation of the above form elements:

 

My actual test is to check if the HTML element on form with id: ‘signup-alert’ contains the text: ‘The code you provided is not found as coupon or invite code’, which is hidden initially and will only be displayed on successful login.

describe('Signup form submission', function () {
       var email = element(by.model('userInstance.email'));
       var password = element(by.model('userInstance.password'));
       var registerButton = element(by.buttonText('Login'));
       it('Should not work with invalid referral code', function() {
           // Open the url in the browser
           browser.get('be.xyz.com/#/?overlay=auth&tab=signup');  
           email.sendKeys(randomEmail);
           password.sendKeys('admin@13');
           registerButton.click();
           element(by.id('signup-alert')).getText().then(function(value) {
               expect(value).to.contain('The code you provided is not found as invite code');
           });
        });
});
 

Protractor uses Jasmine testing framework by default.

In the above code, Mocha syntax (based on JavaScript) is followed. I am using the Mocha testing framework since, it uses Chai assertion library in which you chain together natural language assertions. I find Chai assertions very comprehensive and readable. Mocha options are to be set in the ‘protractor.conf.js’  the protractor config file.

Understanding the above code:

describe: Used to a group together a chunk of test cases w.r.t a particular web-page or functionality. Its basically referred to a the test-suite.

it: This block is used to specify a test case.

browser: Is a global created by Protractor, which is used for browser-level commands such as navigation with browser.get.

expect: Chai comes with 3 different assertion flavors. It has the should style, the expect style, and the assert style. The expect style is similar to Jasmine. It does the actual testing, if one such expectation/assertion fails the entire test case fails and no further lines are executed after this.

Also, you can use: beforeEach() and afterEach() hooks to initialize or clean-up the testing setup.

element(): A helper function for finding and interacting with DOM elements on the page you are testing. Every element that is queried from the form is selected using various locators.

by: A collection of element locator strategies.

For example:

element(by.model('xyz')): This piece selects only that element whose ng-model is named as ‘xyz’ (i.e scope.xyz variable in your Angular code).

Similarly,

element(by.buttonText(‘xyz’)): will select a button whose text matches the one that’s provided as a parameter to it.

Testing time:

Finally, go to the command  prompt or terminal and fire protractor command. Chrome browser will open and quickly perform your test.

If the test passes the given condition then the assertions can be seen on the command prompt from where you have fired your test.

About CauseCode: We are a technology company specializing in Healthtech related Web and Mobile application development. We collaborate with passionate companies looking to change health and wellness tech for good. If you are a startup, enterprise or generally interested in digital health, we would love to hear from you! Let's connect at bootstrap@causecode.com
Have you subscribed to our blogs and newsletter? If not, what are you waiting for?  Click Here

Leave a Reply

Your email address will not be published. Required fields are marked *

SUBSCRIBE!

Do you want to get articles like these in your inbox?

Email *

Interested groups *
Healthtech
Business
Technical articles

Archives