如何修正Cypress循环逻辑：遍历li元素并跳过video类元素

需求 #

遍历页面上的所有<li>元素，跳过类为video的元素，仅对类为image的元素执行验证操作。

现有HTML结构 #

<div id="images">
  <ul>
    <li class="image"></li>
    <li class="video"></li> 
    <li class="image"></li>
    <li class="image"></li>
  </ul>
</div>

原代码的问题 #

你提供的代码存在多处逻辑和用法错误：

• 错误地在同步for循环中嵌套Cypress异步命令，导致判断逻辑无法正确执行
• 使用contains('video')判断类名，实际上这个方法是用来匹配元素文本内容的
• 循环条件$lengthAllImgs - 1会遗漏最后一个元素，且变量名$img和img不统一
• 用break会直接终止整个循环，而不是跳过当前video元素

修正方案 #

方案一：使用.each()遍历并跳过指定元素 #

这是Cypress推荐的元素遍历方式，能正确处理异步操作：

// 假设image.ALL_ITEMS是指向所有<li>的选择器，例如 '#images ul li'
cy.get(image.ALL_ITEMS).each(($li) => {
  // 判断当前元素是否为video类
  if ($li.hasClass('video')) {
    return; // 跳过当前元素，继续下一次遍历
  }

  // 对image类元素执行验证操作
  expect($li).to.have.class('image');
  // 示例：验证元素可见
  cy.wrap($li).should('be.visible');
  // 可添加更多自定义验证逻辑，比如检查元素属性、子元素等
});

方案二：直接过滤目标元素（更简洁） #

如果仅需要处理image类元素，可直接通过选择器过滤，省去判断步骤：

// 直接选中所有类为image的<li>元素
cy.get('#images ul li.image').each(($li) => {
  // 执行验证操作
  expect($li).to.have.class('image');
  cy.wrap($li).should('be.visible');
  // 其他验证逻辑...
});

关键注意点 #

• Cypress的命令是异步的，避免用普通for循环直接嵌套Cypress命令，优先使用.each()
• 判断元素类名请用hasClass()方法，contains()仅用于匹配文本内容
• 跳过元素时使用return，只会终止当前迭代，不会中断整个遍历流程

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