E2E testing of Angular Websites using protractor to overcome synchronization issues.

1. Selenium Driver dost not have methods/featues to locate elements based on Angular specific properties/locators. Locators such as waitForAngular, By.binding, by.repeater and so on.
2. protracter is a wrapper over webdriverJS and provide support to find angular specific elements.
3. To overcome Synchronization issues while automating Angular(JS) application with selenium webdriver.
4. Protractor allows Asynchronization which allows multiple things to happen at the same time.

1. WebdriverJS is the javascript binding for the selenium webdriver API.
2. Protractor is a wrapper around WebDriverJS. It can use a function of webdriverjs and has additional features to handle Angular locators/elements
3. Both WebdriverJS and Protractor are node.js application.
4. Also protractor executes commands to ensure application is stabilized before performing any action on the browser.

First, Install Node.js

Click Here

Check the version of the node and npm in CLI.

Now Check if Environment path is setup or not. If not do it manually.

Second, Install Protractor

Command:

npm -g protractor

protractor --version

npm is the package manager of node and -g flag is used to download protractor globally.

Third, Install all the Webdrivers

Command:

webdriver-manager update

First, Go to the basic project available in protrator directory.

Path in my System => C:\Users\Dell\AppData\Roaming\npm\node_modules\protractor\example

Open CMD and go to this particular path tu run the test cases for the angular websites.

Website here is taken=> "https://angularjs.org/"

Here, example_spec.js file consists the test cases while conf.js consist the configuration how to run the test cases like name of the browser.

Command:

protractor conf.js

Source Code =>

OutPut=>

First, cmd command

Second, script execution results

Prerequisite:
IDE - "Integrated Development Environment"

Download and Setup Visual Studio Code
Download VSC

After setup install support for JavaScript & Typescript in Visual Studio Code.

Now, Create a directory and open in VSC. Inside that create two Folder i.e conf and tests
Earlier we discuss an default example provided by angular community. We will run the same example using this IDE we setup with built-in CMD.
Go to the default example location. In my system location is "C:\Users\Dell\AppData\Roaming\npm\node_modules\protractor\example" and store the configuration and testing file accordingly show below.

Open CMD in Visual studio code and run the script for automate testing.

Command:
        protractor .\conf\conf.js

Click Here for the Source Code

Jasmine Cheat sheet Protractor API Doc

Website => Super Calculator

First, Create a calculator.js file to write the test cases. let's save this file inside test directory.
Second, create conf.js file to configure jasmine framework and call the test file.

Source Code =>
describe('Demo calculator test',function(){
    it('Addition Test', function(){
        browser.get('http://juliemr.github.io/protractor-demo/');
        element(by.model('first')).sendKeys('3');
        element(by.model('second')).sendKeys('2');
        element(by.css('[ng-click="doAddition()"]')).click();
        let result = element(by.cssContainingText('.ng-binding', '5'));
        expect(result.getText()).toEqual('5');
        browser.sleep(5000);
        
    });
});

In above Source Code, we have write the test case for an addtion similar can be go for substraction and so on.
Now, Go on cmd inside your VCS and use command "protractor .\conf\conf.js" and run it.
If test case is successful we will see a greene dot in console.

1. some global functions protractor exposed.
   a.element
   b.element.all
   

Let's take an Example of Super calculator website.

Here if have to enter a value in first box we have to inspect it and find that element using locators.
one of the locator is model

Syntax =>
element(by.model('first')).sendKeys('3');  // here first is value of ng-model

To learn more about Locators Click Here

Note => If want to know about best locator for that particular element we can use a chrome extention i.e. ""POM Builder – Auto-generate CSS/XPath Locator""

Click on suggested locator and copy it in your file. we will see thats the best locator for that WebElement.

Second Extention is "Protractor recorder" here if we do some task on that websites it records it and generate the test case. It's an old extention so it might not be an optimum solution.

Third Extention is "Selenium IDE" it is also same as Protractor recorder but most useful and reliable and stable.

Protractor Cheatsheet API

Page Object Model (POM) is a design pattern that creates an Object Repository for web UI elements and is widely used in test automation. The model has the advantage of reducing code duplication and improving test maintenance.

Here =>

1. We separate objects/element locators and actions in separate files.
   
2. Test Scripts can refer element locators and actions from these files.
   

Lets create a file by name pom.js inside page directory. Follow the below structure

pom.js source Code => (locators and actions are defined here)

let pom = function(){

   let firstnumber_input =  element(by.model('first'));
   let secondnumber_input =  element(by.model('second'));
    let gobutton = element(by.css('[ng-click="doAddition()"]'));
    this.get = function(url){
        browser.get(url);
    };
    this.enterFirstNumber = function(firstno){
        firstnumber_input.sendKeys(firstno);
    };
   
    this.enterSecondNumber = function(secondNo){
       secondnumber_input.sendKeys(secondNo);
    };
    this.clicGo = function(){
        gobutton.click();
    };
    this.VerifyResult = function(output){
        let result = element(by.cssContainingText('.ng-binding', output));
        expect(result.getText()).toEqual(output);
        console.log('frefrvgr');
    };
};

module.exports = new pom();

calculator.js =>

let pom = require('../Page/pom');

describe('Demo calculator test',function(){
    it('Addition Test', function(){
        // browser.get('http://juliemr.github.io/protractor-demo/');
      pom.get('http://juliemr.github.io/protractor-demo/');

        // element(by.model('first')).sendKeys('3');
      pom.enterFirstNumber('5');



        // element(by.model('second')).sendKeys('2');
      pom.enterSecondNumber('5');
        
      // element(by.css('[ng-click="doAddition()"]')).click();
        pom.clicGo();

        pom.VerifyResult('10');
        browser.sleep(5000);
        
    });
});

IF here after adding two numbers the ouptut is same as expected by user. the test case will pass.
Or say if test case doesn't meet the required conditions.

If test case passes it shows a green dot which indicates all the test cases have been successsed.

Click Here To Go To Project

Reporter for Protractor that will capture a screenshot after each executed test case and store the results in a HTML report.

First, Download the dependencies for both using CLI.
Click here for doc
OR
use this command => npm install protractor-jasmine2-screenshot-reporter --save-dev

Second, Open VSC and configure your configuration file.
Configurations:

var HtmlScreenshotReporter = require('protractor-jasmine2-screenshot-reporter');

var reporter = new HtmlScreenshotReporter({
  dest: 'target/screenshots',
  filename: 'my-report.html'
});

exports.config = {
  // ...

  // Setup the report before any tests start
  beforeLaunch: function() {
    return new Promise(function(resolve){
      reporter.beforeLaunch(resolve);
    });
  },

  // Assign the test reporter to each running instance
  onPrepare: function() {
    jasmine.getEnv().addReporter(reporter);
  },

  // Close the report after all tests finish
  afterLaunch: function(exitCode) {
    return new Promise(function(resolve){
      reporter.afterLaunch(resolve.bind(this, exitCode));
    });
  }
}

Third, After adding open terminal in VSC and run conf.js file in Built-in CLI.

Report Generated

Click Here For the Source Code

First, Download dependency in CLI.
Click Here For Doc
OR
type => npm i jasmine-allure-reporter

Second, Configure your conf.js to call the allure report generator.

 var AllureReporter = require('jasmine-allure-reporter');
    jasmine.getEnv().addReporter(new AllureReporter({
      resultsDir: 'allure-results'
    }));

Add above configuration in onPrepare method present in conf.js

Third, check allure-reports are generated or not:

In above output, we can see the allure-report directory has been generated and the report generates is in xml Document.

Fourth, To generate allure report in HTML extension add "allure command line tool"

Click Here For Doc
OR
type => npm i allure-commandline

Notes:
For this allure command line tool we need java 8 or above version

Fifth, Now go to the allure report directory in my local machine path is "C:\Users\Dell\Desktop\Protractor & Angular\Protractor-POM\allure-results"
From here open CMD upto this above path and to generate HTML report use below command.

allure serve C:\Users\Dell\Desktop\Protractor & Angular\Protractor-POM\allure-results -o "C:\Users\Dell\Desktop\Protractor & Angular\Protractor-POM\"

OR go upto "C:\Users\Dell\Desktop\Protractor & Angular\Protractor-POM" and follow

allure server

Notes Here, -o represent the location where we want to store HTML report file. By default it will store in allure generated directory.

First, go to file > Add folder to workspace> select folder which wanna integrate with git&github.
Second, go to source control or ctrl+shift+G and initialize the repository.

Now, you will see the add initialized and uncommit. before that we can add file to .gitignore which we do not want to push. just right click and click on add to .gitignore.

You, will see .gitignore file has been created

Click at push button present at right side of the branch name or right click and then push it.

Go to your github we see our repository has been deployed.
Click Here
OR
https://github.com/kushagra67414/Protractor-POM

Prerquisite: install and setup jenkins and GitHub in your machine
Here, we will run our tests using jenkins while source coed will be fetch from github and in jenkins configuration we have provide the path to store the outputs generated in local Host.
Now, open your jenkins, create a job with freestyle project and configure it. Follow the below screenshot.

GitHub Repo link:
https://github.com/kushagra67414/Protractor-POM

Output generated by jenkins:

Here, first we need to download Allure plugin in jenkins.
Go to manage jenkins> manage plugins > search allure plugin.

Second, go to manage jenkins > Global Tool Configuration > setup allure commandline
Follow the below screenshots

Note:
JDK8 or above must be install and path must be set in environment variable.

Third, Create a job in jenkins of a freestyle project and configure it.
a. provide github repository to fetch source code.
b. command to activate the protractor.
c. path where to store the allure-reports

Github Repository:
https://github.com/kushagra67414/Protractor-POM

Configurations:

Build outputs:

Here, we can see some of our test are success while some are not.

Allure reports in jenkins: