Can't click on one of multiple elements returned by findAll

• Cypress Testing Library version: 5.0.2
• node version: 12.0.0
• yarn version: 1.15.2

Relevant code or config:

cy.findAllByTestId("droppable").then(result => {
      // Convert to array because the result is a jQuery object, tried it as well without converting
      const resultArray = Array.from(result);
      resultArray[1].click({ force: true });
    });

What you did:

My issue is that I can’t click on a single element returned by findAllByTestId. In my console, I can see that the query resolves to 2 DOM elements. When clicking either the first or the second, I see that the findAllByTestId query is executed, but the click command is not.

If I try clicking a nonexistent element from the array like resultArray[2], I do get an error that undefined cannot be clicked.

For context, the following does sort of work:

cy.findAllByTestId("droppable").click({multiple: true})

Using this snippet, I see that the first element was indeed clicked. As a result, both elements disappear and therefore I get an error that Cypress can’t click the second. However, I don’t want to click all elements, I want to click on just one of them.

What happened:

All commands in my test are executed except the click command (32 is findAllBy, 33 should have been the click command but is the next command).

Reproduction:

I tried reproducing but I couldn’t get the Cypress suite to work in CodeSandbox.

Problem description:

See above.

Suggested solution:

I might be overlooking something but I don’t find the docs very helpful at the moment: it lists one example of the combination of findAll with a user event, which I don’t even think is valid code:

cy.findAllByText('Jackie Chan').click()

click() should in this case probably be click({multiple: true}) but an example showcasing my issue would be even more helpful I believe.

Thanks in advance! Hope I posted in the right place because I believe this has to do with the Cypress implementation and not with the findAll API.

[mbaranovski]

@FlopieUtd Have you tried it with .eq(nthItem)?

Ref. https://docs.cypress.io/api/commands/eq.html#Syntax

[VasilyShelkov]

If for some reason you do not want to go with the solution by @kentcdodds and you are still keen on using the All variant is to use Cypress’ cy.spread which then allows you to click on one of the elements found. e.g.

cy.findAllByText('Jackie Chan').spread((firstButton, secondButton) => {
    secondButton.click()
})

There are probably other ways to do this, I think a good way to think about findAllBy* queries, is what you would do in Cypress if you used cy.get and it returned an array. You could use the other operators like cy.each and cy.first, although I haven’t tested these and only used cy.spread myself