如何打開卡片並驗證里面的內容然后打開第二張卡片並驗證內容等等

Question

我需要打開第一張卡片並驗證里面的所有內容是否與主題標簽“時尚”匹配，然后對接下來的 3 張卡片執行相同操作，然后按“下一步”按鈕並對接下來的 4 張卡片執行相同操作。 我該怎么做？ 我嘗試了常規方式，點擊element.eq(0)並驗證里面的所有內容，然后cy.go('back')等等，但代碼重復太多了。 我該怎么做？

前4張牌：

第二張4張牌：

所有這些的 CSS 選擇器都是相同的[class="discover-card"] 。 請幫助:)謝謝

Answer 1

您可以使用賽普拉斯的.each()功能來遍歷具有相同 CSS 選擇器的元素。

cy.get('.discover-card').each(($card, index) => {
  // cy.go('back') can cause the list to become detached, so find element by index of original list.
  cy.get('.discover-card').eq(index).click();  
  // validations after clicking the card
  // unsure on this exact function, but was provided in question
  cy.go('back').then(() => {
    // if this is the fourth item checked, we need to press the next button.
    if ((index + 1) % 4 === 0) {
      cy.get('.next-btn').click(); // this selector is the next button on the carousel
    }
  });
});

如果卡片之間的數據是唯一的，我建議創建一個數據對象，您可以使用它來存儲數據並在測試中引用它。 為此，您可以讓每個數據對象都有一個與卡片上的文本相同的唯一鍵，或者將它們存儲在一個數組中。

// unique keys
const data = { fashion: { foo: 'bar' }, beauty: { foo: 'bar2' }, ... };
// array
const data = [{ foo: 'bar' }, { foo: 'bar2' }, ...];
...
// unique keys
cy.wrap($card).should('have.attr', 'foo', data[$card.text()].foo);
// array
cy.wrap($card).should('have.attr', 'foo', data[index].foo);

Answer 2

如果您擔心代碼重復，請將通用代碼放在一個函數中

const expectedData [
  { index: 1, title:'Fashion', ... } // anything you want to check
  { index: 2, title:'Beauty', ... } 
]

const checkCard = (cardIndex) => {
  const data = expectedData[cardIndex]
  cy.get('.discover-card')
    .should('contain', data.title)
    .click()                  // open card

  // test card internals

}

Cypress._.times(3, (pageNo) => {  // loop 3 times between pages
  Cypress._.times(4, (cardNo) => {  // loop 4 times for cards
    const cardIndex = ((pageNo+1) * (cardNo+1)) -1
    checkCard(cardIndex)
    cy.go.back()                // revert to menu
  })
  cy.get('.next-btn').click()
})