Thursday, October 29Be an Automation Engineer

Execute protractor tests using blocking proxy

Before going to seen an example, let us know about blocking proxy.


What is blocking-poxy?

Blocking proxy is a tool which provides some additional functionality for the selenium based automation tools before hitting selenium server. Blocking proxy sits in between our automation code and the selenium server. We can use blocking-poxy to set some barriers to verify few check points before our code could hit selenium server.


How it works in protractor?

Protractor has included blocking proxy with it’s 5.1.0 release as an experimental feature. You can take a look at the change log here.

Feature of blocking-proxy in protractor:
There are mainly 3 major feature provided by blocking-proxy for protractor.

  1. Wait For Angular
  2. Highlight Delay
  3. WeDriver Logging

Wait For Angular: If we are testing an Angular application, Blocking Proxy will automatically block webdriver commands until Angular’s change detection is finished. So that the tests will give consistent results.

Highlight Delay: Highlight delay will make protractor wait for the specified period of time before executing an operation (click, sendkeys) on the element. Also, it highlights the element before interacting with the element. It’s an useful feature for Demonstrating automation scripts.

We can set the highlightDelay in config file.

highlightDelay: 3000

WeDriver Logging: Blocking proxy provides logging facility for all the webdriver commands. The log will be stored as text file in the specified folder.

We can specify the location for storing the log in config file.

webDriverLogDir: 'logs'

The log format will look like below:

22:09:45.618 |   4290ms | 5e01af | NewSession
22:09:50.073 |     10ms | 5e01af | SetTimeouts
22:09:50.503 |    178ms | /session/5e01af84-7ab1-4574-938e-53951f8f75e1/window/current/size
22:09:50.685 |      6ms | 5e01af | SetTimeouts
22:09:50.696 |      6ms | 5e01af | SetTimeouts
22:09:50.752 |  11854ms | 5e01af | Go
22:10:02.645 |   1035ms | 5e01af | FindElements
    Using css selector '.sf-with-ul'
    Elements: 0
22:10:03.694 |   5031ms | 5e01af | FindElements
    Using xpath '//a[@href='']'
22:10:08.784 |    239ms | 5e01af | DeleteSession

Let’s try an example now

1. Update your protractor version to latest:

If you are using older version of protractor updated to latest.

#Global update
npm update -g protractor


#local update
npm update protractor --save-dev

2. Example program:

//Suite in Jasmine
describe('angularjs homepage todo list', function() { 
  // Test in Jasmine
  it('should add a todo', function() { 
    // Entering application url in browser
    // Enter text under TODO input field
    element(by.model('todoList.todoText')).sendKeys('write first protractor test');
    // Clicks on 'Add' button
    // Getting all Todo lists displayed
    var todoList = element.all(by.repeater('todo in todoList.todos'));
    // Asserting the TODO's count as 3
    //Verifying newly entered TODO is added
    expect(todoList.get(2).getText()).toEqual('write first protractor test');

Your config file will look like below:

exports.config = {
    seleniumAddress: 'http://localhost:4444/wd/hub',
    //'seleniumServerJar': '/usr/local/lib/node_modules/protractor/node_modules/webdriver-manager/selenium/selenium-server-standalone-2.53.1.jar',
    capabilities: {
        //'directConnect': true,
        'browserName': 'chrome'
    framework: 'jasmine',
    specs: ['./specs/BlockingproxyExample_Spec.js'],
    jasmineNodeOpts: {
        defaultTimeoutInterval: 999999
    //Enabling blocking proxy
    useBlockingProxy: true,
    //Delaying for 3 sec before interacting with element and hightlighting it
    highlightDelay: 3000,
    //Log file location
    webDriverLogDir: 'logs',
    onPrepare: function () {
        //browser.manage().window().setSize(1500, 600);

In the above config file, the blow things are related to blocking proxy.
useBlockingProxy: true: Enables blocking-proxy
highlightDelay: 3000: Delaying protractor action for 3 seconds and highlighting element.
webDriverLogDir: 'logs': Set ‘logs’ folder as location to save log file.

Note: Don’t forget to create ‘logs’ folder in your project folder where the config.js file is located
Package structure would look like below:

3. How to run:

Run the below command to execute spec.

protractor config.js

Once you trigger the above command, protractor will automatically start blocking proxy. You can see like blow

You can see a log file generated in ‘logs’ folder once after the execution is completed.

Happy Testing!!!

%d bloggers like this: