Eu já sofri com isso no passado, ao tentar inspecionar um elemento em uma página da web, ele desaparece rapidamente antes que você possa examiná-lo completamente. Isso torna difícil depurar problemas ou entender a estrutura da página que a gente quer automatizar.
Você está lá querendo identificar os elementos de forma correta, ver os atributos e de repente você se depara com uma tooltip que está desaparecendo, no qual só aparece quando você coloca o mouse em cima, mas logo desaparece quando remove o mouse ou é aquela lista que quando tenta inspecionar um elemento, ela some automaticamente. E você fica pensando, mas e agora, como que vou inspecionar esse elemento que estou precisando?
Fazendo uma nota rápida aqui:
Visto os exemplos iniciais que comentei (Apenas para elucidar o problema que quero ajudar a resolver no seu dia-a-dia), alguém pode dizer, mas de repente esse teste aí não seja para você automatizar nessa camada de UI, deveria ser um unitário ou componente. Não quero entrar nesse discussão agora, porque uma coisa é que talvez de fato não deveria, outra é, beleza, não deveria, mas no momento eu preciso automatizar, e quando essa realidade bate a porta, não vou mostrar como pode ser feito? Seria no mínimo ridículo, não é? haha Mas tem muita gente falando tanto de melhores práticas e estratégias que descolam da realidade do cotidiano de algum QA por aí, jogam as "melhores práticas" e não dão alguma solução provisória enquanto o contexto do projeto não muda. Percebe?
Mas voltemos aqui para entender como podemos debugar esse bendito elemento que some. Felizmente, você pode usar uma técnica simples no console das Ferramentas de Desenvolvedor (DevTools) do seu navegador para superar esse problema. Aqui está como fazer isso:
Abra as Ferramentas de Desenvolvedor do seu navegador (normalmente acessíveis pressionando F12 ou clicando com o botão direito do mouse em uma página e selecionando "Inspecionar" ou "Inspeção").
Na barra de ferramentas das Ferramentas de Desenvolvedor (DevTools), navegue até a aba Console.
Digite o seguinte comando no console e pressione Enter:
setTimeout(function() {
debugger;
}, 5000);
Isso define um temporizador para 5000 milissegundos (5 segundos). Depois desse intervalo, o comando debugger será executado.
Após executar o comando, execute a ação que faz com que o elemento que você deseja inspecionar apareça na página (por exemplo, passe o mouse sobre um elemento, clique em um botão, etc.).
Quando o temporizador expirar, a execução do código será interrompida e você entrará no modo de depuração do console.
Agora você pode inspecionar o elemento e sua estrutura, mesmo que ele tenha desaparecido rapidamente anteriormente.
Essa técnica pode ser uma ferramenta útil ao trabalhar com páginas da web dinâmicas ou com elementos que desaparecem rapidamente. Experimente ajustar o tempo limite e usar outras técnicas de depuração para obter uma compreensão mais profunda da página que está inspecionando.
E aí, tava sofrendo pra inspecionar seu elemento?
Essa é uma das formas. Você sabe outras?
Compartilha aí para que mais pessoas possam ser ajudadas!
Top comments (0)