The execution of web pages generally involves three tasks: fetching resources, page layout and rendering, and JavaScript execution. Apart from these, sometimes websites need to track user behaviors so they need many third party integrations and this may affect page load time. Also, we can have different problems like javascript, instability, etc. We can filter all these things using BroserMob Proxy.

In this post, we will go over with how can we get performance related data from selenium test scenarios & integrate them with browsermob proxy.

Outline

  • Page Load & Bandwith & Latency Relation
  • What is BrowserMob ?
  • BrowserMob Features
  • What is HAR ?
  • Creating Profile
  • Creating a Selenium project using BrowserMob
  • Chrome Developer Tools

Page Load & Bandwidth & Latency Relation

2016-04-01_00-12-09

(Picture from High Performance Browser Networking)

Latency:  The time from the source sending a packet to the destination receiving it.

Bandwidth:  Maximum throughput of a logical or physical communication path.

What is BrowserMob?

BrowserMob proxy is a free tool that supports monitoring and manipulating the network traffic from web applications. You can download from https://github.com/lightbody/browsermob-proxy

Some of features

The proxy is programmatically controlled via a REST interface or by being embedded directly inside Java-based programs and unit tests. It captures performance data in the HAR format. In addition, it can actually control HTTP traffic, such as:

  • black-listing and white-listing certain URL patterns
  • simulating various bandwidth and latency
  • remapping DNS lookups
  • flushing DNS caching
  • automatic BASIC authorization

What is HAR?

The HAR format is based on JSON, as described in RFC 4627.
Har is an open format for exporting HTTP tracing information called HTTP Archive (HAR).
It is possible to generate Har files using Firefox, Firebug and NetExport together.
​The data stored as a JSON document.

What kind of information we can get from har file:

  • DNS information load time
  • ​Each object requested (load time)
  • Connection time to server
  • From server to browser (load time)
  • Object is blocked or not

Some of HAR object types log, creator, browser, pages, page timings, etc.

We can check har file results using different tools:

HAR viewer is a free and open-source (PHP + JavaScript) application, which you can host yourself.

2016-03-31_22-45-37

2016-03-31_22-47-47

The gem will start a local server and automatically open a browser tab to view the HAR file.

If you go to harviewer website, copy and past your .har file inside & you will get an interactive timeline.

2016-03-27_22-34-29

2016-03-31_22-56-50

 

2016-03-31_21-55-41

Part of my HAR file created by WebDriver.

You can format the file using Notepad++ json viewer plugin, you can get more information about har specification from here.

Installing BrowserMob Proxy

First, we need to download BrowserMob proxy from here or github & extract the content.

If you are running from the command line, make sure to run the browsermob-proxy executable with the --use-littleproxy true

Create a project using Eclipse:

Click to add external JARS, add BroswerMob Proxy and Webdriver jars.

If you’re using Maven, you can add this to your pom.xml:

check location of har file:

2016-04-02_21-09-42

Testng report result:

2016-04-02_21-10-29

You can check new browsermob proxy interface and its methods from this link 

Chrome Developer Tools: 

2016-03-21_21-11-35

  • Copy All as HAR: Copies all resources to the system clipboard as HAR data. A HAR file contains a JSON data structure.
  • Save as HAR with Content: Saves all network data to an HAR file along with each page resource.

2016-03-30_11-51-19

Chrome Developer Tools, go to Network tab, and make sure you’ve selected the Preserve log checkbox, otherwise the log is reset when you change page.