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

Question

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

如何使用 Cypress 选择以 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

根据他们的最佳实践文档，您应该使用data-*属性为您的选择器提供上下文，并将它们与 CSS 或 JS 更改隔离开来。

建议您遵循以下准则：

• 基于CSS不要在定位元素属性，例如：id，class，tag。
• 不要针对可能改变其textContent.
• 添加data-*属性以更轻松地定位元素。

相反，您应该添加一个data-cy属性来定位您正在测试的选择器。

您可以使用此 Playground来确定唯一的选择器。