I am wondering the best way to tackle this problem:

• I have multiple DOM elements that I want to iterate through, they all have the same src path aside from the character name.
• I want to validate that each src matches any player name value from an array

const playerName = ["_player_One_", "_player_two_", "_player_three_", "_player_four_"]

    cy.get("myElement").each(($match) => {
        cy.wrap($match).each(($el) => {

            cy.get($el).should("include.attr", "src", `/foo/bar/art/all-art-${playerCharacter[]}.png`);
        });
    });

I recognise in it's current form, I'll be returned with the whole array output but I'm just sharing for reference the angle I'm ing from.

Any help would be appreciated, even if it's a new way to structure that I hadn't considered.

Thanks in advance!

I am wondering the best way to tackle this problem:

• I have multiple DOM elements that I want to iterate through, they all have the same src path aside from the character name.
• I want to validate that each src matches any player name value from an array

const playerName = ["_player_One_", "_player_two_", "_player_three_", "_player_four_"]

    cy.get("myElement").each(($match) => {
        cy.wrap($match).each(($el) => {

            cy.get($el).should("include.attr", "src", `/foo/bar/art/all-art-${playerCharacter[]}.png`);
        });
    });

I recognise in it's current form, I'll be returned with the whole array output but I'm just sharing for reference the angle I'm ing from.

Any help would be appreciated, even if it's a new way to structure that I hadn't considered.

Thanks in advance!

• javascript
• html
• arrays
• loops
• cypress

Share Improve this question Follow asked Aug 24, 2021 at 10:05 BLBBLB 4911 silver badge44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Convert player names to links array, assert with 'oneOf'.

Works if player's elements change order.

const players = ["_player_One_", "_player_two_", "_player_three_", "_player_four_"]

const links = players.map(player => `/foo/bar/art/all-art-${player}.png`)


it('all elements have a player', () => {

  cy.get('div[src^="/foo/bar/art/all-art-"]')
    .each($el => {
      cy.wrap($el).invoke('attr', 'src').should('be.oneOf', links)
    })
})


it('all players have an element', () => {

  cy.get('div[src^="/foo/bar/art/all-art-"]')
    .then($els => {
      const attrLinks = [...$els].map($el => Cypress.$($el).attr('src'))
      links.forEach(link => {
        cy.wrap(link).should('be.oneOf', attrLinks)
      })
    })
})

You can do something like this:

const playerName = ["_player_One_", "_player_two_", "_player_three_", "_player_four_"]

cy.get('myElement').each(($ele, index) => {
  expect($ele.attr('src')).to.include(playerName[index])
})