Automatizando Páginas Web com o BotCity Inspector¶

Uma prática bastante comum no desenvolvimento de automações Web é a utilização de seletores específicos para interagir com os elementos da página, como uma alternativa à visão computacional.

Essa estratégia se torna bastante interessante principalmente para quando queremos construir um código mais resiliente e evitar problemas de resolução. Podemos simplesmente interagir com a estrutura da página por meio das propriedades dos elementos.

Este tutorial o guiará pelo processo de criação de uma automação simples que interage com os elementos de uma página web.

Criando um novo projeto¶

O primeiro passo é criar um projeto para uma automação Web, você pode seguir os mesmos passos definidos nas seções anteriores.

Veja como criar um Projeto Bot Web utilizando o template de projeto.

Inspecionando páginas web¶

Os atributos e propriedades de um elemento podem ser visualizados ao inspecionarmos a página que está sendo automatizada.

Geralmente, esse procedimento é feito de forma manual, onde as propriedades de cada elemento são coletadas individualmente e utilizadas no código como seletores.

Pensando nesse cenário, a BotCity disponibiliza uma ferramenta focada na inspeção de páginas Web e geração de código Python integrado com o framework de desenvolvimento, deixando o uso desses recursos mais simplificado e intuitivo na hora de construir as automações.

BotCity Web Inspector¶

Para utilizar o BotCity Web Inspector, basta instalar o plugin do BotCity Studio para Visual Studio Code.

Após instalar a extensão e carregar um projeto Python, você já irá ter acesso à ferramenta para começar a inspecionar páginas Web.

A seguir você verá mais detalhes sobre o uso desse recurso e também boas práticas ao inspecionar páginas e gerar código.

Interagindo com o navegador¶

Para este exemplo simples, iremos utilizar a página do Practice Test Automation.

Podemos passar a URL da página para o Web Inspector iniciar o navegador e com isso começar a mapear os elementos que desejamos interagir.

Mapeando os elementos iniciais¶

Para esse processo, vamos supor que a intenção seja inserir os dados do usuário no formulário e validar ao final se o login foi realizdo com sucesso.

Podemos por exemplo mapear os campos de texto Username e Password, além do botão de Submit.

Dica

Para mapear qualquer elemento utilizando o Web Inspector, basta posicionar o mouse na região do elemento e fazer um clique com o botão esquerdo do mouse, ou simplesmente utilizar o atalho de teclado: Alt+C.

Recursos do Web Inspector¶

Elementos Mapeados:

Cada elemento que é mapeado no contexto de uma página, é adicionado à lista de elementos mapeados.

A partir dessa lista, você pode clicar em um elemento para visualizar as suas propriedades, ou remover um elemento que não deseja mais interagir.

Tabela de Propriedades:

O BotCity Web Inspector também exibe as principais propriedades existentes de um elemento que foi mapeado.

Os valores dessa tabela podem ser usados como seletores no código na hora de buscarmos por esses elementos.

Dica

Basta clicar no elemento mapeado para que a tabela de propriedades correspondente seja exibida.

Gerando código a partir dos elementos mapeados¶

Com os elementos iniciais mapeados, já é possível gerarmos o código Python que será utilizado como base da automação.

Nessa seção, podemos definir qual será o navegador utilizado para o acesso e também os trechos de código adequados para o contexto atual.

Generate code with browser setup: Gera o trecho de código responsável por realizar a configuração do navegador que será utilizado.
Generate code to start the browser: Gera o trecho de código responsável por iniciar o navegador e acessar a página utilizando a URL que foi passada como parâmetro. Essa opção pode ser desmarcada caso você já tenha esse trecho de código na sua automação e só esteja mapeando novos elementos.

O código referente à busca dos elementos será gerado automaticamente com base na lista de elementos mapeados.

Após a configuração do código que será gerado, basta clicar no botão Generate Code para que o BotCity Web Inspector gere o código diretamente no arquivo .py.

Finalizando o processo¶

Como último passo da automação, vamos mapear a mensagem de sucesso que é exibida na página após o login. Podemos continuar utilizando exatamente a mesma estratégia que usamos anteriormente.

Dica

Você pode utilizar o botão Reset do Web Inspector sempre que quiser limpar os elementos mapeados ou reiniciar a inspeção.

Lembre-se de gerar o código antes de resetar o Web Inspector, para evitar que você perca a referência de elementos já mapeados.

Como a base do código já foi gerada anteriormente, podemos deixar as demais opções desmarcadas para que seja gerado somente o código referente ao novo elemento mapeado.

Ajustes finais e execução do código¶

Com o código base gerado pelo BotCity Web Inspector, podemos refatorar e realizar os ajustes que forem necessários para o processo.

Nesse caso, iremos simplesmente incluir no código o conteúdo que será inserido nos campos de texto e também a validação da mensagem final.

Importante

Lembre-se também de ajustar o caminho do webdriver referente ao navegador que está utilizando.

No trecho onde é feito o setup do navegador, você pode passar o caminho do binário para a propriedade driver_path ou utilizar alguma outra biblioteca que faça esse gerenciamento de forma automática.

Mais detalhes aqui.

Inserindo um conteúdo de texto no input:

Podemos simplesmente ajustar o método send_keys dos elementos referentes aos inputs de texto, passando por parâmetro uma string com o conteúdo.

Identifique no seu código o trecho onde esses elementos estão sendo manipulados e faça a seguinte modificação:

...
element = bot.find_element(selector='username', by=By.ID)
## Insert text content in the element
element.send_keys("student")

element = bot.find_element(selector='password', by=By.ID)
## Insert text content in the element
element.send_keys("Password123")

Incluindo a lógica para exibir a mensagem de sucesso:

Para validar se a mensagem de sucesso foi exibida após o clique no botão Submit, podemos verificar a existência do elemento na página.

Identifique no seu código o trecho onde o elemento referente a mensagem está sendo manipulado e faça a seguinte modificação:

...
element = bot.find_element(selector='//h1[@class="post-title"]', by=By.XPATH)
if element:
    # Getting text property
    print(element.text)
else:
    print("Login Failed!")

Explorando o código gerado pelo Inspector¶

Ao executarmos o código final após os ajustes, o bot irá automaticamente realizar as seguintes ações:

Abrir o navegador e acessar a página do Practice Test Automation.
Inserir os dados no campo de usuário e senha e clicar no botão de login.
Verificar a mensagem de sucesso após o login ser realizado.

Como citado anteriormente, o código gerado pelo Web Inspector utiliza como base o framework de desenvolvimento web da BotCity.

Por padrão, o BotCity Web Inspector sempre irá tentar gerar um código o mais completo possível. Porém, eventuais ajustes e tratamentos podem ser necessários para garantir que o processo funcione conforme o esperado.

Procurando por elementos¶

O Web Inspector utiliza alguns seletores chaves no código que é gerado para buscar um determinado elemento.

Caso você deseje substituir um parâmetro que foi gerado pelo Inspector, ou queira fazer um tratamento mais complexo, basta usar a tabela de propriedades como uma referência para obter as informações de cada elemento.

Com esses valores em mãos, basta passar o seletor como um parâmetro para o método find e utilizar a classe By para definir o tipo do seletor.

Performando ações com os elementos¶

Para determinados tipos de elementos, como botões e campos de texto, o Web Inspector também irá gerar junto com o código algumas sugestões de ações que podem ser realizadas com esse elemento.

Dica

Caso a ação sugerida que foi gerada não seja exatamente o que você precisa, você pode verificar outras ações disponíveis através do objeto WebElement e ajustar conforme for necessário.

Boas práticas no uso do BotCity Web Inspector¶

Abaixo listamos algumas dicas e pontos importantes que podem facilitar o uso do Web Inspector durante o desenvolvimento das suas automações.

Garanta que essa é a melhor abordagem para o seu processo

O funcionamento do BotCity Web Inspector está diretamente relacionado com o comportamento da página Web que está sendo automatizada.

Portanto, é importante identificar se essa estratégia realmente é a melhor para o seu caso de uso.

Se a página que você está automatizando dificulta a inspeção dos elementos ou apresenta uma certa resistência em relação à acessos automatizados, tente considerar outras opções como por exemplo o uso de visão computacional ou até uma abordagem usando um Desktop Bot.

Faça o mapeamento e teste o seu código por partes

Para garantir que as referências dos elementos não sejam perdidas ao mudar o contexto, tente mapear pequenos conjuntos de elementos e gerar o código correspondente antes de encerrar o navegador ou avançar para uma etapa subsequente do processo.

É importante que você também valide no código se o acesso à página está sendo feita da forma adequada (lembre-se de utilizar o navegador e webdriver adequados) e se os elementos estão sendo encontrados corretamente.

Fazendo isso, você garante que ao final do processo todas as ações estão sendo realizadas conforme o esperado.

Valide as interações que os elementos mapeados aceitam

Em alguns casos, a interação com um determinado elemento poderá ser feita de diversas maneiras.

Dependendo da página, a ação de um botão poderá ser feita através de um click() ou até mesmo através de um script JS injetado na página.

Caso você esteja tendo dificuldades usando uma determinada ação, lembre-se de testar outras opções disponíveis e validar o que funciona melhor no seu contexto.

Caso você fique com dúvidas ou queira ver mais sobre esse tipo de conteúdo, fique à vontade para explorar os canais da comunidade BotCity.