Steps to retrieve values from a grid and execute a sum operation using PROTRACTOR

Question

Steps to retrieve values from a grid and execute a sum operation using PROTRACTOR

Embarking on my Protractor and Javascript journey, I am faced with the challenge of writing a test script to retrieve values of various accounts under the header "Revenue" (as shown in the image below).

My task involves extracting all number values listed under the Revenue header and conducting a summation operation. However, I am encountering difficulties in retrieving all the values using a loop or ng-repeat. Below is a visualization of the structure of my DOM:

Included are 89 td/tr tags within the tbody, as per the illustration above.

I am seeking guidance on devising a logic to effectively fetch all values from the tbody and execute SUM operations on them. Any assistance would be greatly appreciated!

javascript selenium-webdriver protractor protractor-net

Answer 1

Answer №1

This code snippet will help you achieve your desired outcome:

function calculateSumInColumn(tableID, columnNumber, expectedResult){
    var cellsToSum = element.all(by.css('#'+tableID+' tr td:nth-of-type(2)'));
    var currentSum = 0;
    cellsToSum.each((cell) => {
        cell.getText().then((text) => {                            
            currentSum += Number(text);
        });
    }).then(() => {
        expect(currentSum.toString()).toEqual(expectedResult);
    });
}//END OF calculateSumInColumn

Let's break down the implementation step by step:

In this part of the code, you are selecting all the cells in a specific column of a table. Replace the variable tableID with the ID (or any other CSS selector) of your table. The 'nth-of-type(2)' corresponds to the column number, so if you want to make it dynamic based on a parameter, you can modify the code as follows:

var cellsToSum = element.all(by.css('#'+tableID+' tr td:nth-of-type('+columnNumber+')'));

Now, the cellsToSum array contains all the numerical values as strings.

In the next section, you iterate through each cell, extract its text content, convert it to a number, and perform the summation: *Before converting to a number, ensure that the string contains only numeric characters.

    cellsToSum.each((cell) => {
        cell.getText().then((text) => {                            
            currentSum += Number(text);
        });
    })

Finally, the last part handles the promise sequence where you can use the currentSum variable to compare with the expected result or execute any other operation accordingly.

Answer 2

This code snippet will help you achieve your desired outcome:

function calculateSumInColumn(tableID, columnNumber, expectedResult){
    var cellsToSum = element.all(by.css('#'+tableID+' tr td:nth-of-type(2)'));
    var currentSum = 0;
    cellsToSum.each((cell) => {
        cell.getText().then((text) => {                            
            currentSum += Number(text);
        });
    }).then(() => {
        expect(currentSum.toString()).toEqual(expectedResult);
    });
}//END OF calculateSumInColumn

Let's break down the implementation step by step:

In this part of the code, you are selecting all the cells in a specific column of a table. Replace the variable tableID with the ID (or any other CSS selector) of your table. The 'nth-of-type(2)' corresponds to the column number, so if you want to make it dynamic based on a parameter, you can modify the code as follows:

var cellsToSum = element.all(by.css('#'+tableID+' tr td:nth-of-type('+columnNumber+')'));

Now, the cellsToSum array contains all the numerical values as strings.

In the next section, you iterate through each cell, extract its text content, convert it to a number, and perform the summation: *Before converting to a number, ensure that the string contains only numeric characters.

    cellsToSum.each((cell) => {
        cell.getText().then((text) => {                            
            currentSum += Number(text);
        });
    })

Finally, the last part handles the promise sequence where you can use the currentSum variable to compare with the expected result or execute any other operation accordingly.

Steps to retrieve values from a grid and execute a sum operation using PROTRACTOR

Answer №1

Similar questions

Create a search feature based on names utilizing Node Express in conjunction with SQL database

The installation of robotjs via npm failed due to issues encountered while trying to build the binaries

Angular Form Validation: Ensuring Data Accuracy

The website functions properly in Chrome, but encounters issues in IE

The function Document.getElementsByName() behaves differently in Internet Explorer, returning an object, compared to Chrome where it returns

Exploring the depths of design in material-ui

Troubleshooting VueJS route naming issues

Changing the .load function based on user input

Does vite handle module imports differently during development versus production?

I am having trouble scrolling through the main content when the side-drawer is open. How can I fix this issue?

Switch over to TypeScript - combining Socket.IO, Angular, and Node.js

The absence of the iframe in ie8 is causing problems that cannot be fixed with relative positioning

Using Linux variables in the .env file of your Vue.js project can provide a convenient way to

How to pass data/props to a dynamic page in NextJS?

Step-by-step guide on activating a button only when all form fields are validated

Maximizing the power of Webpack alongside Google Maps API

I'm experiencing an issue where using .innerHTML works when viewing the file locally, but not when served from a web server. What could be causing this discrepancy?

Conceal the scroll bar while the page preloader is active

The requested page for angular-in-memory-web-api could not be located within the Angular 4.2.2 CLI web-api functionality

Exploring the use of properties in JavaScript