[Cypress] Encontrando o valor que não está vísivel dentro do componente ao inspecionar

Já pegou um cenário onde você precisa buscar o valor de um elemento, você está vendo que o valor está renderizado na página, mas quando executa o comando, por exemplo, em cypress:

cy.get(locator).should('have.text', text)

acontece um erro e diz que o elemento não tem esse valor, mesmo você vendo esse valor na sua cara? =/

Alguns componentes não podem estar trazendo esse valor, e se você inspecionar você pode encontrar o elemento mais ou menos assim:

<input id="campo-id" minlength="1" name="campo-id" required="" type="number" class="form-input ng-valid" placeholder="Informe o valor da compra">

No elemento em si não é mostrado o valor, mas ele é mostrado para o usuário, como então conseguir buscar esse valor desse input pra fazer sua validação.

Você pode usar o commando para buscar esse valor com:

cy.get(locator).invoke('val').then(valor => {

  // Fazer suas ações/validações com esse valor

})

ou

cy.get(locator).invoke('val').should('contain', valor);

Agora esse valor estará disponivel pra você.

Esse ocultamento pode ser por alguns motivos, desde como o componente está sendo desenvolvido, no qual o CSS que está sendo usado está mascaradno esse valor ou questão de atualização assíncrona do estado ou autalização do DOM.

Tente entender com seu time o real motivo, mas nesse meio tempo, já agora não deve ser um problema pra você, visto que consegues recuperar esse valor.

E aí, já tinha visto isso acontecer? Tem outra solução?

Se não, já salva a dica para quando enfrentar esse comportamento.