CODEWITHSUNDEEP
cypress
Thomas Perrin
Thomas Perrin

Reputation: 784

How to get multiple elements with data-cy attributes

I have a table with all cells marked with the data-cy attribute as so: [data-cy="cell-${row}-${column}].

Individually I have no trouble to get each cell with the classic cy.get, for example cy.get("[data-cy=cell-2-17]").click(), but I try to test the click on multiple cells holding the control key but I couldn't achieve that.

In this answer it says to simply concat the selectors passed to cy.get but it didn't work for me, I tried with and without the " around the data-cy names:

cy.get('[data-cy="cell-2-17"][data-cy="cell-4-10"]').click({multiple: true, ctrlKey: true})`

Could you tell me how to get multiple elements using the data-cy attribute?

Upvotes: 3

Views: 4967

Answers (1)

Fody
Fody

Reputation: 32062

If you concatenate selectors (without space or + between), it means the element must have all those selectors.

There's not really a concise way to provide a list of required attributes.

Two things that help are

  1. wildcards and filters

    const cellsWanted = ['cell-2-17', 'cell-4-10']

cy.get('[data-cy^="cell-"]')   // wildcard anything that starts with "cell-"
  .filter((index, el) => cellsWanted.some(cell => 
                         el.getAttribute('data-cy') === cell))
  .click({multiple: true, ctrlKey: true})

  1. Multiple selectors with comma between

    Just found an easier way using jquery multiple selectors

    cy.get('[data-cy="cell-2-17"], [data-cy="cell-4-10"]')
  .should('have.length', 2)
  .click({multiple: true, ctrlKey: true})

Upvotes: 7

Related Questions