Javascript – Asserting Vuetify v-text-field value using Cypress

Problem:

I am writing an E2E test suite using Cypress for my Vue+Vuetify frontend. I want to assess the value of a read-only v-text-field as its value is a computed property based on previous user input.
So my v-text-field simply looks like:

<v-text-field
    data-cy="npa-display"
    :readonly="true"
    :model-value="this.npa"
    class="mt-4"
></v-text-field>

Then in my Cypress test I have this assertion:

cy.get("[data-cy='npa-display']").contains("Test-Team");

This assertions fails unexpectedly because it does not find the text in the selected DOM tree. However, when I manually search the entire DOM, the expected text is nowhere to be found, while the text is actually displayed on my screen.

1. How can it be that something that is shown on screen can not be found in the HTML DOM?
2. And, more importantly, how can I assert the v-text-field’s value using Cypress?

Solution:

As mentioned, v-text-field uses an <input> to hold the text as a .value property.

The Vuetify code you posted probably looks like this in the DOM at runtime

<div class="v-text-field" data-cy="npa-display">
  <div class="v-input__control">
     ... // more vuetify feature divs here
     <input class="v-field__input">

In Cypress to assert the text use

cy.get('data-cy="npa-display"]')      // data-cy will be on top-level div
  .find('input')                      // drill down to input
  .should('have.value', 'Test-Team')