O Localizador de Caminho DOM permite passar o cursor por qualquer elemento de uma página para revelar o seu seletor CSS único, seletor abreviado, XPath e um fragmento querySelector pronto a colar. Clique para fixar o elemento e navegue com os botões Pai/Filho/Irmão. Essencial para utilizadores de Selenium, Puppeteer, Playwright e Cypress.
Escrever testes de automação, web scrapers ou bookmarklets implica escrever seletores — mas determinar um seletor estável e único para um elemento específico é tedioso. Abre-se o DevTools, inspeciona-se, clica-se com o botão direito, copia-se o seletor e torce-se para que o resultado seja realmente único e estável. O Localizador de Caminho DOM torna isto num único clique. Ative a ferramenta e passe o cursor sobre qualquer elemento da página — ele fica realçado a roxo enquanto se move. Clique para fixar, e o painel preenche-se com quatro formatos de seletor: um seletor CSS único baseado em caminho, um seletor abreviado (tag + classes ou id), um XPath absoluto e um fragmento document.querySelector('...') já formatado e pronto a colar num script. Uma vez fixado, pode-se navegar pela árvore DOM com os botões Pai / Primeiro Filho / Irmão Anterior / Próximo Irmão sem perder o foco. Os atributos data-testid são detetados e priorizados quando presentes — ideal para Playwright/Cypress que os usam como âncoras. A ferramenta também mostra a tag, id, classes, tamanho delimitador e propriedades de display/position para contexto rápido.
Mova o rato sobre a página para ver os elementos realçados a roxo. Clique para fixar — sem necessidade de abrir o Inspetor do DevTools.
Caminho CSS único, seletor abreviado, XPath absoluto e fragmento querySelector encapsulado. Escolha o que melhor se adequar ao seu projeto.
Uma vez fixado, use os botões Pai / Primeiro Filho / Anterior / Seguinte para navegar pelo DOM sem ter de reselecionar.
Cada seletor tem o seu próprio botão Copiar. Pegue o formato de que o seu script precisa e cole diretamente no seu teste ou scraper.
Apresenta a tag, id, classes, tamanho, display e posição — visão geral rápida sem necessidade de reinspecionar.
Se o elemento tiver um id, o CSS único usa #id. Se estiver presente um atributo data-testid, este é destacado para uso no Playwright/Cypress.
Selecione o elemento a testar, copie o seu seletor e cole no código do teste — sem mais adivinhações sobre caminhos únicos.
Encontre o seletor estrutural para itens de lista num alvo de scraping. Use o seletor abreviado ou baseado em caminho consoante as necessidades de estabilidade.
Fixe um elemento e copie o seu caminho para investigar porque o CSS não está a ser aplicado — o seletor único mostra a localização completa do elemento na árvore.
Copie o fragmento document.querySelector(...) já formatado diretamente para a Consola do DevTools para depuração interativa rápida.
Ao auditar a acessibilidade, use o XPath para passar elementos para o axe-core ou outras ferramentas de acessibilidade que esperam referências XPath.
Clique no ícone do Localizador de Caminho no painel do DevSuite Pro. A ferramenta ativa-se imediatamente em modo de seleção.
Mova o rato sobre a página — cada elemento fica realçado a roxo ao passar por ele. Faça scroll conforme necessário para encontrar o seu alvo.
Clique no elemento pretendido. O seletor para e o painel preenche-se com os formatos de seletor, contexto e botões de cópia.
Use os botões Pai/Filho/Irmão para refinar a seleção, ou clique em Selecionar Elemento para reiniciar a seleção com o cursor.
Clique em Copiar junto ao formato necessário (CSS, XPath ou querySelector). Cole diretamente no seu teste, scraper ou consola.
Instale o DevSuite Pro gratuitamente e desbloqueie mais de 64 ferramentas de desenvolvedor para seu navegador.
