"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > Compare HTML no Playwright .NET

Compare HTML no Playwright .NET

Publicado em 01/11/2024
Navegar:938

Compare HTML in Playwright .NET

Foto de Miguel Á. Padriñán de Pexels

Automatizar a verificação de texto (e seu HTML) pode ser um desafio se você não estiver confortável com a linguagem e a estrutura que está usando. Ter um tempo limitado para aprender e explorar é o seu próprio desafio. Uma das minhas tarefas para automatizar um teste de fumaça para o nosso projeto foi verificar o texto em cada ambiente, com cada configuração específica tendo sua própria mensagem de boas-vindas. E, admito, não sabia bem por onde começar. Eu sabia o que precisava e descobri onde buscá-lo. Mas juntar todas as peças não foi tão simples quanto parecia.

Comecei precisando obter acesso ao banco de dados. E então trabalhe com nossa configuração para ter certeza de que eu poderia usar as configurações do aplicativo (que informam à estrutura onde encontrar informações e trabalham com as definições de configuração para manter as informações privadas) para conectar-se ao banco de dados durante uma execução. Eu poderia então juntar as peças e obter as informações do banco de dados e compará-las com as informações exibidas para teste.

Manualmente, era simples - eu deveria ter adivinhado que isso significa que não seria tão fácil quanto eu esperava. Observar o HTML e verificar se as coisas estavam no layout adequado foi simples. Eu entendo o suficiente do layout HTML simples que esta foi uma verificação rápida para ter certeza de que as palavras estavam corretas e continuar. Eu fiz esse teste de fumaça com muitas pausas para verificação manual por um motivo. Entre isso e a lista de coisas que eu precisava verificar, eu seria incentivado a aprender, explorar e pedir ajuda para tornar essa automação bem-sucedida e aplicá-la nos outros testes.

Depois que o acesso ao banco de dados (e a string de conexão adequada!) Foi criado, consegui definir o texto das páginas como uma variável. Essa foi a parte fácil: eu sabia o que estava fazendo aqui e me senti realizado ao fazê-lo. Executei o teste Playwright, esperando que o texto da página correspondesse às palavras, mas não aos componentes HTML. E eu estava certo - as palavras adequadas estavam lá, mas o teste falhou com o HTML adicionado.

Hora de pesquisa! A primeira tentativa foi usar Page.ContentAsync(), que é o comando para obter o HTML completo da página, incluindo os cabeçalhos. Isso deve me permitir pesquisá-lo e encontrar a substring do texto, correto? Como primeira ideia, não foi tão horrível – eu tinha o HTML que procurava salvo e tudo o que precisei fazer foi percorrer todo o conteúdo do documento para localizá-lo. Não é eficiente e certamente não é uma boa prática! Deveria me dar o resultado que eu precisava e poderia então ser iterado.

Não aconteceu. Encontrar uma substring na página inteira não era possível rapidamente e eu queria que minha automação fosse rápida. Depois de algumas dezenas de tentativas para que isso funcionasse como eu queria e tendo em mente a regra do negócio (se você não consegue resolver em 45 minutos de esforço, é hora de perguntar a outra pessoa), marquei uma reunião com um dos desenvolvedores. Eu sei que eles estão ocupados e criando uma atualização muito necessária: a reunião saiu com uma nota “podemos reagendar se necessário” anexada.

Enquanto esperava pela reunião, continuei a me preocupar com isso: um dos desafios para reduzir a área era a classe do div – não foi bem nomeada e, com o Bootstrap, o potencial para divs duplicados com o mesmo nome me causou problemas em outras páginas. Conversando com alguém que está aqui há muito mais tempo que eu, descobri que essa SEMPRE era a terceira div da página.

Agora eu tinha um novo plano para encontrá-lo – use o localizador Nth() e encontre o div correto. Adoraria resolver isso, escrever a postagem que estou digitando agora e passar para a próxima edição antes da reunião. Como muitos de vocês devem saber e/ou suspeitar, este é um bom gatilho para que algo urgente surja, e aconteceu. Os planos foram copiados de página em página no organizador por vários dias, até chegar a hora de desenvolvermos em pares.

Trabalhar com esse desenvolvedor é sempre um prazer: temos muito em comum e nos respeitamos. Como bônus, eles são bons em ensinar! Após uma rápida revisão de qual era o objetivo, revisamos as tentativas que fiz para resolver isso. Deixei o último, com os erros no IDE, na esperança de que fosse útil. E agora vamos progredir!

Usando o depurador, verificamos se o HTML estava sendo extraído corretamente. Esta foi uma área que não verifiquei completamente – e felizmente estava correta. Concordamos que o nome da div não era muito útil – o trabalho que fizeram recentemente criou outra div com esse mesmo nome, mas em uma página diferente. Isso foi anotado, mas arquivado até chegar a esse ponto do teste.

As habilidades em NUnit que eles possuem eram necessárias – a maneira mais fácil de verificar esta seção era usar o comando AreEqual. Isso permitiu que o teste verificasse se as strings eram iguais. O dramaturgo estava sendo teimoso. Ela queria localizadores em vez de cordas – ou o contrário – que simplesmente levavam muito tempo para serem criadas. E fiquei feliz em aprender essa técnica – vejo que ela será útil no futuro!

Depois de algumas tentativas para fazer Nth() funcionar, recorremos ao uso daquela estranha classe div – depois de nos certificarmos de que ela foi usada apenas uma vez na página. Isso nos deu um ponto de partida – agora, para descobrir como colocar o HTML ali (felizmente, essa era a única coisa naquela div específica). Mais alguns falsos começos e eu finalmente desistir da ideia de que ContentAsync() para aquela div não funcionaria, levando-os à solução que eu havia tentado e descartado.

InnerHtmlAsync() nos deu o conteúdo exato do div! Espaços e tudo. E esse foi o próximo obstáculo – e estávamos sem tempo para a reunião. Eles estavam dispostos a me dar mais alguns minutos, felizmente, principalmente porque esse era um problema que eles já haviam resolvido antes. Só precisava da sintaxe para remover os espaços: Replace(" ", "") se você estava curioso. E isso permitiu que o teste fosse executado, até que o próximo PauseAsync() que adicionei para verificação manual o interrompesse por um momento.

Eles saíram para almoçar e eu passei o próximo período preparando anotações. Eu tinha outras coisas para descobrir – e agora mais uma pista de como fazer isso.

Declaração de lançamento Este artigo foi reproduzido em: https://dev.to/arleneandrews/compare-html-in-playwright-net-4jfh Se houver alguma violação, entre em contato com [email protected] para excluí-la
Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3