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

我有一些类是在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"></>

---

根据选择器的，您应该使用

数据-*

属性为选择器提供上下文，并将其与CSS或JS更改隔离开来

建议您遵循以下指导原则：

• 不要将基于CSS属性的元素作为目标，例如：

  id

  ，

  类

  ，

  标记

• 不要针对可能更改其

  文本内容的元素

• 添加

  数据-*

  属性，使元素更容易定位

相反，您应该添加一个

data-cy

属性来针对您正在测试的选择器

---

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

对于所有真正需要目标类并且由于某些原因不能（或不想）使用

数据-

属性的人。解决方案是使用标准css选择器

cy.get（'*[class^=“这总是一样的”]”）

---

这将得到所有以

开头的元素，这总是一样的
谢谢@SergeS，你的回答对我很有帮助。让我补充一点，它适用于任何类型的标记，因此这也是有效的

cy.get（'*[data cy^=“introCard”]'）

在我的例子中，“introCard”只是一些较长单词的开头
是的，这是推荐的，但有时您不能使用data-*属性（例如，当您无法完全控制特定部分时），选择
类的名称是非常不鼓励的，因为它会创建不稳定的测试。@Manuel Abascal是，我不鼓励任何人使用类作为查找元素的主要方式（如答案中所述）。但也有一些边缘情况，当您基本上无法使用数据属性时（例如，HTML输出的一部分由您无法控制的库呈现）过了一段时间再回到这一点。我们一直在广泛使用Cypress进行测试，现在我明白了为什么不鼓励使用类名。我们使用react css模块，类名从来都不一样+开发人员倾向于重命名类或重新构造布局，所以我们几乎只选择数据选择器。这样更稳定+精明QA工程师可以在需要的时候添加他们自己的钩子。@AdrianE我们也使用数据属性，因为我们案例中的类甚至不能涵盖所有选项，但我想指出的是，有一些边缘案例，例如当我们使用react select时，我们需要在cypress中对其进行操作-除了同时使用classes，别无他法，如果您想使用MUI选择器选择日期/时间，您没有太多选择。。。