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

Question

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

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

当我运行它时，它告诉我有超过 1 个，所以它不能这样做。

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

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

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

如何让它只输入元素可见的位置？我不希望它在这方面失败。

Answer 1

这对我试图获得的按钮不起作用：

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

这就是最终为我工作的原因：

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

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