Skip to main content
Acessar Studio

Elementos e seletores no navegador

Quando o seu robô precisa interagir com uma página web — clicar em um botão, preencher um campo, ler um texto — ele precisa saber exatamente onde na página agir. É aqui que entram os elementos e os seletores.

O que é um elemento?​

Pense em uma página web como um formulário preenchível. Cada parte visível dessa página é um elemento: o botão "Enviar", o campo de CPF, o menu de opções, a imagem do cabeçalho, um link de texto. Tudo que você vê e interage na tela é um elemento.

Exemplos de elementos comuns:

  • Um botão — "Entrar", "Confirmar", "Baixar"
  • Um campo de texto — campo de e-mail, senha, CPF
  • Um link — "Esqueceu sua senha?", "Saiba mais"
  • Uma linha de tabela — registros de uma lista de resultados
  • Uma imagem, um ícone, um menu dropdown

Em resumo: se você consegue clicar, digitar ou ler algo em uma página, aquilo é um elemento.

O que é um seletor?​

Uma página web pode ter dezenas de botões, campos e links. Como o robô sabe qual deles deve clicar?

A resposta é o seletor — um código que identifica de forma única um elemento específico na página, como se fosse o endereço exato daquele elemento.

Analogia

Imagine um escritório com centenas de arquivos. Para pedir a alguém que busque um documento específico, você diz: "Pasta azul, terceira prateleira, segundo documento da esquerda." O seletor funciona da mesma forma — é uma descrição precisa que leva o robô ao elemento correto, sem margem para erro.

Um seletor tem aparência técnica (exemplo: button#btnConfirmar), mas você não precisa escrevê-lo manualmente. A Extensão Roberty para Chrome captura o seletor pra você com apenas alguns cliques.

Como capturar um seletor​

A forma mais simples — e recomendada — de obter o seletor de um elemento é usando a Extensão Roberty para Chrome:

  1. Abra a página no Chrome com o elemento que você quer capturar.
  2. Clique com o botão direito sobre o elemento desejado.
  3. No menu que aparecer, selecione Roberty Automation → Selecionar Elemento.
  4. Clique sobre o elemento. O seletor é copiado automaticamente para a área de transferência.
Não tem a extensão ainda?

Veja o tutorial Extensão Roberty para Chrome — a instalação leva menos de um minuto.

Como usar o seletor em uma ação de navegador​

Com o seletor copiado, basta colá-lo no campo Seletor do elemento da ação desejada no Designer.

Exemplo com a ação Clique no Navegador:

  1. Adicione a ação Clique no Navegador ao fluxo.
  2. Em Selecione a ação, escolha Por navegador.
  3. Em ID da página ou navegador, selecione a ação que abriu o navegador.
  4. Em Seletor do elemento, cole o seletor copiado (Ctrl + V).

O robô irá localizar e clicar exatamente no elemento que você capturou.

Ações de navegador que usam seletores​

A maioria das ações de automação web possui um campo de seletor para identificar o elemento alvo. As principais são:

AçãoPara que serve
Clique no NavegadorClicar em botões, links e outros elementos
Preencher CampoDigitar texto em campos de formulário
Obter Texto do ElementoLer o conteúdo de texto de um elemento
Obter Atributo do ElementoLer uma propriedade específica de um elemento
Verificar Existência de ElementoChecar se um elemento está visível na página
Marcar/Desmarcar CheckboxAtivar ou desativar caixas de seleção
Upload de ArquivoEnviar arquivos por campos de upload

Dicas para seletores mais confiáveis​

Use seletores simples. Quanto mais curto e direto o seletor, mais estável ele é. Um seletor baseado no ID do elemento (como #btnLogin) raramente muda; seletores muito longos com vários níveis quebram facilmente quando a página é atualizada.

Recapture se parar de funcionar. Se o robô começar a falhar em uma ação de navegador, provavelmente a página foi atualizada e o seletor mudou. Basta abrir a extensão novamente e capturar o elemento de novo.

Teste antes de finalizar. Execute o robô em modo de teste para confirmar que a ação encontra o elemento correto antes de colocar em produção.

Próximos passos​