0

I need to open the first card and verify that everything inside matches the hashtag 'Fashion' and then do the same for the next 3 cards and then press the 'next' button and do the same for next 4 cards. how would I do it? I tried the regular way by clicking on the element.eq(0) and verifying everything inside and then cy.go('back') and so on but that's so much code duplication. how would I do it the other way?

First 4 cards:

first 4 cards

Second 4 cards:

second 4 cards

The CSS selector for all of them is the same [class="discover-card"]. please help:) thank you

bad_coder
  • 11,289
  • 20
  • 44
  • 72
Vaddy
  • 11
  • 3

2 Answers2

1

You can use Cypress's .each() functionality to iterate through elements with the same CSS selector.

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
    }
  });
});

If the data between the cards is unique, I'd advise creating a data object you can use to store the data and reference it in your test. You can do this by having each data object have a unique key equal to the text on the card, or by storing them in an array.

// 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);
agoff
  • 5,818
  • 1
  • 7
  • 20
  • I would skip the `cy.go('back')` as it will reload the page and invalidate the `$list` in `.each()` (detached-from-DOM error). – Fody Apr 05 '22 at 02:59
  • Ah yeah, I haven't really ever used `cy.go('back')`. I'll update my answer to better reflect how we could use that. – agoff Apr 05 '22 at 13:23
  • Not quite what I meant - all of the `$card` would get detached as well. – Fody Apr 05 '22 at 20:43
  • That may be true, but I believe the reference to the current index is kept -- I did some light testing around this and it seems to behave fine, even when the elements become detatched (due to `cy.go('back')`. – agoff Apr 06 '22 at 13:16
  • unfortunately it didn't work, since it kept just going back and forth :( this is some very high level coding tho – Vaddy Apr 10 '22 at 01:00
0

If you are concerned about code duplication, put the common code in a function

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()
})
SuchAnIgnorantThingToDo-UKR
  • 3,170
  • 4
  • 16