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

Question

我的 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>

这是当表单对密码字段有一些验证错误时产生的结果：

<div class="v-input v-input--has-state">
  <div class="v-input__control">
    <div class="v-input__slot">
      <div class="v-text-field__slot">
        <input data-cy="password" id="input-29" type="text" />
      </div>
    </div>
    <div class="v-text-field__details">
      <div class="...." role="alert">
        <div class="...">
          <div class="v-messages__message">password is required</div>
        </div>
      </div>
    </div>
  </div>
</div>

注意 data-cy 如何仅充当输入字段的属性，因此不能用于查找与密码相关的错误元素，我可以创建 cypress 测试来检查是否存在任何验证错误形式如下：

  it('shows password validation error', () => {
     cy.visit(loginUrl)
     cy.cyElement('email').type('test@email.com')
     // do not fill password
     cy.get('button').submit()
     cy.get('.v-messages__message').should('not.be.empty')
  })

但我无法确定这个验证元素是否真的与密码相关！它只是检查表单中是否存在任何验证错误，如果是则断言正常。

一种方法是将所有 vuetify 组件包装在里面，但它并不完美。

非常感谢您！

Answer 1

好像是遍历任务。您可以使用 parents() 导航到共同父级，然后 find() 具有特定 class 'v-messages__message'.

的子级

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

这是一个方便的备忘单，其中包含遍历 dom 的所有可用命令：https://example.cypress.io/commands/traversal

Answer 2

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

由于 contains 作用于指定的元素及其子元素，您可以断言该消息存在于表单的某处。

cy.get('[data-cy="email"]')
 .parents('form')
 .should('contain', 'password is required')

或者如果您在 <v-form>、

上有 data-cy="login-form"

cy.get('[data-cy="login-form"]')
 .should('contain', 'password is required')

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

How to properly test vuetify form validation error with cypress?

vue.js

vuejs2

vuetify.js

cypress