如何在Cypress中选中动态创建的图标并逐行执行交互测试

针对动态生成的表格行，要逐个点击每行的展开/收起图标并执行测试，可通过以下方式适配任意行数的场景：

核心实现代码 #

// 获取所有带data-cy=selectorName的图标元素
cy.get('[data-cy=selectorName]').each(($icon, index) => {
  // 点击图标打开对应内容
  cy.wrap($icon).click();

  // 此处插入针对当前行的测试操作
  // 示例：验证对应行的展开内容可见
  cy.get(`.your-content-selector:eq(${index})`).should('be.visible');

  // 再次点击图标关闭内容
  cy.wrap($icon).click();

  // 可选：验证内容已隐藏
  cy.get(`.your-content-selector:eq(${index})`).should('not.be.visible');
});

关键说明 #

• 使用cy.get('[data-cy=selectorName]')定位所有目标图标，无需依赖:first/:last这类固定位置选择器
• .each()方法会遍历所有匹配到的元素，自动适配表格行数变化
• 可通过index参数区分不同行，针对每行编写差异化的测试逻辑
• 如果业务逻辑不需要每次关闭当前行再处理下一行，可移除关闭步骤的代码

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