Data Driven Testing In Protractor

While automating any web application we need to manage the test data as per the test cases. For this purpose, we need to use some persistent data storage like CSV or JSON. We are able to store the data and also we can add and modify that data whenever required.

 

The below image gives you a better picture. We can automate the web application using a protractor and the data required that we can store in the JSON file or files. And, we can retrieve that data while executing the test cases.

 

Here, we will try to understand how we can separate test data with test cases.

 

 

As we all know, Protractor is a JavaScript-based web automation testing framework which is basically developed to test Angular applications. If you are not aware of protractor, then please go through the below URLs to get more understanding on the protractor

 

https://www.protractortest.org

https://angular.io/guide/testing 

https://www.c-sharpcorner.com/article/introduction-to-protractor/

 

Now, let us try to develop one sample protractor and try to integrate a data-driven framework.

 

First, we need to create a protractor automation framework application. We can create a sample JavaScript application, then include any unit testing framework like Jasmine using npm install commands. Then, we can include Selenium or Protractor dependencies and then start the application. I have given you single lines for installation but don’t worry. We will try to install all this stuff with a single install. So for anyone who is not aware of it, the answer is Angular CLI. Please first install Angular CLI on your local machine using this command.

 

npm install -g @angular/cli

 

If you need to understand more of Angular CLI, then please go through the below link.

 

https://cli.angular.io/

 

Using Angular CLI, we can create not only Angular applications but also Protractor readymade projects where we can easily write automation test cases and run without much effort.

 

First, create a sample application using "ng new protractor-sample-app" command.

 

After successful installation, open the new folder protractor-sample-app.

 

Now, open the application in Visual Studio Code.

 

 

Using Angular CLI, you will get the whole project including Angular sample applications, along with unit test cases for each component and service and one separate e2e folder for Protractor.

 

Here, we will focus only on the e2e folder since src is related to Angular application development.

 

So now, we will try to understand the files inside the e2e folder.

 

First, open the protractor.e2e.json file.

// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts

const { SpecReporter } = require('jasmine-spec-reporter');

exports.config = {
 allScriptsTimeout: 11000,
 specs: [
   './src/**/*.e2e-spec.ts'
 ],
 capabilities: {
   'browserName': 'chrome'
 },
 directConnect: true,
 baseUrl: 'http://localhost:4200/',
 framework: 'jasmine',
 jasmineNodeOpts: {
   showColors: true,
   defaultTimeoutInterval: 30000,
   print: function() {}
 },
 onPrepare() {
   require('ts-node').register({
     project: require('path').join(__dirname, './tsconfig.e2e.json')
   });
   jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
 }
};

In the above json file I have highlighted specs, capabilities, baseUrl and framework.

 

We can change this node as per our application requirement.

 

Now, I am only going to change the base URL but before changing the URL, we can run the application using ng e2e command and find out if everything is working fine or not.

 

For this article, I will use https://angularjs.org/ as base URL. Here, we do have one sample Angular application available for automation testing.

 

 

Here, we can add small text and click the add button then new item gets added in the todo list.

 

Open the app.e2e-spec.ts folder.

 

The actual test case we need to write is here:

import { AppPage } from './app.po';

describe('workspace-project App', () => {
 let page: AppPage;

 beforeEach(() => {
   page = new AppPage();
 });

 it('should display website', () => {
   page.navigateTo();
 });
});

app.po.ts

 

Here we can write the page object for the test case

 

I have specified the url:

import { browser, by, element,protractor } from 'protractor';

export class AppPage {
 navigateTo() {
   return browser.get('http://juliemr.github.io/protractor-demo/');
 }
}

Again run the application ng e2e

 

You will get http://juliemr.github.io/protractor-demo/

 

Now, we try to automate this web application.

 

After adding the elements to app.po.ts file,

import { browser, by, element,protractor } from 'protractor';

export class AppPage {
 async navigateTo() {
   return await browser.get('http://juliemr.github.io/protractor-demo//');
 }

 async firstTextEnterData(){
   await element(by.model('first')).sendKeys(1);
 }

 async secondTextEnterData(){
   await element(by.model('second')).sendKeys(1);
 }

 async gobuttonClick(){
   await element(by.id('gobutton')).click();
 }

 async getResult(){
   return await element(by.binding('latest')).getText();
 }
}

And app.e2e-spec.ts,

import { AppPage } from './app.po';
import { async } from 'q';

describe('workspace-project App', () => {
 let page: AppPage;

 beforeEach(() => {
   page = new AppPage();
 });

 it('should display angularjs website', async() => {
   await page.navigateTo();
   await page.firstTextEnterData();
   await page.secondTextEnterData();
   await page.gobuttonClick();
   await page.getResult().then((result) => {
     expect(result).toEqual('2')
   });
 });
});

Here we have hardcoded the data.

 

Now, let us integrate data-driven framework in the protractor application.

 

Here I am going to store data in the JSON file.

 

For this purpose, we need to include some line of code in the tsconfig.json file.

 

In ”compilerOptions” add "resolveJsonModule": true

 

Now, create one data folder and inside that add new JSON file calc.json file.

[{
   "num1":10,
   "num2":10,
   "result":20
},{
   "num1":100,
   "num2":100,
   "result":200
},{
   "num1":1,
   "num2":1,
   "result":2
}
]

Just copy paste the above JSON data in that file.

 

In the app.e2e-spec.ts file, import the JSON file.

import * as calcJson from './data/calc.json';
 calcJson.forEach((item) => {

We need to call the test cases and item is simple object of the list.

 

So, the actual changed code looks like below.

calcJson.forEach((item) => {
   it('Calculator : ' + item.num1 + ' + ' + item.num2 + ' = ' + item.result, async () => {
     await page.navigateTo();
     await page.firstTextEnterData(item.num1);
     await page.secondTextEnterData(item.num2);
     await page.gobuttonClick();
     await page.getResult().then((result) => {
       expect(result).toEqual(item.result.toString())
     });
   });
 });

And from the test case we are passing the test data to page object so we need to modify the firstTextEnterData and secondTextEnterData and we have to pass the data:

async firstTextEnterData(num1) {
   await element(by.model('first')).sendKeys(num1);
 }
 async secondTextEnterData(num2) {
   await element(by.model('second')).sendKeys(num2);
 }

This way we can integrate data driven testing in protractor.

 

Similarly, we can add multiple data files and integrate those with test cases as well.

 

I have uploaded the same application to GitHub.