How to check if an element contains multiple items in Cypress.io

Question

How can I check if an element contains multiple items in Cypress.io without replicating my code so much?

Current Example:

cy.get(".column")
  .children()
  .contains("Name");

cy.get(".column")
  .children()
  .contains("Age");

cy.get(".column")
  .children()
  .contains("Weight");

cy.get(".column")
  .children()
  .contains("Height");

cy.get(".column")
  .children()
  .contains("Favorite Color");

Liaotung

Answer 1

You can do it in this way:

cy.get('.column')
  .children()
  .should('contain', 'Name')
  .and('contain', 'Age')
  .and('contain', 'Weight')
  .and('contain', 'Height')
  .and('contain', 'Favorite Color')

Satan

Perfect! Thank you for your help!! – Liaotung

That works, but it could yield false positives if the data happens to be 'Age' for example. – Allcot

@DanDascalescu Yes, indeed. You could use the .contains method instead and pass a selector like so: .contains('.my-item', 'Age'). – Prescriptive

Answer 2

Sometimes you can do it in this way:

     const column = ['Name', 'Age', 'Weight', 'Height']

        column.forEach(function (value) {
            cy.get('.column')
              .children()
              .should('contain', value)
        })

Carolacarolan

Answer 3

I'm not saying this is better (in fact it's kind of procedural) but it might be instructive/useful:

const strings=["Name","Age","Weight","Height","Favorite Color"];

cy.get('.column').within(() => {
  for (const string of strings) {
    cy.contains(string);
  }  
})

Universe

Answer 4

I ended up using a regex like so:

function assertContainsMultiple(...msgs) {
  const containsRegex = new RegExp(msgs.join('.+'))
  cy.get('#msg').contains(containsRegex)
}

Partial credit to Github co-pilot--I had the idea, typed "const containsRegex" and it knew what I wanted. Nice.

Yucca