Cypress: how to check if a string interpolation contains any value from an array

user_16740438 0
Viewed 1268

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 coming from.

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

Thanks in advance!

cypress arrays html loops javascript
2 Answers

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

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])
})
user_45712710
Related