# Busca manual de seletores CSS no navegador

Se o seletor criado automaticamente pela ferramenta de gravação não for ideal, o Usuário pode editar o código manualmente. Para isso, deve abrir o código-fonte do elemento na página da web. Isso pode ser feito usando as "Ferramentas de desenvolvedor" ("Developer Tools") do navegador, após o que o seletor apropriado pode ser escolhido manualmente.

Por exemplo, no Google Chrome, é possível acessar as "Developer Tools" de duas maneiras:

* no menu principal, selecionar Mais Ferramentas -> Developer Tools,
* pressionar as teclas Ctrl+Shift+I.

Na painel "Developer Tools" que aparece, o código-fonte da página da web será exibido na aba "Elements". Também é possível abrir rapidamente essa ferramenta e ir para o código do elemento de controle, clicando com o botão direito do mouse no elemento desejado na página da web e selecionando a opção "Inspecionar" no menu de contexto. Nesse caso, o Usuário verá imediatamente a parte do código correspondente ao elemento desejado, pois ela será destacada na aba "Elements" nas "Developer Tools".

Algumas páginas da web bloqueiam o menu de contexto padrão do navegador e, em vez disso, mostram seu próprio menu ao clicar com o botão direito. Às vezes, clicar em um elemento muda seu estado de forma que o atributo desejado desaparece. Por exemplo, para gravar um seletor para uma mensagem não lida em um mensageiro, clicar com o botão direito pode marcar a mensagem como lida, e seu código em "Inspecionar" mudará. Para ver o código-fonte do elemento em ambos os casos, use o ícone "Selecionar Elemento" (no Google Chrome, ele é o primeiro na barra):

<figure><img src="https://1245874961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fti2Raw08aYi0Vr2rkcD9%2Fuploads%2Fgit-blob-71a229261dedb7b8a708909d5d4ff06aac05222e%2F2025-07-21_18-45-57.png?alt=media" alt=""><figcaption></figcaption></figure>

Em outros navegadores (Edge, Firefox, etc.), a ferramenta "Developer Tools" parece e funciona de maneira semelhante, mas os nomes específicos dos itens de menu (e as combinações de teclas para acessá-la) podem diferir do exemplo acima.

As páginas da web modernas são muito dinâmicas. Elas podem mudar seus elementos, nomes, ordem e aparência mesmo após serem carregadas do servidor e armazenadas em cache no navegador. Além disso, as páginas frequentemente são carregadas em partes, usando frames ou mudando dinamicamente a estrutura — isso é chamado de DOM (modelo de página em forma de árvore de tags). Tecnologias como Ajax permitem atualizar partes da página sem a necessidade de recarregá-la completamente.

Para ver o código HTML-fonte da página logo após o carregamento, pode-se selecionar no menu do navegador a opção "Ver código-fonte da página". Mas para automação, isso não é necessário, pois a página muda durante o uso.

Quando as "Developer Tools" do navegador são usadas, na verdade, é exibida a estrutura do DOM atualizada em tempo real. Portanto, para encontrar elementos, é melhor usar essa exibição dinâmica, em vez do código-fonte original da página.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.sherparpa.ru/pt/sherpa-rpa/sherpa-designer/rabota-v-sherpa-designer/rukovodstvo-po-veb-selektoram/ruchnoi-poisk-css-selektorov-v-brauzere.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
