For automated tests using Cypress, how to capture element values where values are not showing in the html body

In our web application built with Angular, there some places where angular forms are used and due to that html elements values are not present in the html body.

We are implementing automated tests using Cypress for this angular web application. Wondering is there is anyway we can track the values of such elements?

We tried several ways to catch as bellow but unfortunately no luck.

cy.get('*[data-test="employee-details-contact-city"]').should('have.text', 'Kista')
cy.get('.address-detail-container > .mat-mdc-tooltip-trigger').should('have.text', 'Kista')
cy.get('.mat-mdc-tooltip-trigger:nth-child(3)').should('have.text', 'Kista')

Solution

You will not see the city name "Kista" in the HTML because the element is an <input> and it holds the text internally (in the browser code) as value.

To test it use Cypress invoke('val') like this

cy.get('input[data-test="employee-details-contact-details"]')
  .invoke('val')
  .should('eq', 'Kista')

or directly in the assertion

cy.get('input[data-test="employee-details-contact-details"]')
  .should('have.value', 'Kista')