尝试循环遍历 Cypress 中的 span 标签列表，但断言失败

Question

我试图循环浏览span标签列表，然后断言视频上显示的所有三个时间戳都是正确的。当我在 Cypress 中运行测试时，出现以下错误：

预计 [] 包括 0:20

在尝试做出第一个断言后它就崩溃了。

我编写的测试可能过于复杂，但我想看看是否有人可以通过查看我的代码并找出问题所在来提供帮助。我编写测试的方法是循环遍历元素列表，将每个值存储在空数组中，然后断言它们。

describe("Asserting timestamps", () => {
  beforeEach(() => {
    myLoginData
  })

  it("Asserting the right timestamps are displaying in Video", () => {  
    displayedTimeStamp = []; 
    cy.get(".timestamp").each((element) => {
      expect(element).to.exist;
      cy.wrap(element);
      .invoke("text")
      .then((element) => {
        displayedTimeStamp.push(element[0].innerText);
      });
    })

    expect(displayedTimeStamp).includes("0:20") || 
    expect(displayedTimeStamp).includes("0:25") ||
    expect(displayedTimeStamp).includes("0:45")
  });
});

<div class="video-timestamp-editor"
  <div class="video-notes-list"
    <div class=video-note-data">
      <span class="timestamp">0:20</span>
      <span class="video-note-author">Alexander the Great</span>
      <span class="note-text">" This is a note "</span>
    </div>
    <div class=video-note-data">
      <span class="timestamp">0:25</span>
      <span class="video-note-author">Alexander the Great</span>
      <span class="note-text">" This is another note "</span>
    </div>
    <div class=video-note-data">
      <span class="timestamp">0:45</span>
      <span class="video-note-author">Alexander the Great</span>
      <span class="note-text">" This is a third note "</span>
    </div>
  </div>
</div>

Answer 1

考虑使用映射函数而不是.each()

cy.get('.timestamp')
  .then($ts => [...$ts].map(ts => ts.innerText))
  .should('deep.eq', ['0:20', '0:25', '0:45'])

它提供了额外的检查来确保时间戳序列是否正确，并且要短一些。

唯一的问题是，该映射函数既复杂又丑陋。

但看看 Gleb Bahmutov 的柏树地图，它让事情变得更漂亮了：

cy.get('.timestamp')
  .map('innerText')
  .should('deep.eq', ['0:20', '0:25', '0:45'])