Como verificar uma expressão XPath na ferramenta Chrome Developers ou no Firebug do Firefox?

179

Como posso verificar meu XPath?

Estou usando a ferramenta Chrome Developers para inspecionar os elementos e formar meu XPath. Eu o verifico usando o plugin XPath Checker do Chrome, mas nem sempre isso me dá o resultado. Qual é a melhor maneira de verificar meu XPath.

Também tentei usar o Firebug para inspecionar o bug e também o FirePath para verificar. Mas o Firepath também verifica o XPath.

Minha última opção seria usar o Selenium WebDriver para confirmar meu XPath.

user3448242
fonte

Respostas:

367

cromada

Isso pode ser alcançado por três abordagens diferentes (consulte o artigo do meu blog aqui para obter mais detalhes):

  • Pesquise no Elementspainel como abaixo
  • Executar $x()e $$()no Consolepainel, conforme mostrado na resposta de Lawrence
  • Extensões de terceiros (não são realmente necessárias na maioria dos casos, podem ser um exagero)

Aqui está como você pesquisa XPath no Elementspainel:

  1. Pressione F12para abrir a Ferramenta de desenvolvedor do Chrome
  2. No painel "Elementos", pressione Ctrl+F
  3. Na caixa de pesquisa, digite XPath ou CSS Selector, se forem encontrados elementos, eles serão destacados em amarelo.

insira a descrição da imagem aqui

Firefox (desde a versão 75)

Como o FF 75 é possível usar a consulta xpath bruta sem expressões xpath de avaliação, consulte a documentação para obter mais informações.

Firefox (versão anterior 75)

  1. Selecione "Console da Web" no submenu Desenvolvedor da Web no menu Firefox (ou no menu Ferramentas se você exibir a barra de menus ou estiver no Mac OS X)
    ou pressione o atalho do teclado Ctrl+ Shift+ K( Command+ Option+ Kno OS X).
  2. Na linha de comando na parte inferior, use o seguinte:

    • $(): Retorna o primeiro elemento que corresponde. Equivalente a document.querySelector()ou chama a $função na página, se existir.

    • $$(): Retorna uma matriz de nós DOM que correspondem. É como para document.querySelectorAll(), mas retorna uma matriz em vez de a NodeList.

    • $x(): Avalia uma expressão XPath e retorna uma matriz de nós correspondentes.


Firefox (versão anterior 49)

  1. Instale o Firebug
  2. Instalar Firepath
  3. Pressione F12para abrir o Firebug
  4. Mudar para o FirePathpainel
  5. No menu suspenso, selecione XPathor CSS
  6. Digite para localizar

insira a descrição da imagem aqui

Yi Zeng
fonte
2
Apenas um aviso no XPath e nos navegadores, pois isso leva a muita confusão: stackoverflow.com/questions/18241029/…
Jens Erat
@ JensErat: Realmente bom ponto. Para outras pessoas que estão lendo este comentário, como já mencionado nessa pergunta, o Selenium não é afetado porque dirige navegadores e usa a mesma tecnologia de avaliação JavaScript subjacente com ferramentas de desenvolvimento.
Yi Zeng 22/03
1
@ user1177636: Qual software você usou para gerar esses GIFs?
JacekM
Se você precisa de um parser local para XQuery também eu encontrei Basex: basex.org/products
tuxErrante
4
A resposta precisa de uma atualização para o Firefox. Infelizmente, o Firebug é obsoleto e foi mesclado nas Ferramentas do desenvolvedor. Atualmente você pode testar a expressão xpath no console, por exemplo$("//div")
derloopkat 22/17
53

Você pode abrir o DevTools no Chrome com CTRL+IWindows (ou CMD+IMac) e Firefox com F12, selecionar a Consoleguia) e verificar o XPath digitando $x("your_xpath_here").
Isso retornará uma matriz de valores correspondentes. Se estiver vazio, você sabe que não há correspondência na página.

Firefox v66 (abril de 2019):

Firefox v66 console xpath

Chrome v69 (abril de 2019):

Chrome v69 console xpath

bosnjak
fonte
1
Esse método não é ideal, mas é bom saber porque qualquer expressão xpath que você escreve nesse console pode ser executada por um JavascriptExecutor no Selenium. Às vezes, você pode usar isso como uma solução alternativa, talvez quando os eventos nativos do Firefox estão desativados?
djangofan
1
@djangofan, como assim? Por essa lógica, ambas as respostas, embora corretas, são desnecessárias por sua lógica.
Arranjo
1
@bosnjak ao tentar isso em consola $x("//input[@name='q']")eu tenhoVM251:1 Uncaught TypeError: $x is not a function at <anonymous>:1:1
YasserKhalil
@YasserKhalil qual navegador você está usando, qual versão? Em que site você está fazendo isso?
23919 bosnjak
16

Usando chrome ou Opera

sem plugins, sem escrever nenhum caractere de sintaxe XPath

  1. clique com o botão direito do mouse no elemento necessário e "inspecione"
  2. clique com o botão direito do mouse na tag do elemento destacado, escolha copiar> Copiar Xpath.

;)

insira a descrição da imagem aqui

Eng. Samer T
fonte
2
Para o Chrome, esta é a melhor solução que eu já vi. Obrigado por compartilhar. Facilita a confirmação no Chrome quando não desejo usar o Firefox.
Testado
Eu tenho usado isso para grande benefício. Mas o grande problema é que, às vezes, o menu de contexto é desativado ou substituído. Então você tem que confiar nas outras abordagens.
precisa saber é
1
Isso realmente não responde à pergunta. Não está verificando um xpath existente, está gerando um. O que o Chrome gera geralmente é feio e muito frágil quando existe uma solução muito melhor.
Major Major
6

Aqui está a extensão ChroPath para Chrome, que possui muitos recursos avançados em comparação com o FirePath. Siga as etapas abaixo:

  1. Abra o painel devtools.
  2. Clique com o botão direito do mouse em qualquer lugar da página da web.
  3. Clique em Inspecionar.
  4. No lado direito da guia Elementos, clique na guia ChroPath.

Aqui você obterá o XPath / CSS e também poderá editá-lo e avaliá-lo.

Faça o download do complemento

SanjayKumar I ChroPath Creator
fonte
1
A extensão ChroPath ainda funciona em 2020. Obrigado. Grande ajuda.
Bubbles
1

Outra opção para verificar seu xpath é usar o selenium IDE.

  1. Instale o IDE do Firefox Selenium
  2. Abra seu aplicativo no FireFox e abra o IDE
  3. No IDE, em uma nova linha, cole seu xpath no destino e clique em Localizar. O elemento correspondente seria destacado em seu aplicativo

Selenium IDE

AJC
fonte