使用Cypress each循环遍历列表时测试失败的问题咨询

核心问题解析 #

1. 索引参数被错误覆盖：你在.each()的回调函数里给索引参数i设置了默认值i = 0，导致Cypress自动传入的递增索引被覆盖——每次循环i都被重置为0，所以始终用formats[0]做验证，自然只有第一项能匹配成功。
2. 文本匹配不精准：网页里的<a>元素文本带有前后空格，且是Text 1（空格分隔）格式，但测试代码里的formats数组用的是Text1（无空格），就算索引正确，也会因为文本不匹配导致验证失败。

正确解决方案 #

方案1：修正索引+精准匹配文本

去掉索引参数的默认值，直接使用Cypress传入的索引，同时让测试数组的文本和网页实际文本一致：

cy.get('#my-list li') // 用id选择器更精准高效
  .each((format, i) => {
    // 完全匹配网页实际的文本内容（包含前后空格）
    const formats = [" Text 1", "Text 2 ", "Text 3 "];
    cy.wrap(format).should("contain", formats[i]);
  });

方案2：去除前后空格后匹配（更健壮）

如果不需要关心文本的前后空格，可以提取文本并trim后再验证，避免空格干扰：

cy.get('#my-list li')
  .each((format, i) => {
    const formats = ["Text 1", "Text 2", "Text 3"];
    // 提取元素文本并去除前后空格
    cy.wrap(format).invoke('text').then(text => {
      expect(text.trim()).to.equal(formats[i]);
    });
  });

方案3：批量验证文本集合（更简洁）

如果不需要逐个循环操作，也可以直接断言所有列表项的文本集合，代码更简洁：

const expectedTexts = ["Text 1", "Text 2", "Text 3"];
cy.get('#my-list li a')
  .invoke('text')
  .then(texts => {
    // 对每个文本做trim处理后和预期数组对比
    const trimmedTexts = texts.map(text => text.trim());
    expect(trimmedTexts).to.deep.equal(expectedTexts);
  });

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