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):

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.