Record every action taken in the browser and compile it into a detailed HTML report

I am looking for a way to record and display all the browser actions performed in a test script in an HTML report. I am using protractor along with protractor-html-screenshot-reporter for reporting purposes. Is there any tool or API available that can help me achieve this? Attached is an example of the desired output.

Answer №1

To achieve the desired outcome, it is essential to comprehend the underlying processes and mechanisms by which browser actions are executed and logged.

Here is a concise overview:

The communication between a webdriver, selenium server, and a browser occurs via the JSON Wire Protocol - utilizing JSON over HTTP:

Refer also to: Protractor: How It Works.

In simpler terms, actions like element identification, key input, or clicking are transmitted as HTTP requests that can be monitored and recorded, as demonstrated in this example of 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 process is akin to what services such as BrowserStack carry out, where they interpret raw logs to generate user-friendly action reports:


A feature similar to your request in Protractor is currently in development through a timeline plugin:

  • Configure the plugins section in your protractor configuration:

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

  • Access the timelines/index.html report to view the execution timeline.

Essentially, this plugin interprets the webdriver's client logs and constructs a chronological sequence highlighting the commands sent during a testing session. This serves as a foundational guide for exploring the plugin's source code.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Deliver search findings that are determined by matching criteria, rather than by identification numbers

I am seeking to return a JSON match upon form submission, rather than simply searching for a specific ID. However, I am uncertain about how to structure this. I have the ability to search for the necessary match in a JavaScript document within one of my n ...

`Enhance Image with a Fresh Hue`

Let me explain my dilemma: I'm dealing with a two-tone png image - one tone is black and the other is transparent. Right now, I'm relying on the background color attribute to dynamically change the color of the transparent section. However, I ...

Is there a way to prevent a premature closure of a connection?

I'm currently faced with the task of moving a substantial amount of data from a MySQL database, exceeding the maximum query size. To accomplish this, I need to process it in chunks through a loop. However, encountering an issue where about half of the ...

Can you explain the error message "a.split is not a function" in an Angular context?

My Angular application is encountering an error upon page load. The error message displayed is as follows: angular-amin.js:122 TypeError: a.split is not a function at r (angular-amin.js:186) at m.$digest (angular-amin.js:145) at m.$apply (angular-ami ...

Can the CSS color of struts2-jquery-grid-tags be modified?

Is there a way to customize the CSS style of my Struts2 jQuery grid tags? I'm having trouble adjusting the font size of the header layer. Can someone please advise on how to change the style, color, and other formatting of the grid similar to regular ...

Using PHP to convert JSON data into the Google Chart API

I am facing an issue with parsing my PHP generated JSON array into a Google chart. I have integrated JQuery, but for some reason, I am struggling to parse the JSON data. I execute a MySQL query to fetch data from the database. Then, I encode the query resu ...

Unable to successfully call a directive function from a nested child directive

I'm facing a challenge with utilizing a directive that was created by another developer to notify my directive when the ngRepeat inside of it has completed its creation. My parent directive has an isolate scope and includes a function within its scop ...

Is there a way to delay the start of this until a legitimate answer is provided in a pop-up window?

Is it possible to delay the loading of this content until a prompt box is answered with a valid response, and have it only appear once a month? Do I need anything beyond JS and HTML for this functionality? <script language="javascript"> function ...

convert an array into a JSON object using JavaScript

Is there a way to convert the following array structure arr = [{ "a":1, "b":2, "c":c }] into a JSON object format? arr = { "a":1, "b":2, "c":c } ...

Tips on combining JSON array elements into a new JSON array using NodeJS

Is it possible to manipulate a JSON array with 100 objects? Each object contains key values for Job Number, Tax Amount, Line Total, and Line Total plus Tax. The task is to create a new JSON array with Job Number, Total Tax Amount, Sum of Tax Items, and Sum ...

Updates in dropdown events when options data has been modified

Hey there, I'm wondering about dropdown events. Let's say I have two dropdowns. When a selection is made in the first dropdown, all options in the second dropdown are replaced with new ones. For example, let's say the first dropdown has thes ...

Unable to execute a GET request using the Fetch API on Django REST Framework results in receiving an HTTP 304 error code

When attempting a GET request with the Fetch API (Node Fetch) module against a Django REST API, I am encountering a 304 error. I am unsure of how to resolve this issue as it seems to be related to requesting the same data repeatedly. Is there no way around ...

Transferring temporary information from server to controller using angular-file-upload

Currently, I am utilizing the angular-file-upload library which can be found at this link: https://github.com/danialfarid/angular-file-upload. In the example provided on that page, data from a file is sent to the backend from a controller using the availab ...

Ways to retrieve a JSON element and incorporate it into a CSS styling

Can someone assist me in converting a JSON object for use in CSS? I've attempted to do this using Vue.js, creating a map legend with v-for to generate the legend. However, if there is an alternative method that allows me to take a JSON object and ins ...

Is there a way to invoke a class method from the HTML that is specified within its constructor function?

class Welcome { constructor() { this.handlePress = this.handlePress.bind(this); this.htmlContent = `<a onclick="this.handlePress">Link</a>`; } handlePress(e) { console.log('planet'); } } The HTML structure appears ...

Navigating through the elements of the DOM

Here is a function that deletes people from a list when you click on a certain part of the form: function ParticipantsDeleteClick(model, url) { for (i in model.Participants) { $("#delete" + i).click(function () { $.ajax({ url: url, ...

Encountered an unexpected interpolation ({{}}) in column 3 of Data Bind RouterLink (Angular 2) that was expecting an expression

Encountering difficulties passing data to my routerLink. The goal is to change the route when the id reaches 4 within the ngFor loop. <input type="button" class="btn-cards" [ngClass]="getStyle(negociacao)" [routerLink]="['/{{negociacao.rota}}&apo ...

What is the process for setting up SSL for Angular e2e testing?

I'm working on an Angular sample project that includes end-to-end tests focusing on OAuth2 and OIDC flows. I've noticed that the behavior of browsers varies when SSL/TLS is enabled or disabled. To ensure consistency, I would like to run my end-to ...

Can you please explain the function of this JavaScript code for the Isotope filter?

I am struggling to grasp the functionality of a section of vanilla JS code related to the Isotope filter. You can find the original code here. var buttonGroups = document.querySelectorAll('.button-group'); for (var i = 0; i < buttonGroups.le ...

"Implementing form validation and AJAX submission for seamless user interaction

I am seeking a solution to validate my form using ajax and then insert it into the database also utilizing ajax. Although, with the current code, validation messages are displayed, it still performs the insertion. The issue I am encountering seems to be ...