Ir para o conteúdo

Web

Automações Web são limitadas ao escopo do navegador. Com isso, apesar de não ser possível interagir com elementos fora desse contexto, podemos interagir com o navegador em maior profundidade.

Podemos manipular mouse e teclado como na automação Desktop, porém podemos também executar código em JavaScript e interagir com elementos da DOM.

Automações Web também podem ser executadas em modo Headless (plano de fundo) e em paralelo sem interromper ou bloquear recursos de outras tarefas.

Neste primeiro momento, desenvolveremos um processo de automação Web utilizando visão computacional.

Baixando o WebDriver

Para poder trabalhar com automações web, precisamos usar o WebDriver correspondente ao navegador que está sendo utilizado na automação.

Utilizaremos o Firefox para essa automação, você pode baixar o GeckoDriver através deste link.

Vamos configurar o WebDriver nas seções seguintes.

Criando um projeto usando o template

A BotCity oferece templates de projeto que podem ser criados e customizados através do cookiecutter.

Para instalarmos o pacote do cookiecutter, vamos executar o seguinte comando:

python -m pip install --upgrade cookiecutter

Para criarmos um projeto usando o modelo, vamos invocar o cookiecutter e fornecer como argumento a URL do repositório onde os templates da BotCity estão localizados:

python -m cookiecutter https://github.com/botcity-dev/bot-python-template/archive/v2.zip

O sistema solicitará algumas respostas para criar seu projeto:

  • project_type: 2 | Tipo de projeto Web.
  • bot_id: BotCotacao | Nome do projeto.

Após o término do processo acima, uma nova pasta chamada BotCotacao estará disponível.

Sucesso

Parabéns, você agora tem um projeto com o framework Web Python da BotCity. 🏆

Vamos agora inspecionar os detalhes deste projeto.

Explorando o projeto

Dentro da nossa pasta do projeto BotCotacao você deverá ter a seguinte estrutura:

BotCotacao
├── bot.py       <- Arquivo onde iremos trabalhar e desenvolver nosso robô.
├── resources    <- Pasta contendo os arquivos auxiliares para o robô.
├── build.bat        <- Script em Batch para gerar o pacote.
├── build.ps1        <- Script em PowerShell para gerar o pacote.
├── build.sh         <- Shell script para gerar o pacote.
├── requirements.txt <- Arquivo descrevendo todas as dependências externas para seu robô.
└── BotCotacao.botproj <- Arquivo utilizado para carregar o projeto no BotStudio.

Nota

O template de projeto é composto por vários arquivos e pastas, porém aqui estão os mais importantes:

  • bot.py: Altere este arquivo e adicione aqui seu código.
  • resources: Adicione nesta pasta os arquivos a serem utilizados por seu robô como imagens, planilhas e etc.
  • requirements.txt: Altere este arquivo e adicione todas as dependências externas que serão utilizadas no código.

Configurando o caminho do WebDriver

Conforme mencionado anteriormente, para poder utilizar os recursos do framework web é necessário configurar o caminho do WebDriver do navegador que estamos utilizando.

Se você não tiver o caminho do WebDriver adicionado ao seu PATH, poderá adicionar manualmente o caminho no código do bot, por meio da propriedade driver_path.

...
def main():
    bot = WebBot()

    # Configurando para rodar no modo headless
    bot.headless = False

    # Setando navegador padrão para o Firefox
    bot.browser = Browser.FIREFOX

    # Setando o caminho do WebDriver do Firefox
    bot.driver_path = "<path to your WebDriver binary>"
...

Sucesso

Toda essa informação é bem legal, mas é hora de vermos alguma ação.

Vamos testar nosso robô localmente. 🦾🤖

Testando seu projeto localmente

Para testar seu projeto localmente, vamos instalar as dependências do Python que estão sendo utilizadas no projeto.

Utilizando a linha de comando, acesse a pasta BotCotacao que criamos nas etapas anteriores.

Instalando as dependências do projeto

Utilizando a linha de comando, acesse a pasta BotCotacao que criamos nas etapas anteriores e a partir desta pasta rode o comando abaixo para instalar as dependências definidas no arquivo requirements.txt:

pip install --upgrade -r requirements.txt

Este comando vai produzir uma saída grande referente a instalação de todas as dependências como o botcity-framework-web e outras.

Assim que este processo terminar, seu projeto está pronto para ser executado.

Rodando seu robô

Nosso projeto de template roda um código de exemplo bem simples, que apenas abre o Firefox e carrega a página da BotCity.

Ainda utilizando o terminal aberto dentro da pasta do projeto, você pode executar sua automação BotCotacao com o seguinte comando:

python bot.py

Dica

Você também pode utilizar sua IDE favorita para executar seu projeto localmente.

Aqui está uma captura de tela do resultado esperado: Python Web Result

🌟 Excelente 🌟

Nessa etapa já temos nosso projeto devidamente criado e configurado. Agora, vamos começar a construir nosso processo de automação.

Pesquisando a cotação do Dólar

Para este tutorial vamos construir uma automação com o objetivo de acessar a página inicial do Google, pesquisar pela cotação do Dólar e coletar corretamente os dados da página Web.

Carregando o projeto no BotCity Studio

Para começar o desenvolvimento da automação vamos carregar o projeto no BotCity Studio, após iniciá-lo e logar usando as suas credenciais, é só acessar a opção File -> Load Project:

Load Project

Feito isso, basta selecionar o arquivo .botproj que está na pasta raiz do projeto criado:

Launch

Ao clicar em Launch o projeto será carregado e você poderá acessar os arquivos pelo BotCity Studio.

Acessando a página inicial do Google

Com o projeto carregado, o próximo passo é abrir a página do Google no navegador.

Alterando o arquivo bot.py, ficará dessa maneira:

# Abre a página inicial do Google
bot.browse("https://www.google.com")

Ao executarmos a automação, o navegador será aberto e podemos utilizar a tecla de "Print Screen" para fazer uma captura da tela:

Página Google

Digitando na barra de pesquisa

Para garantir que o conteúdo será inserido corretamente na barra de pesquisa, vamos identificar o elemento da lupa que aparece na página.

Feito isso, vamos clicar no elemento para deixar a barra de pesquisa selecionada e inserir o conteúdo desejado:

Elemento lupa

if not bot.find(label="lupa", matching=0.97, waiting_time=10000):
    not_found("lupa")
# Pesquisando pela cotação
bot.click()
bot.paste("Cotação Dólar")
bot.enter()

Buscando os dados na página de resultados

Na tela de resultados do Google, vamos coletar os dados do valor da cotação em Real:

Tela resultados

Vamos buscar pela âncora "Dólar americano", fazer um clique relativo ao final do valor numérico e selecionar o dado que aparece na página:

Elemento tela resultados

Para isso, vamos selecionar o valor movendo o mouse a partir do clique relativo para a esquerda, utilizando os métodos mouse_down(), move_relative() e mouse_up().

Com o valor selecionado, podemos fazer uma operação de CTRL+C e depois acessar esse conteúdo através do método get_clipboard().

O código ficaria dessa maneira:

# Âncora apontando para o final do valor numérico
# Ajustando parâmetro de "matching"
if not bot.find( "ancora-dolar", matching=0.92, waiting_time=10000):
    not_found("ancora-dolar")
bot.click_relative(53, 54)

# Selecionando o valor da página
bot.mouse_down()
bot.move_relative(-100, 0)
bot.mouse_up()

# Coletando o valor do clipboard
bot.control_c()
valor_cotacao = bot.get_clipboard()
print(f"Dólar => R$ {valor_cotacao}")

Finalizando o processo

Com os dados necessários coletados, podemos encerrar a comunicação com o navegador através do stop_browser().

Ao final, nosso código ficará dessa maneira:

def main():
    bot = WebBot()

    # Configurando para rodar em modo headless
    bot.headless = False

    # Setando Firefox
    bot.browser = Browser.FIREFOX


    # Setando o caminho do WebDriver do Firefox via Webdriver manager
    bot.driver_path = GeckoDriverManager().install()

    # Abre a página inicial do Google
    bot.browse("https://www.google.com")

    if not bot.find( "lupa", matching=0.97, waiting_time=10000):
        not_found("lupa")
    bot.click()
    bot.paste("Cotação Dólar")
    bot.enter()

    # Âncora para coleta dos dados
    if not bot.find( "ancora-dolar", matching=0.92, waiting_time=10000):
        not_found("ancora-dolar")
    bot.click_relative(53, 54)

    # Selecionando o valor da página
    bot.mouse_down()
    bot.move_relative(-100, 0)
    bot.mouse_up()

    bot.control_c()
    valor_cotacao = bot.get_clipboard()
    print(f"Dólar => R$ {valor_cotacao}")

    bot.wait(1000)
    bot.stop_browser()


def not_found(label):
    print(f"Element not found: {label}")

if __name__ == '__main__':
    main()