When hear about the ability to capture meshing traffic by utilize my subsistSeleniumscripts or the headless test framework -PhantomJSscripts, I was excited. A whole new set of test is about to be added to the uninterrupted desegregation (CI) pipeline. We often come across prerequisite when we need to capture and analyze browser net traffic in real time to find HTTP status of the page, examine the head, validate argument, do performance analysis, and more. Just another testing scheme to protect the end-user experience when they are habituate your web application in real time.

What is network traffic?

It includes all the network requests the browser makes when recover and lade the Javascript, CSS, image file, and more for a individual web page. In lay terms, it is the communicating between the browser and server when it is loading a web page.

Why do we need to inspect web application network traffic?

The review of network traffic paints a image of a web page ’ s condition. The painting depart by going to a web page which trigger all the HTTP petition and responses that demand to be collected in real time. To terminate, analyze and quantity activity across all identified pages of your coating.

What to look for when capturing network traffic

Number of HTTP requests- every time mortal visits a web page, the browser transmit with the server that hosts the site. Identify the page in the coating that may have too many HTTP asking, and that could possibly touch the end-user experience by cause users to wait too long for a web page to terminate loading.Test Strategy Rule: Decrease the number of requests per page by expend browser caching.

Load clip of web application page- behind the prospect, the browser fetches and renders multiple resource demand to compose the web page. The resources include text, JavaScript (JS) code, a cascading style sheet (CSS), and more.Test Strategy Rule: To optimize rendering speed, use more efficient CSS chooser, a best page layout, and refactor JS codification.

HTTP response clip- duration from the beginning of the request to the last byte in the response.Test Strategy Rule: Report the resources take & # x27; x & # x27; milliseconds to finish the response.

Status - the HTTP status codefor each request trigger on the web page. What is an HTTP status code? The condition encrypt assistant identify the 2xx success or cause of the problem when a web page or other resource does not lade correctly.Test Strategy Rule: Report the two major grouping of HTTP status codes 4xx node fault and 5xx server errors.

Request and response size- combine the request lintel, response body, and file being delivered by the server.Test Strategy Rule: No icon files greater than 250kb.

Analytics- can be constitute within resource response content.Strategy Rule: Check that comScore analytics are firing on every page of your web application.Focus on areas that can be used to improve your web application performance to protect the end-user experience.

Source: Browser Network Monitoring -

SUSA automates exploratory testing with persona-driven behavior, catching bugs that scripted automation misses.

The technologies behind capturing network traffic

You can use Selenium scripts and headless testing webkits to collect net traffic.BrowserMob Proxy(BMP) is a great utility to beguile execution data easily from browser using live Selenium scripts. The ground for utilise BMP over prove technologies: to artificially copy various bandwidth and latency, for the blacklisting and whitelisting of sure URL patterns, command DNS, and collecting more point about the request and reply content.PhantomJSis a brainless WebKit scriptable with a JavaScript API. It back various web testing characteristic such as headless testing (utilize to launch the tests via a suitable test runner), screen capture, page mechanisation (DOMmanipulation and CSS selectors), and network monitoring.CasperJS, built on top of PhantomJS +SlimerJS, and comes with screen utilities such as assertions, org tryout, and leisurely way to track failed tests.YSlowanalyzes web Page and why they & # x27; re retard base on Yahoo! & # x27; s rule for high performance web site. ((& quot; YSlow - Official Open Source Project Website. & quot; 2009. 3 May. 2016[http: //yslow.org/] (http: //yslow.org/) \))

Example: PhantomJS book for network traffic

All the resourcefulness requests and response can be collected utilizeonResourceRequested and onResourceReceivedvia PhantomJS API. I recommend checking out PhantomJS cookbook examples to capture meshing traffic.

• netlog.jsdumps all network requests and responses

• netsniff.jsseizure mesh traffic in HAR formatting

FILE: netlog.js

& quot; use strict & quot;;
var page = require (& # x27; webpage & # x27;) .create (),
system = require (& # x27; system & # x27;),
    address;

if (systems.args.length === 1) {
console.log (& # x27; Usage: netlog.js & # x27;);
phantom.exit (1);
} else {
address = system.args [1];

// page.onResourceRequested = purpose (req) {
// console.log (& # x27; quest: & # x27; + JSON.stringify (req, undefined, 4));
// };

page.onResourceRequested = function (requestData, networkRequest) {
console.log (Request (# & # x27; + requestData.id + JSON.stringify (requestData));
    };

page.onResourceReceived = mapping (reply) {
console.log (& # x27; received: & # x27; + JSON.stringify (response, undefined, 4));
    };

page.open (address, function (status) {
if (status! == & # x27; success & # x27;) {
console.log (& # x27; FAIL to lade the address & # x27;);
      }
phantom.exit ()
     });
}

CONSOLE LOG: Snippet of Request # 1

Request (# 1): {& quot; headers & quot;: [{& quot; name & quot;: & quot; User-Agent & quot;, & quot; value & quot;: & quot; Mozilla/5.0 (Macintosh; PPC Mac OS X) AppleWebKit/534.34 (KHTML, like Gecko) PhantomJS/1.9.8 Safari/534.34 & quot;}, {& quot; name & quot;: & quot; Accept & quot;, & quot; value & quot;: & quot; text/html, application/xhtml+xml, application/xml; q=0.9, * / *; q=0.8 & quot;}], & quot; id & quot; :1, & quot; method & quot;: & quot; GET & quot;, & quot; time & quot;: & quot; 2016-05-04T01:18:35.909Z & quot;, & quot; url & quot;: & quot; https: //saucelabs.com/ & quot;}
get: {
& quot; bodySize & quot;: 32050,
& quot; contentType & quot;: & quot; text/html; charset=utf-8 & quot;,
& quot; headers & quot;: [
{
& quot; name & quot;: & quot; Server & quot;,
& quot; value & quot;: & quot; nginx & quot;
         },
         {
& quot; name & quot;: & quot; Date & quot;,
& quot; value & quot;: & quot; Wed, 04 May 2016 01:18:35 GMT & quot;
         },
         {
& quot; name & quot;: & quot; Content-Type & quot;,
& quot; value & quot;: & quot; text/html; charset=utf-8 & quot;
         },
         {
& quot; name & quot;: & quot; Connection & quot;,
& quot; value & quot;: & quot; keep-alive & quot;
         },
         {
& quot; name & quot;: & quot; X-Cache-Operation & quot;,
& quot; value & quot;: & quot; plone.app.caching.moderateCaching & quot;
         },
         {
& quot; name & quot;: & quot; Content-Language & quot;,
& quot; value & quot;: & quot; en & quot;
         },
         {
& quot; name & quot;: & quot; Expires & quot;,
& quot; value & quot;: & quot; Sun, 07 May 2006 01:00:57 GMT & quot;
         },
         {
& quot; name & quot;: & quot; Vary & quot;,
& quot; value & quot;: & quot; Last-Modified, Accept-Encoding & quot;
         },
         {
& quot; name & quot;: & quot; Last-Modified & quot;,
& quot; value & quot;: & quot; Tue, 03 May 2016 20:55:19 GMT & quot;
         },
         {
& quot; name & quot;: & quot; X-Ua-Compatible & quot;,
& quot; value & quot;: & quot; IE=edge, chrome=1 & quot;
         },
         {
& quot; name & quot;: & quot; Cache-Control & quot;,
& quot; value & quot;: & quot; max-age=0, s-maxage=86400, must-revalidate & quot;
         },
         {
& quot; name & quot;: & quot; X-Cache-Rule & quot;,
& quot; value & quot;: & quot; plone.content.itemView & quot;
         },
         {
& quot; name & quot;: & quot; X-Frame-Options & quot;,
& quot; value & quot;: & quot; SAMEORIGIN & quot;
         },
         {
& quot; name & quot;: & quot; X-Varnish & quot;,
& quot; value & quot;: & quot; 1874945977 1874944052 & quot;
         },
         {
& quot; name & quot;: & quot; Age & quot;,
& quot; value & quot;: & quot; 1024 & quot;
         },
         {
& quot; name & quot;: & quot; Via & quot;,
& quot; value & quot;: & quot; 1.1 varnish & quot;
         },
         {
& quot; name & quot;: & quot; X-Varnish-Cache & quot;,
& quot; value & quot;: & quot; HIT & quot;
         },
         {
& quot; name & quot;: & quot; Content-Encoding & quot;,
& quot; value & quot;: & quot; gzip & quot;
         },
         {
& quot; name & quot;: & quot; X-Backend-Server & quot;,
& quot; value & quot;: & quot; nginx3 & quot;
         },
         {
& quot; name & quot;: & quot; Strict-Transport-Security & quot;,
& quot; value & quot;: & quot; max-age=31536000 & quot;
         },
         {
& quot; name & quot;: & quot; Accept-Ranges & quot;,
& quot; value & quot;: & quot; bytes & quot;
         }
     ],
& quot; id & quot;: 1,
& quot; redirectURL & quot;: cypher,
& quot; stage & quot;: & quot; start & quot;,
& quot; status & quot;: 200,
& quot; statusText & quot;: & quot; OK & quot;,
& quot; time & quot;: & quot; 2016-05-04T01:18:36.264Z & quot;,
& quot; url & quot;: & quot; https: //saucelabs.com/ & quot;
}

Conclusion

Developing scripts to entrance network traffic will yield insight into the requests and downloads over the mesh in real time. By adding network monitor testing as part of the line, it will alarm the team of potential problems before shipping to product, and involve end-users.Greg Sypolt (@ gregsypolt) is a Senior Engineer at Gannett - USA Today Network and co-founder of Quality Element. He is a passionate automation engineer seeking to optimize software development quality, while coaching team members on how to publish great automation hand and facilitate the testing community become best quizzer. Greg has spent most of his career work on software quality—concentrating on web browser, APIs, and mobile. For the preceding five years, he has focused on the creation and deployment of automated exam strategies, frameworks, tools and program.