Protractor for Beginners

Protractor is an end to end test framework for Angular and AngularJS applications. It runs tests against your application in a browser such as Chrome and Firefox

Setting up

Setting up Protractor is straight forward. Pre-requisite

• Install Chrome (recommended) or Firefox
• Install Node.js
• Install Protractor

npm i -g protractor

• Install webdriver-manager

npm i -g webdriver-manager

Create a project folder. In the project folder input this in cmd or terminal. Enter all the way.

npm init

Setup Jasmine (Default reporter for Protractor)

npm i allure-commandline --save-dev
npm i jasmine-reporters --save-dev
npm i jasmine-allure-reporter --save-dev

Create this 2 folders in the project folders

allure-results

allure-report

Config.js and Main.js

Protractor needs two files to run : the test or spec file and the configuration files.

Create 2 files in your project folder - config.js and main.js

In the config.js input this

exports.config = {
  framework: 'jasmine',
    
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['main.js'],


   
    onPrepare: function () {
        var AllureReporter = require('jasmine-allure-reporter');
        jasmine.getEnv().addReporter(new AllureReporter({
            
            resultsDir: 'allure-results'
        }));
        jasmine.getEnv().afterEach(function(done){
          browser.takeScreenshot().then(function (png) {
            allure.createAttachment('Screenshot', function () {
              return new Buffer.from(png, 'base64')
            }, 'image/png')();
            done();
          })
    });
  },
    
    capabilities: {
    'browserName': 'chrome',
    'chromeOptions': {
      args: ['--disable-browser-side-navigation'] 
        }   
    },
    


}

In main.js input this

describe ("Tutorial ", function (){
    
    it ("launch url and business " , async() => {
        
        browser.get("https://marketingplatform.google.com/about/enterprise/");
  
        browser.actions().mouseMove(element(by.css("a[data-g-action='for small businesses'][href='/intl/en_uk/about/small-business/']"))).perform();


        element (by.css ("a[data-g-action='for small businesses: analytics'][href='/intl/en_uk/about/analytics/']:nth-child(1)")).click()
         
    });


});

Execution

You need to setup the webdriver-manager once only.

webdriver-manager update

Before running the script , you need to start the webdriver-manager first

webdriver-manager start

To run the script

protractor config.js

Report

To view the report in Jasmine Allure , input this

allure serve allure-results

Page Object Model

You can convert the existing script to Page Object Model (POM). POM helps to reduce maintenance of scripts and improve readability.

Create a page object file - let's name it homePage.js. We will use launching the url as an example , instead of calling it directly.

var url = "https://marketingplatform.google.com/about/enterprise/";




var home = function () {




         this.launch = function() {

                browser.get (url);

        };

}




module.exports = home

In the main.js we can change the script to

let home = require ('./homePage.js');

  

var homePage = new home();




describe ("Tutorial ", function (){




        it ("launch url and business " , async() => {




                homePage.launch();




        });





});

We have not change much here - except to shift the browser.get to another file and convert it to a method. Then we call it by "home = require ('./homePage.js')

Let me know if you have any questions . I will be glad to answer you - Ivan

Created : 25 October 2019