Capture all the browser steps into an HTML report

Question

I need to capture and print all the browser steps being executed in test script into HTML report. I'm currently using protractor and protractor-html-screenshot-reporter for reporting. Can anyone suggest if this can be achieved using any tool or are there any api's for this. Desired sample is attached.

Answer 1

In order to achieve what you are asking about, you need to understand what is going on under-the hood and how the browser actions you need to log are sent and executed.

Here is a very brief high-level overview.

Interactions between a webdriver, selenium server and a browser are happening through the JSON Wire Protocol - JSON over HTTP:

See also: Protractor: How It Works.

In other words, finding an element, sending keys to an element, click etc are, basically, sent as HTTP requests that could be monitored and logged, see Monitoring JSON wire protocol logs. For instance, here are the Chrome service logs:

[2.389][INFO]: COMMAND FindElement {
   "sessionId": "b6707ee92a3261e1dc33a53514490663",
   "using": "css selector",
   "value": "input"
}
[2.389][INFO]: Waiting for pending navigations...
[2.389][INFO]: Done waiting for pending navigations
[2.398][INFO]: Waiting for pending navigations...
[2.398][INFO]: Done waiting for pending navigations
[2.398][INFO]: RESPONSE FindElement {
   "ELEMENT": "0.3367185448296368-1"
}

This is exactly what, for example, BrowserStack is doing. They are parsing the raw logs and producing a user-friendly report of all actions performed:

---

In protractor, the closest functionality to what you are asking about, is being currently developed under a timeline plugin:

• configure plugins section in your protractor config:

  plugins: [{
      path: 'node_modules/protractor/plugins/timeline/index.js',
      outdir: 'timelines'
  }],
  

• run tests

• open timelines/index.html report and see:

Basically, it parses the webdriver's "client" logs and builds a time frame highlighting the commands that were sent during a test session. This is something you can use as a starting point, explore the source code of the plugin.