[Cypress] Encontrando o valor que não está vísivel dentro do componente ao inspecionar
Nathan Araújo
Posted on May 14, 2024
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.
Posted on May 14, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 30, 2024