Navegação Web

Esse tutorial ensinará a você como automatizar a navegação e coleta de dados em sites através do Chrome. Este tutorial pode ser usado como base para outros projetos de automação no Chrome.

Criando folder

Primeiramente vamos criar nossa estrutura de automação na pasta <MARVIN_HOME>\script.

Como não usaremos visão computacional, não precisamos criar a pasta assets, para salvar imagens de template.

chrome\
    script.mvn

No Windows Explorer, vá para a pasta <MARVIN_HOME>\script - normalmente na instalação padrão MARVIN_HOME é definido como C:\Program Files\Marvin - e crie uma nova pasta chamada chrome.

Nosso objetivo

Acessar um site, fazer a navegação e extrair dados de uma estrutura de lista.

Script de Automação

Acessando uma página

Agora podemos começar com nossa automação pelo Chrome.

Primeiramente, vamos abrir o Chrome acessando a documentação do Marvin. Para fazer isso, vamos adicionar este código dentro do nosso arquivo script.mvn.

chrome.open('https://docs.marvin.run/en/') # Abre o Chrome
chrome.wait_load($browser) #Aguarda o carregamento total do site.

Perceba que usamos o a função chrome.wait_load para aguardar o carregamento completo da página, passando como parâmetro $browser retornado ao usar a função chrome.open.

Agora vamos iniciar nossa automação, executando o script chrome. Para obter mais informações sobre como executar um script, consulte Running Scripts em Getting Started.

Assim teremos aberto uma janela Chrome.

Preenchendo um formulário

Agora que já temos nossa janela e ela já está carregada, podemos começar a navegar por ela.

Começameros clicando no campo Search para fazermos uma pesquisa.

Queremos o Selector do campo para identificar qual campo iremos interagir na página, para isso, vamos clicar com o botão direito em cima do campo, e depois clicar em Inspecionar.

Com isso, abriremos o DevTools do Chrome, onde vamos encontrar o Selector desejado. Após confirmar que o campo que desejamos é o que está selecionado, vamos copia-lo. Basta clicar com o direto no campo > Copy > Copy Selector

Finalmente temos o Selector em mãos! Agora podemos usa-lo para clicar no elemento.

chrome.click_element($browser, '#body > header > nav > div.md-search > div > form > input')

Observe o # antes do Selector para o funcionamento apropriado.

Para fazer a pesquisa, precisamos digitar o que queremos pesquisar, para isso usaremos a Action keyboard.type_text, e para confirmar a pesquisa, keyboard.press para pressionar o enter.

keyboard.type_text('keyboard')
keyboard.press('enter')

chrome.wait_load($browser)

Capturando elementos em uma página

Agora iremos utilizar do conceito de Seletores para conseguirmos capturar as actions contidas na seguinte lista

Para isso precisaremos entender melhor o que é o Selector.

Marvin usa o mesmo padrão de Seletor que JavaScript, com a seguinte notação:

Classe CSS: para selecionar um elemento pela classe css, deve-se usar . seguido do nome da classe. Exemplo: .menu_class.

ID do elemento: para selecionar um elemento pelo ID, use # seguido pelo ID do elemento. Exemplo: #login.

Nome da tag: para selecionar um elemento pelo nome da tag, basta inserir o nome da tag. Exemplo: tbody

Tag com parâmetro: para selecionar um elemento por tag e parâmetro, use a sintaxe tag[param=value]. Se você quiser usar vários parâmetros, use a sintaxe: tag[param1=value1][param2=value2]

Parâmetro curinga: é possível usar curinga nos parâmetros, usando:

id^=someId: corresponderá a todos os ids começando com someId como someId1, someId-other

id$=someId: corresponderá a todos os ids que terminam com someId como 1someId, other-someId

id*=someId: corresponderá a todos os ids contendo someId como someId1, someId-other, 1someId, other-someId

No caso, utilizaremos o Nome da tag, o mesmo utilizado previamente.

Ao inspecionar, podemos ver que o elemento pai que contém as actions é o ul. Iremos pegar todos os 5 elementos dentro dele através do seu Nome da tag, Inspecionando da mesma forma que fizemos anteriormente.

Com esse Selector, podemos pegar os elementos usando o chrome.get_elements, que nos retornará $elements

chrome.get_elements($browser, 'body > div.md-container > main > div > div.md-sidebar.md-sidebar--secondary > div > div > nav > ul > li:nth-child(2) > nav > ul')

for element in ($elements):
    console.log(element.children[0].get_text())

Perceba que filtramos pelo filho de cada elemento, onde é contido o nome da Action, sendo obtida através do get_text, e impressa no console através do console.log.