Cypress遍历span标签断言时间戳失败，请求排查代码问题

核心问题分析 #

1. 异步执行顺序错误
   Cypress命令是异步队列执行的，cy.get(".timestamp").each()还没完成遍历和数组填充，后续的expect断言就提前执行了，此时数组仍为空，直接导致断言失败。

2. 文本获取逻辑错误
   cy.wrap(element).invoke("text")返回的是元素的文本字符串，而非DOM元素对象，你用element[0].innerText获取文本的写法完全错误，直接使用返回的字符串即可。

3. 断言语法错误

• Chai断言的正确语法是expect(array).to.include(value)，而非includes；
• 用||连接多个expect会导致第一个断言失败后，后续断言直接终止，无法完整验证所有时间戳。

4. 变量作用域问题
   displayedTimeStamp未用let/const声明，属于全局变量，可能引发意外的变量污染问题。

修复后的测试代码 #

describe("Asserting timestamps", () => {
  beforeEach(() => {
    myLoginData // 假设此处为已定义的登录逻辑
  })

  it("Asserting the right timestamps are displaying in Video", () => {  
    const expectedTimestamps = ["0:20", "0:25", "0:45"];
    let displayedTimeStamp = []; 

    cy.get(".timestamp").each((element) => {
      expect(element).to.exist;
      cy.wrap(element)
        .invoke("text")
        .then((text) => {
          displayedTimeStamp.push(text.trim()); // 去除文本前后可能存在的空格
        });
    }).then(() => {
      // 逐一断言所有期望时间戳都存在
      expectedTimestamps.forEach(timestamp => {
        expect(displayedTimeStamp).to.include(timestamp);
      });
      
      // 若时间戳顺序固定，可直接断言数组完全匹配
      // expect(displayedTimeStamp).to.deep.equal(expectedTimestamps);
      
      // 若顺序不固定，排序后再比较
      // expect(displayedTimeStamp.sort()).to.deep.equal(expectedTimestamps.sort());
    });
  });
});

额外注意事项 #

• 修正页面HTML语法错误：你提供的HTML中多个div的class属性缺少前引号（如<div class=video-note-data">），实际页面中需修正为<div class="video-note-data">，否则元素选择器无法正确匹配。
• 时间戳文本若存在前后空格，务必用trim()处理后再存入数组，避免因空格导致断言失败。

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