How do I get Cypress just to process the visible element?

Question

I am trying to use this one element:

cy.get('[data-cy-component=single-picker-search] input').type('Live');

When I run it, it tells me there are more than 1 of them, so it can't do it.

I tried adding { force: true } - that made no difference.

I tried looking at each element, but this fails if the element is not visible:

cy.get(singlePickerSearch).each(($el) => {
  cy.wrap($el).type('Live' + '{enter}');
});

How do I make it just type where the element is visible? I do not want it to fail on this.

Do you know which of input is visible during this test (e.g. first/third/last)? — Przemyslaw Jan Beigert, Commented Feb 7, 2019 at 13:45

thul · Accepted Answer · 2020-02-17 21:11:18Z

58

This didn't work for me on a button I was trying to get:

cy.get('[data-cy-component=single-picker-search] button:visible')

This is what ended up working for me:

cy.get('[data-cy-component=single-picker-search]').filter(':visible')

answered Jan 27, 2020 at 15:08

thul

1,12612 silver badges15 bronze badges

2

That filter should be in quotes, shouldn't it? Like this: .filter(':visible')
– Rüdiger Schulz
Commented Feb 17, 2020 at 17:58
1

this worked for me too, the first one did not work (updated nov 2021)
– Don Diego
Commented Nov 23, 2021 at 17:07
docs.cypress.io/api/commands/filter
– Ryan
Commented Sep 7, 2023 at 15:59

Add a comment |

Przemyslaw Jan Beigert · Accepted Answer · 2019-02-07 14:21:57Z

34

Got it. You can use pseudo selector :visible so you will be able to do

cy.get('[data-cy-component=single-picker-search] input:visible').type(...)

or in case if more than one is visible select first visible input

cy.get('[data-cy-component=single-picker-search] input:visible').first().type(...)

answered Feb 7, 2019 at 14:21

2,4563 gold badges15 silver badges21 bronze badges

Add a comment |

2 Answers 2