CODEWITHSUNDEEP
cypress
Steve Staple
Steve Staple

Reputation: 3279

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

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.

Upvotes: 43

Views: 35634

Answers (2)

thul
thul

Reputation: 1186

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')

Upvotes: 63

Przemyslaw Jan Beigert
Przemyslaw Jan Beigert

Reputation: 2486

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(...)

Upvotes: 35

Related Questions