Cypress to loop to td values and get a specific tr to sum (TR length will be dynamic) - while-loop

Question

I know it is not a very good option to loop and use a conditional test. However it was the only way I kinda managed to do so.
My issue is to loop correctly all the rows and wrap value in the column 10 when it is available.
I have a dynamic table were td=12 sometimes and td=4 another times according with the index tr. like in the images
when the td is = 12 the column 10 will have a valeu (the value I need to wrap and sum)
I wrote a test that is partially working and I am not sure why it does not get the value of column 10 when the td length =12 and when the row has length = 4 I need it to loop to the next line till it finds the line that has 10 columns.
function textAmountToNumber(textValue) {
const text = textValue.replace(/[£,]/g, '').trim()
return Number(text)
}
let haselemente = true
let index = 0
let sum = 0
const amountCol = 10
cy.get('tbody')
.find('tr')
.then((e) => {
while (haselemente) {
const length = e.length - 1
if (index < length) {
cy.get('tbody')
.find('tr')
.eq(index)
.then(($td) => {
if ($td.find('td').length < amountCol) {
} else {
cy.get('tbody')
.find('tr')
.eq(index)
.find('td')
.eq(amountCol)
.each(($el, index, $list) => {
cy.wrap($el).then((element) => {
sum += textAmountToNumber(element.text())
cy.log(sum)
})
})
}
})
index++
} else {
haselemente = false
}
}
})
It break in the second row due to td = 4.
It does loops all the rows, but when the column <= 10 it still get the value from the index = 0 the first line of the listl.
The reason to sum it, is to compare the total value to another element.
here is the CSS
<table data-testid="section-list-card" class="table table-sm table-nowrap card-table table-hover linked-transactions-table"><thead><tr><!----> <th class="sortable"><div class="sortable">
COLUMN 1
<i class="uil uil-sort" style="font-size: 12px;"></i></div></th><th class="sortable"><div class="sortable">
COLUMN 2
<i class="uil uil-sort" style="font-size: 12px;"></i></div></th><th class="sortable" style="width: 9%;"><div class="sortable">
COLUMN 3
<i class="uil uil-sort" style="font-size: 12px;"></i></div></th><th class="">
COLUMN 4
</th><th class="sortable" style="width: 100px;"><div class="sortable">
COLUMN 5
<i class="uil uil-sort" style="font-size: 12px;"></i></div></th><th class="" style="width: 10%; text-align: right;">
COLUMN 6
</th><th class="" style="width: 10%;">
COLUMN 7
</th><th class="" style="width: 10%;">
COLUMN 8
</th><th class="" style="width: 10%;">
COLUMN 9
</th><th class="" style="width: 10%;">
COLUMN 10
</th> <th style="width: 5%;"></th></tr></thead> <tbody class="list"><tr role="row"><!----> <td><button type="button" class="btn row-collapse-expand-btn btn-link btn-sm"><i class="uil uil-angle-down" style="font-size: 20px;"></i></button> <a href="/quotes/96f37a8b-20b3-4b7c-ba1b-129db2c09bcb/show" class="" target="_blank">
00001
</a> <!----> <!----> <!----></td><td><a href="/clients/96f37a8a-8e46-4789-8440-5f07dcd18586/show" class="" target="_blank"><span>
S Smith
</span></a> <!----> <!----> <!----></td><td> <!---->
2022-10-17
</td><td><div class="d-flex align-items-center"><div>
Amount
</div></div> <!----> <!----></td><td> <!----> <!----></td><td><div class="text-right">
£ 4,000.56
</div> <!----> <!----></td><td><span>
£ 0.00
</span> <!----> <!----></td><td><span>
£ 0.00
</span> <!----> <!----></td><td><span>
£ 0.00
</span> <!----> <!----></td><td><span>
£ 4,000.56
</span> <!----> <!----></td> <td class="text-right"></td></tr> <tr class="row-tight" style=""><td colspan="3"></td> <td colspan="2"><div class="d-flex align-items-center"><i class="mr-2 uil uil-corner-down-right" style="font-size: 12px;"></i>
Gross Premium (premium)
<!----> <div class="ml-1 con-separator-left"><a href="/entities/91d519ef-c04f-48c5-9902-2a5dd0227e59/show" class="">
MuS
</a></div></div> </td> <td class="text-right"><span class="balance-text text-success">
£ 5,064.00
</span> </td> <td colspan="4"></td></tr><tr class="row-tight" style=""><td colspan="3"></td> <td colspan="2"><div class="d-flex align-items-center"><i class="mr-2 uil uil-corner-down-right" style="font-size: 12px;"></i>
Fee
<!----> <div class="ml-1 con-separator-left"><a href="/entities/2316df55-9aa6-4777-9587-ec77939fa1db/show" class="">
M Smith
</a></div></div> </td> <td class="text-right"><span class="balance-text text-danger">
£ -354.48
</span> </td> <td colspan="4"></td></tr><tr class="row-tight" style=""><td colspan="3"></td> <td colspan="2"><div class="d-flex align-items-center"><i class="mr-2 uil uil-corner-down-right" style="font-size: 12px;"></i>
Commision
<!----> <div class="ml-1 con-separator-left"><a href="/entities/d935c1b4-e733-4c22-bc40-638d25160796/show" class="">
KKK
</a></div></div> </td> <td class="text-right"><span class="balance-text text-danger">
£ -708.96
</span> </td> <td colspan="4"></td></tr><tr role="row"><!----> <td><button type="button" class="btn row-collapse-expand-btn btn-link btn-sm"><i class="uil uil-angle-down" style="font-size: 20px;"></i></button> <a href="/quotes/96f37a8b-20b3-4b7c-ba1b-129db2c09bcb/show" class="" target="_blank">
00001
</a> <!----> <!----> <!----></td><td><a href="/clients/96f37a8a-8e46-4789-8440-5f07dcd18586/show" class="" target="_blank"><span>
S Smith
</span></a> <!----> <!----> <!----></td><td> <!---->
2022-10-17
</td><td><div class="d-flex align-items-center"><div>
Amount
</div></div> <!----> <!----></td><td> <!----> <!----></td><td><div class="text-right">
£ 1,591.85
</div> <!----> <!----></td><td><span>
£ 0.00
</span> <!----> <!----></td><td><span>
£ 0.00
</span> <!----> <!----></td><td><span>
£ 0.00
</span> <!----> <!----></td><td><span>
£ 1,591.85
</span> <!----> <!----></td> <td class="text-right"></td></tr> <tr class="row-tight" style=""><td colspan="3"></td> <td colspan="2"><div class="d-flex align-items-center"><i class="mr-2 uil uil-corner-down-right" style="font-size: 12px;"></i>
Gross
<!----> <div class="ml-1 con-separator-left"><a href="/entities/91d519ef-c04f-48c5-9902-2a5dd0227e59/show" class="">
MuS
</a></div></div> </td> <td class="text-right"><span class="balance-text text-success">
£ 2,015.00
</span> </td> <td colspan="4"></td></tr><tr class="row-tight" style=""><td colspan="3"></td> <td colspan="2"><div class="d-flex align-items-center"><i class="mr-2 uil uil-corner-down-right" style="font-size: 12px;"></i>
Fee
<!----> <div class="ml-1 con-separator-left"><a href="/entities/2316df55-9aa6-4777-9587-ec77939fa1db/show" class="">
S Smith
</a></div></div> </td> <td class="text-right"><span class="balance-text text-danger">
£ -141.05
</span> </td> <td colspan="4"></td></tr><tr class="row-tight" style=""><td colspan="3"></td> <td colspan="2"><div class="d-flex align-items-center"><i class="mr-2 uil uil-corner-down-right" style="font-size: 12px;"></i>
Commision
<!----> <div class="ml-1 con-separator-left"><a href="/entities/d935c1b4-e733-4c22-bc40-638d25160796/show" class="">
KKK
</a></div></div> </td> <td class="text-right"><span class="balance-text text-danger">
£ -282.10
</span> </td> <td colspan="4"></td></tr><tr role="row"><!----> <td><button type="button" class="btn row-collapse-expand-btn btn-link btn-sm"><i class="uil uil-angle-down" style="font-size: 20px;"></i></button> <a href="/quotes/96f37a8b-20b3-4b7c-ba1b-129db2c09bcb/show" class="" target="_blank">
00001
</a> <!----> <!----> <!----></td><td><a href="/clients/96f37a8a-8e46-4789-8440-5f07dcd18586/show" class="" target="_blank"><span>
S Smith
</span></a> <!----> <!----> <!----></td><td> <!---->
2022-10-17
</td><td><div class="d-flex align-items-center"><div>
Amount
</div></div> <!----> <!----></td><td><a href="/invoices/96f37a8d-a552-4db2-ba10-377810f2f78a/show" class="" target="_blank">
00001
</a> <!----> <!----></td><td><div class="text-right">
£ 5,000.70
</div> <!----> <!----></td><td><span>
£ 0.00
</span> <!----> <!----></td><td><span>
£ 0.00
</span> <!----> <!----></td><td><span>
£ 0.00
</span> <!----> <!----></td><td><span>
£ 5,000.70
</span> <!----> <!----></td> <td class="text-right"></td></tr> <tr class="row-tight" style=""><td colspan="3"></td> <td colspan="2"><div class="d-flex align-items-center"><i class="mr-2 uil uil-corner-down-right" style="font-size: 12px;"></i>
Gross Premium (premium)
<!----> <div class="ml-1 con-separator-left"><a href="/entities/91d519ef-c04f-48c5-9902-2a5dd0227e59/show" class="">
MuS
</a></div></div> </td> <td class="text-right"><span class="balance-text text-success">
£ 6,330.00
</span> </td> <td colspan="4"></td></tr><tr class="row-tight" style=""><td colspan="3"></td> <td colspan="2"><div class="d-flex align-items-center"><i class="mr-2 uil uil-corner-down-right" style="font-size: 12px;"></i>
Fee
<!----> <div class="ml-1 con-separator-left"><a href="/entities/2316df55-9aa6-4777-9587-ec77939fa1db/show" class="">
S Smith
</a></div></div> </td> <td class="text-right"><span class="balance-text text-danger">
£ -443.10
</span> </td> <td colspan="4"></td></tr><tr class="row-tight" style=""><td colspan="3"></td> <td colspan="2"><div class="d-flex align-items-center"><i class="mr-2 uil uil-corner-down-right" style="font-size: 12px;"></i>
Agent Commision (agent_commission 14.00%)
<!----> <div class="ml-1 con-separator-left"><a href="/entities/d935c1b4-e733-4c22-bc40-638d25160796/show" class="">
KKK
</a></div></div> </td> <td class="text-right"><span class="balance-text text-danger">
£ -886.20
</span> </td> <td colspan="4"></td></tr></tbody> <tfoot></tfoot></table>
```

Answer 1

Maybe try to filter out rows that have less than 10 <td>
let sum = 0;
const amountCol = 10
cy.get('tbody')
.find('tr')
.filter(function() {
return Cypress.$(this).find('td').length >= amountCol; // only rows enough <td>
})
.each($tr => {
const amountColumn = $tr.find('td').eq(amountCol);
sum += textAmountToNumber(amountColumn.text())
// cy.log(sum) // won't work, always shows initial value of 0
console.log(sum) // show total as incremented
})
cy.then(() => {
cy.log(sum);
expect(sum).to.eq(...)
})
OR
let sum = 0;
const amountCol = 10
cy.get('tbody')
.find('tr')
.filter(':not(.row-tight)')
.each($tr => {
...
})
Full test with live ammo (actual HTML)
it('sums the 5th column', () => {
let sum = 0;
const amountCol = 5
cy.get('tbody')
.find('tr')
.filter(':not(.row-tight)')
.each($tr => {
const amountColumn = $tr.find('td').eq(amountCol);
console.log($tr.find('td')) // take a look at the cols
sum += textAmountToNumber(amountColumn.text())
cy.log(sum) // this does show the incremental total
})
cy.then(() => {
cy.log(sum);
expect(sum).to.eq(10593.11) // ✅ passes
})
});

Answer 2

Assuming that there are x total td elements, with the x-1th being the sum, we can continuously check the new sum value.
let sum = 0;
...
cy.get('td')
.each(($el, index, $list) => {
if (index < $list.length - 1) {
sum += textAmountToNumber($el)
}
})
.last()
.invoke('text')
.then(textAmountToNumber)
.should(...) // whatever assertion to compare the `sum` variable to the actual sum `td` field.
One note: this would require changing your textAmountToNumber function from taking in a string (such as $el.text()) to taking in a JQuery element (and adding .text() to the element. For example:
const foo = (value: string) => {
return +value
}
// vs.
const foo = (value: JQuery<HTMLElement>) => {
return +value.text()
}
I wasn't positive on what outcome you wanted to achieve, so let me know if I've missed the mark.

Answer 3

An alternative to using .each(), would be fetch td's using jQuery :contains and then parse out the value and convert into a number to sum up.
It would look something like this:
cy.get("td:contains(£)")
// check if there will always be at least one row with price
.should("have.length.greaterThan", 0)
.then(($prices) => {
// we get the innerText to get the float value of the text before we sum them
const priceText = Cypress._.map($prices, (el) => el.innerText);
const removeAllNonNumeric = (str) => str.replace(/[^0-9.]/g, "");
const prices = priceText.map(removeAllNonNumeric).map(parseFloat);
// sum up the prices and return the value
const sum = prices.reduce((partialSum, a) => partialSum + a, 0);
return sum;
})
// now we are working with the sum of prices and assert it equals the total you expect
.should("eq", *expectedSumTotal*);
Here is a simple example.