E2E Testing with Protractor

Introduction

Testing front-end applications has become an important task for today’s Full Stack Developers. Not only do you want to ensure that your application’s internal code operates correctly, but you also want to validate the in-browser behavior. This article will show you how to achieve this by Protractor.


What is E2E testing?

End-To-End (E2E) testing is all about testing your application against specific scenarios. From a requirements-engineering-perspective you’d call those User Stories. Essentially, these stories describe a series of actions a user performs to achieve a certain goal. So by assembling a bunch of these – referred to as a test suite – you are able to verify that your web app acts as expected. The key to success, of course, lies in the amount and quality of tests written.

With E2E testing you are not interacting with the app’s code, but with the app’s interface. When performing E2E tests you also need to take into consideration that you are actually testing a real web page. So, compared to unit tests, you will additionally need your web page up and accessible by the browser during test execution. Keep in mind that E2E tests, sometimes also referred to as integration tests, test your app’s system as a whole.


Why protractor?

If a developer has to do E2E testing on his own, the tools and framework which the developer chooses should consider the below criteria to make sense that Developer can do E2E testing

  • Multiple Browser Capabilities.
  • Less time to automate.
  • No tool decencies, since developer already need certain tools to develop the application.
  • Unattended mode of execution.
  • Easy test report generation.

All these criteria’s are satisfied by Protractor.

It is an End-To-End testing framework originally created for the JavaScript front-end framework AngularJS. Under the hood it’s actually a Node.js application, which supports a wide variety of assertion/test libraries like JasmineMocha or Cucumber.

Protractor acts as a wrapper on top of the WebDriverJS-API, which is used to communicate with a Selenium Server, either local (standalone) or remote. The picture below depicts the whole process. Protractor communicates via the WebDriverJS-API (the way to talk to Selenium’s WebDriver API) which is used to translate user interactions into browser understandable instructions.

 image001


How to setup protractor?

Install Nodejs with Installer

Use npm to install Protractor globally with:

npm install -g protractor

Try running “protractor –version” to make sure it’s working.

The webdriver-manager is a helper tool to easily get an instance of a Selenium Server running.

webdriver-manager update

Now start up a server with:

webdriver-manager start

This will start up a Selenium Server and will output a bunch of info logs. Your Protractor test will send requests to this server to control a local browser. You can see information about the status of the server at http://localhost:4444/wd/hub.

Since the scripting language is simple java script, you can use any text editor.

If you look in to the Protractor folder, you can find below files.

todo-spec.js – This file should have the test steps for your E2E scenario.

conf.js – This file deals with your execution of your scenario files.

You can find more details here related to writing scripts and execution.


Protractor as hybrid framework?

Normal any automation framework will need have below supports,

  1. Test data storage mechanism.
  2. Test result reporting mechanism.
  3. Taking screen shots at the failure points.

Test data storage

For any E2E tests we will need variety of data to check its boundary value tests, so we need to perform same test scenarios with different data.

For e.g.

element(by.model(‘userName’)).sendKeys(‘Julie’);

element(by.model(password)).sendKeys(‘Julie_One’);

The above script line will enter the name ‘Julie’ in the text box and password. But we need to send different names and password to check the login successful in the application.

We can write another scenario with the different name with this, but it will consume more time to design and create regency.

So what I will suggest is, we need to parameterise the input data.

Solution 1:

We can use the ‘js’ files to store the data.

Logindata.js

var login = {

‘Set1’ : {

                    loginName : ‘Julie1’,

                    password : ‘Julie_One’

                     }

                     ‘Set2’ : {

                    loginName : ‘Julie2’,

                    password : ‘Julie_Two’

                     }

};

module.exports = login;

Login-scenario.js

var logindetails = require(‘./Logindata);

.

.

.

.

.

element(by.model(‘userName’)).sendKeys(logindetails.Set1.loginName);

element(by.model(password)).sendKeys(logindetails.Set1.password);

Solution 2:

Nodejs supports to use Mysql.

Install MySql Package using npm.

Include the connection strings inside the conf.js

var connection = mysql.createConnection({

host     : authCredential[‘connection’][‘host’],

user     : authCredential[‘connection’][‘user’],

password : authCredential[‘connection’][‘password’],

database : authCredential[‘connection’][‘database’],

port : authCredential[‘connection’][‘port’]

  1. Connect the database when we ever you need to get the data.

connection.connect(function(err){

if(!err) {

    console.log(“Database is connected … \n\n”); 

} else {

    console.log(“Error connecting database :”, err); 

}

});

Solution 3:

npm supports xlsx, so we can use excel sheets to store data.

Right now i am working on how to use excel instead of mysql, in my experience excel is more convenient than any other database, since easy to create data for similar scenarios. Please look this space for more details…


Test Execution Summary

Right now i am using, protractor-html-screenshot-reporter to report the execution summary in html format. It takes screen shots too.


Execution

Multi browser capabilities

I have configured multi browser capabilities by below settings in conf.js file

multiCapabilities: [{

  ‘browserName’: ‘chrome’

}, {

  ‘browserName’: ‘firefox’

}]

You need to install drivers for the browsers you need to test. By default selenium web driver comes with chrome drivers. You have to install drivers for firefox and IE separately.

By Protractor you can execute all the browsers simultaneously.


Specs Setting in Conf file

Protractor supports execution based on the suites.

suites: {

    Admin: ‘login.js’,’EditSetting.js’

User:’login.js’,’ViewSetting.js’

   },

While start execution you need give as below

protractor conf.js –suite Admin


Conclusion

Based on the points I gave in the article, a developer can able to create his/her own E2E scenarios easily

Which will helpful to find the bugs in early stage of the development.

Leave a Reply