Cypress 循环到 td 值并获取特定的 tr 求和（TR 长度将是动态的）

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

提问人：Fah 提问时间：8/5/2022 最后编辑：Fah 更新时间：8/6/2022 访问量：791

问：

我知道循环和使用条件测试不是一个很好的选择。然而，这是我设法做到这一点的唯一方法。

我的问题是正确循环所有行并在可用时将值包装在第 10 列中。

我有一个动态表，有时和另一个时间根据索引tr。就像在图像中一样 当 td = 12 时，第 10 列将有一个 valeu（我需要换行和求和的值td=12td=4) enter image description here

我编写了一个部分有效的测试，我不确定为什么当 td 长度 =12 时它没有得到第 10 列的值，当行的长度 = 4 时，我需要它循环到下一行，直到它找到有 10 列的行。

 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
            }
          }
        })

由于 td = 4，它在第二行中断。

它确实循环了所有行，但是当列 <= 10 时，它仍然从 listl 的第一行 index = 0 中获取值。

将其相加的原因是将总值与另一个元素进行比较。

这是CSSenter image description here

<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="">
          00001
        </a> <!----> <!----> <!----></td><td><a href="/clients/96f37a8a-8e46-4789-8440-5f07dcd18586/show" class=""><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="">
          00001
        </a> <!----> <!----> <!----></td><td><a href="/clients/96f37a8a-8e46-4789-8440-5f07dcd18586/show" class=""><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="">
          00001
        </a> <!----> <!----> <!----></td><td><a href="/clients/96f37a8a-8e46-4789-8440-5f07dcd18586/show" class=""><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="">
        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>
    ```
while-loop foreach sum 柏树

评论

答：

0赞 agoff 8/5/2022 #1

假设有总元素，其中 th 是总和，我们可以连续检查新的总和值。xtdx-1

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.

需要注意的是：这需要将您的函数从接受字符串（例如）更改为接受 JQuery 元素（并添加到元素中）。例如：textAmountToNumber$el.text().text()

const foo = (value: string) => {
  return +value
}
// vs.
const foo = (value: JQuery<HTMLElement>) => {
  return +value.text()
}

我对你想要达到的结果并不肯定，所以如果我错过了目标，请告诉我。

评论

0赞 Fah 8/5/2022
我在包装我更新图像的值时遇到问题。如何在图像中看到。有值为 com 的行（我需要包装并求和这个值）。当行上没有值时，它需要循环到下一行，直到找到 上的值。这是我需要求和的价值吗？column 10 whentd length = 12td=10td=10column 10
0赞 Fah 8/5/2022
我尝试，它只是用索引 0 包装行中的值cy.get('td') .each(($el, index, $list) => { if (index < $list.length - 1) { sum += textAmountToNumber($el) } })
0赞 jjhelguero 8/5/2022 #2

使用 的另一种方法是使用 jQuery ：contains 获取 td，然后解析出值并转换为数字进行汇总。.each()

它看起来像这样：

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*);

这是一个简单的例子。

评论

0赞 Fah 8/5/2022
它总共有 12 列，其中 5 列有货币货币 - 所以不可能使用 cy.get（“td：contains（£）”），td 长度将是 4 或 12，当长度为 = 12 时，我需要 cypress 来扭曲值。我需要第 10 列的值，当该行的长度 = 4 时，我需要它循环到下一行，直到它找到有 10 列的行
0赞 jjhelguero 8/5/2022
有趣的是看到屏幕截图。如果您可以显示表格的一些 HTML 结构，那将很有帮助。否则，这可能是黑暗中的另一次射击。
0赞 Fah 8/5/2022
将更新，但问题是循环所有行并在有值时仅获取/包装第 10 列的值
1赞 Fody 8/5/2022 #3

也许尝试过滤掉少于 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(...)    
})

或

let sum = 0;
const amountCol = 10

cy.get('tbody')
  .find('tr')
  .filter(':not(.row-tight)')
  .each($tr => {
    ...
  })

使用实弹进行全面测试（实际 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
  })

});

评论

0赞 Fah 8/5/2022
小计在卡片表的另一个表中，因此在赛普拉斯将第 10 列的值相加后，我会将此值与另一个卡片表中的总值进行比较。
0赞 Fah 8/5/2022
它只是获取值 = 0，它确实过滤并显示 3 行（具有第 10 列的行的长度），但始终将值换行 0
0赞 Fody 8/5/2022
你像我一样使用吗？cy.then(() => cy.log(sum))
0赞 Fah 8/5/2022
是的，我正在做你所做的。顺便说一句，它确实循环到所有行、过滤器，但不包装任何值get tbody 187 find tr 12 188 get tbody 189 find tr 12 190 filter 3 191 get tbody 192 find tr 12 193 filter 3 194 get tbody 195 find tr 12 filter 3
0赞 Fody 8/5/2022
让我试试吧，也许我错过了什么。

上一个：所以我尝试在不使用 C# 中的 sort 函数的情况下按升序对列表进行排序，而且我有点新，所以我想知道我该怎么做？[复制]

下一个：如果用户输入负数，是否可以退出