如何让赛普拉斯只处理可见元素？

Posted 2023-02-15

【中文标题】如何让赛普拉斯只处理可见元素？

【英文标题】：How do I get Cypress just to process the visible element?

【发布时间】：2019-07-01 15:18:47

【问题描述】：

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

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

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

【问题讨论】：

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

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

【参考方案1】：

知道了。你可以使用伪选择器:visible 这样你就可以做到了

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

如果有多个可见，则选择第一个可见输入

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

【参考方案2】：

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

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

这就是最终对我有用的东西：

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

【讨论】：

那个过滤器应该用引号引起来，不是吗？像这样：.filter(':visible')

这对我也有用，第一个没用（2021 年 11 月更新）