Cypress如何校验表格所有行均包含指定非空属性

云原生阿岚

2026-8-27

Cypress 表格行属性批量校验实现方案

你已经通过TransactionListPage.transactionTableRows拿到了目标表格的所有行元素集合，不需要手写原生JS循环遍历，直接用Cypress内置的遍历+断言方法就能实现需求，两种常用写法如下：

通用遍历写法（适配所有场景，包括属性挂在行内子元素的情况）
直接在你原有校验逻辑后链式调用.each()方法逐行校验，任意一行不满足条件时用例会直接抛出明确的失败提示：

// 请将下面的 your-target-attr 替换为你实际需要校验的属性名，比如data-transaction-id、data-row-key等
TransactionListPage.transactionTableRows
  .should('be.visible')
  .and('have.length.greaterThan', 0)
  .each($row => {
    // 第一步：校验当前行存在目标属性
    expect($row).to.have.attr('your-target-attr')
    // 第二步：校验目标属性值不为空，加trim避免纯空格的异常值误判
    expect($row.attr('your-target-attr').trim()).to.not.be.empty
  })

如果要校验的属性不在<tr>行标签本身，而是行内的某个子节点（比如数据列、操作按钮），只需要在遍历回调里先定位到对应子元素再做校验即可：

.each($row => {
  // 示例：校验行内class为order-sn的列节点上的data-sn属性
  const $targetNode = $row.find('.order-sn')
  expect($targetNode).to.have.attr('data-sn')
  expect($targetNode.attr('data-sn').trim()).to.not.be.empty
})

简化写法（仅适配属性直接挂在<tr>行标签上的场景）
Cypress对多元素集合调用属性断言时，会自动遍历所有元素执行校验，不需要手动写遍历逻辑，代码更简洁：
```
TransactionListPage.transactionTableRows
  .should('be.visible')
  .and('have.length.greaterThan', 0)
  .and('have.attr', 'your-target-attr')
  .and('not.have.attr', 'your-target-attr', '')
```