Capturing all browser steps in an HTML report

Question

I need to capture and print all browser steps performed in a test script into an HTML report. I am currently using transractor and protractor-html-screenshot-reporter for a post. Can anyone suggest if this can be achieved using any tool or is there any api for this. The desired sample is attached.

Answer 1

In order to achieve what you are asking, you need to understand what is happening under the hood, and how to send and execute browser actions necessary for logging.

Here is a high level overview.

webdriver, JSON Wire Protocol - JSON HTTP:

: : .

, , , .., , HTTP-, , . JSON. , Chrome:

[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"
}

, , , BrowserStack. :

---

, , , timeline :

• plugins :

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

• timelines/index.html :

, "client" , , . , , .