javascript - dom 元素属性上的 cypress 选择器

Question

我的网站上有两个 svg 元素:

<svg data-icon="times" ... > ...</svg>
<svg data-icon="sync" ... > ...</svg>

我喜欢根据它们的属性 data-icon 选择它们。像这样:

cy.get('svg').filter(?)

我没有在 cy.get 和 cy.filter 部分的文档中找到任何内容。我知道我可以通过在元素周围分配类或 id 或使用 cy.each 函数来获取一个元素来解决这个问题，但对于我的测试来说，这是一个常见问题，我正在寻找最舒适的解决方案。

Answer 1

您可以直接定位数据属性。代码如下所示:

cy.get('[data-icon="times"]')

这将生成具有“times”的 data-icon 属性的元素。

您可以通过仅明确定位具有该数据属性的 svg 元素来更加具体，如下所示:

cy.get('svg[data-icon="times"]')

Here's the section of the docs for more reading.