选择类名称以Cypress开头的元素

Question

我有一些在React中动态生成的类。它们始终具有相同的前缀，但结尾均不同

如何使用赛普拉斯选择以X开头的类名？

<div class="this-is-always-the-same-abcd"></>
<div class="this-is-always-the-same-efgh"></>
<div class="this-is-always-the-same-ijkl"></>

Answer 1

对于确实需要定位类并且由于某些原因而不能（或不想）使用data-属性的每个人。解决方案是使用标准的CSS选择器。

    cy.get('*[class^="this-is-always-the-same"]')

这将获取所有以this-is-always-the-same开头的类的元素。

Answer 2

感谢@SergeS，您的回答对我很有帮助。让我补充一点，它可以与任何类型的标签一起使用，因此这也是有效的

cy.get('*[data-cy^="introCard"]')

在我的情况下，“ introCard”只是一些较长单词的开头

Answer 3

根据它们的 Best Practices Documentation ，应使用 data-* 属性为选择器提供上下文，并使它们与CSS或JS更改隔离。

建议您遵循以下准则：

• 不要基于CSS属性来定位元素，例如： id ， class ， tag < / strong>。
• 不要定位可能会更改其 textContent 的元素。
• 添加 data-* 属性，以便更轻松地定位元素。

相反，您应该添加 data-cy 属性以定位要测试的选择器。

您可以使用 this playground 确定唯一的选择器。