http-probe

Utility for HTTP validation. Implementation is based on the Chrome debugging protocol.

Usage no npm install needed!

<script type="module">
  import httpProbe from 'https://cdn.skypack.dev/http-probe';
</script>

README

HTTP Probe

Utility for HTTP validation. Implementation is based on the Chrome debugging protocol.

Version Dependencies Code Climate Coverage Status

Table of Contents

Motivation

While Selenium and other end-to-end solutions provide a good set of tools to check UI feedback and states, they lack tools for HTTP validation. HTTP Probe tries to solve an issue with HTTP testing by providing API to work and analyze Performance (in particular Network) logs in the modern browsers like Chromium.

API

Create an instance of the HTTP Probe. Don't forget to teardown an instance, otherwise http-probe will accumulate HTTP requests from every consecutive getRequest or getResponse invocation.

HttpProbe

constructor(provider)

  • provider <Function> should return an array of performance logs

Example:

const {HttpProbe} = require('http-probe');

let httpProbe = new HttpProbe(() => myMethodToExtractPerformanceLogs());

Extended example for WebdriverIO.

First of all you should activate performance logs for Google Chrome.

{
    "loggingPrefs": {
            "browser": "ALL",
            "performance": "ALL"
    }
}

Now in before hook you can create an instance of HTTP Probe:

before(() => {
    httpProbe = new HttpProbe(() => {
        return browser.log('performance').value;
    });
});

You should use single test case per spec if you don't want fight with cache.

getRequest(search)

  • search <String|RegExp> a pattern which will be executed against an URL

Returns a Request entity with several properties:

  • length <Number>, - total number of matched requests
  • executed <Boolean>, - if request was executed at least once
  • executedOnce <Boolean>, - if request was executed exactly once
  • executedTwice <Boolean>, - if request was executed exactly twice
  • executeThrice <Boolean>, - if request was executed exactly thrice
  • first <RequestResult>, - a result object for the first request
  • second <RequestResult>, - a result object for the second request
  • third <RequestResult>, - a result object for the third request
  • last <RequestResult>, - a result object for the last request
RequestResult
  • headers <Object>, - request's headers
  • method <String>, - HTTP method, 'GET', 'POST', etc.
  • postData <Object>, - request's POST parameters
  • url <String>, - request's fully qualified URL

Example:

expect(httpProbe.getRequest('accounts/8').executed).to.be.true;

getResponse(search)

  • search <String|RegExp> a pattern which will be executed against an URL

Returns a Response entity with several properties:

  • length <Number>, - total number of matched responses
  • received <Boolean>, - if response was delivered at least once
  • receivedOnce <Boolean>, - if response was delivered exactly once
  • receivedTwice <Boolean>, - if response was delivered exactly twice
  • receivedThrice <Boolean>, - if response was delivered exactly thrice
  • first <ResponseResult>, - a result object for the first response
  • second <ResponseResult>, - a result object for the second response
  • third <ResponseResult>, - a result object for the third response
  • last <ResponseResult>, - a result object for the last response
ResponseResult
  • encodedDataLength <Number>, - Total number of bytes received for this request so far.
  • fromDiskCache <Boolean>, - Specifies that the request was served from the disk cache.
  • fromServiceWorker <Boolean>, - Specifies that the request was served from the ServiceWorker.
  • headers <Object>, - HTTP response headers.
  • requestHeaders <Object>, - (Optional) Refined HTTP request headers that were actually transmitted over the network.
  • status <Number>, - HTTP response status code.
  • statusText <String>, - HTTP response status text.
  • url <String>, - Response URL. This URL can be different from CachedResource.url in case of redirect.

Example:

expect(httpProbe.getResponse('total/cart').last.status).to.be.equal(200);

NetworkInspector

Captures network events through the Chrome debugging protocol for the later use in HttpProbe for analysis. Specifically designed for the solutions that can not provide performance logs or it's more convenient to use listener abstraction for network logs.

constructor(eventTarget)

  • eventTarget <EventEmitter> entity that satisfies EventEmitter interface at least for ability to subscribe (on) and unsubscribe (removeListener) for the events

Example:

const {NetworkInspector} = require('http-probe');

let inspector = new NetworkInspector(myEmitter);
console.log(inspector.getLogs());
inspector.dispose();

Extended example for WebdriverIO with the use of before and after hooks.

const {HttpProbe, NetworkInspector} = require('http-probe');

let inspector;

before(() => {
    browser.cdp('Network', 'enable');
    inspector = new NetworkInspector(browser);
    httpProbe = new HttpProbe(() => inspector.getLogs());
});

after(() => {
    inspector.dispose(); 
});

dispose()

Resets internal resources and listeners. After this point, the instance of Network Inspector is not usable.

Example:

networkInspector.dispose();

getLogs(deplete)

  • deplete <Boolean> an optional parameter, by default it's always true. If the parameter is false logs will be preserved before the next getLogs invocation.

Returns a list of messages formatted to comply with Chrome debugging protocol.

Example:

let myLogs = networkInspector.getLogs();
console.log(myLogs);

Snapshots

Tests are working with snapshots. Snapshots are picked randomly and recorded for 30 seconds. To create a snapshot, instance of the Chrome should be active, if yor are using Mac, it could be done via:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

or run Chrome Browser in the container:

$ docker pull justinribeiro/chrome-headless
$ docker run -it --rm -p 9222:9222 justinribeiro/chrome-headless

Now it's possible to make a snapshot:

URL=http://some-domain.com node create-snapshot.js

// or visit multiple websites 

URL="http://domain1.com http://domain2.com" node create-snapshot.js

Links