DEV Community

Nathan Araújo
Nathan Araújo

Posted on

1

[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)
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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
})
Enter fullscreen mode Exit fullscreen mode

ou

cy.get(locator).invoke('val').should('contain', valor);
Enter fullscreen mode Exit fullscreen mode

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.

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay