如何在Cypress中循环断言列表项的标签与复选框匹配？

核心思路 #

利用 Cypress 的 .each() 命令遍历目标列表项，结合 .wrap() 将 jQuery 对象转为 Cypress 命令链，逐个断言父元素下的文本标签和复选框状态与预期值匹配。

代码示例 #

假设页面结构如下：

<ul class="item-list">
  <li class="list-item">
    <span class="item-text">选项A</span>
    <input type="checkbox" class="item-checkbox" checked>
  </li>
  <li class="list-item">
    <span class="item-text">选项B</span>
    <input type="checkbox" class="item-checkbox">
  </li>
</ul>

测试代码：

// 定义预期的文本和复选框状态数据，顺序需与页面列表一致
const expectedData = [
  { text: '选项A', isChecked: true },
  { text: '选项B', isChecked: false }
];

// 先断言列表项数量与预期一致
cy.get('.list-item').should('have.length', expectedData.length);

// 遍历每个列表项并断言
cy.get('.list-item').each(($listItem, index) => {
  // 断言文本标签内容
  cy.wrap($listItem)
    .find('.item-text')
    .should('have.text', expectedData[index].text);
  
  // 断言复选框选中状态
  cy.wrap($listItem)
    .find('.item-checkbox')
    .should('have.prop', 'checked', expectedData[index].isChecked);
});

关键说明 #

• .each() 会自动遍历所有匹配的元素，支持传入元素索引，方便对应预期数据。
• cy.wrap($listItem) 将遍历得到的 jQuery 对象转换为 Cypress 可操作的命令链，确保后续的 .find() 和 .should() 能正常执行。
• 如果列表是动态加载的，可在 cy.get('.list-item') 前添加等待逻辑（如 cy.wait('@loadList')），确保元素完全渲染后再遍历。

内容的提问来源于stack exchange，提问作者Simmo