How to properly test vuetify form validation error with cypress? - vue.js

Question

I have two text input fields in my vuetify form and I want to test validation errors for each of them separately. but I can't find a way to make sure which error element belongs to which input. I mean I can't find the proper selector.
This is a pseudo form:
<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>
And this is the result produced when form has some validation errors for password field:
<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>
Notice how data-cy is acting as an attribute for input field only, therefor can not be used to find error element related to password, I can create cypress test to check if there are any validation errors in the form like this:
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')
})
but I can't make sure that this validation element is really related to the password! it just checks if there are any validation errors in the form and asserts ok if yes.
One way to do it would be wrapping all vuetify components inside but it is not perfect at all.
Thank you so much in Advance!

Answer 1

It seems like a traversal task. You can use parents() to navigate to the common parent, and then find() the children with the specific class 'v-messages__message'.
cy.get("[data-cy=email]")
.parents(".v-input__control")
.find(".v-messages__message")
.should("contain.text", "email is required")
Here is a handy cheatsheet with all the commands available in traversing the dom: https://example.cypress.io/commands/traversal

Answer 2

While Igor's answer is technically correct, you don't need to know so much about the structure of the app.
Since contains works on the element specified and it's children, you can assert the message exists somewhere on the form.
cy.get('[data-cy="email"]')
.parents('form')
.should('contain', 'password is required')
or if you have data-cy="login-form" on the <v-form>,
cy.get('[data-cy="login-form"]')
.should('contain', 'password is required')