Vue.js 如何使用cypress正确测试vuetify表单验证错误？

我的vuetify表单中有两个文本输入字段，我想分别测试每个字段的验证错误。但是我找不到一种方法来确定哪个错误元素属于哪个输入。我的意思是我找不到合适的选择器

这是一种伪形式：

   <v-text-field
      ...  
      :error-messages="emailErrors"
      data-cy="email"
    ></v-text-field>

    <v-text-field
      ...
      :error-messages="passwordErrors"
      data-cy="password"
    ></v-text-field>

    <v-btn type="submit" >Login</v-btn>

但是我不能确定这个验证元素是否真的与密码有关！它只是检查表单中是否有任何验证错误，如果有则断言ok

一种方法是将所有vuetify组件包装在内部，但它根本不是完美的

---

提前非常感谢

这似乎是一项遍历任务。您可以使用

parents（）

导航到公共父级，然后

find（）

使用特定类“v-messages\uu message”查找子级

cy.get("[data-cy=email]")
     .parents(".v-input__control")
     .find(".v-messages__message")
     .should("contain.text", "email is required")

---

下面是一个方便的备忘单，其中包含了遍历dom时可用的所有命令：

它看起来像是一个遍历任务。您可以使用

parents（）

导航到公共父级，然后

find（）

使用特定类“v-messages\uu message”查找子级

cy.get("[data-cy=email]")
     .parents(".v-input__control")
     .find(".v-messages__message")
     .should("contain.text", "email is required")

---

下面是一个方便的备忘，其中包含了遍历dom时可用的所有命令：

虽然Igor的答案在技术上是正确的，但您不需要对应用程序的结构了解太多

由于

contains

作用于指定的元素及其子元素，因此可以断言消息存在于表单的某个位置

cy.get（'[data cy=“email”]'））
.家长（‘表格’）
.should（'包含'，'需要密码'）

或者如果您在

上有

数据cy=“login form”

cy.get（'[data cy=“login form”]'））
.should（'包含'，'需要密码'）

虽然Igor的回答在技术上是正确的，但你不需要对应用程序的结构了解太多

由于

contains

作用于指定的元素及其子元素，因此可以断言消息存在于表单的某个位置

cy.get（'[data cy=“email”]'））
.家长（‘表格’）
.should（'包含'，'需要密码'）

或者如果您在

上有

数据cy=“login form”

cy.get（'[data cy=“login form”]'））
.should（'包含'，'需要密码'）

谢谢，很好的解决方案！我不想依赖信息本身，因为它可能会随着时间的推移而改变。但是该结构是由vuetify实现的，不太可能更改。好吧，我注意到您有

should（'not.be.empty'）

，但并非所有输入都只有一个验证。我认为vuetify只显示UISo中该字段的第一个验证错误，而不关心错误消息？不使用自定义规则？不！这不是我担心的：）谢谢你，很好的解决方案！我不想依赖信息本身，因为它可能会随着时间的推移而改变。但是该结构是由vuetify实现的，不太可能更改。好吧，我注意到您有

should（'not.be.empty'）

，但并非所有输入都只有一个验证。我认为vuetify只显示UISo中该字段的第一个验证错误，而不关心错误消息？不使用自定义规则？不！这不是我担心的：）

cy.get("[data-cy=email]")
     .parents(".v-input__control")
     .find(".v-messages__message")
     .should("contain.text", "email is required")