如何让Cypress只处理可见元素？

Question

我正在尝试使用这个元素：

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

当我运行它时，它告诉我有不止一个它们，所以它无法执行。

我尝试添加{ force：true } - 但没有任何区别。

我尝试查看每个元素，但如果该元素不可见，则会失败：

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

我该如何做到仅在元素可见时才进行输入？我不希望它在此方面出现错误。

- Steve Staple

---

你知道在这个测试中哪个输入是可见的吗（例如第一个/第三个/最后一个）？ - Przemyslaw Jan Beigert

不，我只能看到搜索文本。 - Steve Staple

Answer 1

我在尝试获取一个按钮时，下面的代码对我并没有起作用：

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

最后我找到了这个可以正常工作的代码：

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

- thul

---

那个筛选器应该加引号，对吧？像这样：.filter(':visible') - Rüdiger Schulz

这个对我也起作用了，第一个没有起作用（更新于2021年11月）。 - Don Diego

https://docs.cypress.io/api/commands/filter - undefined

Answer 2

明白了。你可以使用伪选择器:visible，这样你就能够执行...

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

或者在多个可见的输入框中选择第一个可见的输入框

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

- Przemyslaw Jan Beigert