Come ottenere xpath facendo clic su un elemento html

Sono abbastanza nuovo alla programmazione e devo generare un percorso X facendo clic su un elemento html. per esempio: se ho cliccato sulla casella di testo del nome utente allora dovrebbe darmi il xpath come html/testa/corpo/tr [1]/tabella [2] ..... ecc ecc. La cosa principale è io non posso usare firebug dato che la mia applicazione è completamente pronta per essere eseguita su IE. Ho visto molto fxn per ottenere xpath e ho cercato di integrarlo, ma non ho ottenuto il valore di ritorno. Un semplice frammento di codice in cui ho usato la funzione jquery click() per recuperare il valore non funziona. La cosa è che non riesco a passare l'elemento html nella funzione. La funzione xpath ho preso solo da questo sito. Il mio codice è sottoCome ottenere xpath facendo clic su un elemento html

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>click demo</title> 
<style> 
p 
{ 
    color: red;  
    margin: 5px; 
    cursor: pointer; 
} 
p:hover 
{ 
    background: yellow; 
} 
</style> 
<script src="http://code.jquery.com/jquery-1.9.1.js"> 
</script> 
</head> 
<body> 
<p id ="test">First Paragraph</p> 
<p>Second Paragraph</p> 
<p>Yet one more Paragraph</p> 
<script> 

$("#test").click(function() { var value= $(this).getXPath(); 
alert(value) }); 

function getXPath(element) 
{ 
var val=element.value; 
alert("val="+val); 
    var xpath = ''; 
    for (; element && element.nodeType == 1; element = element.parentNode) 
    { 
     alert(element); 
     var id = $(element.parentNode).children(element.tagName).index(element) + 1; 
     id > 1 ? (id = '[' + id + ']') : (id = ''); 
     xpath = '/' + element.tagName.toLowerCase() + id + xpath; 
    } 
    return xpath; 
} 
</script> 
</body> 
</html>

fonte

2013-09-04 Piyush

cambiamento script per

$("#test").click(function() { var value= getXPath(this ); 
alert(value) }); 

function getXPath(element) 
{ 
var val=element.value; 
    //alert("val="+val); 
    var xpath = ''; 
    for (; element && element.nodeType == 1; element = element.parentNode) 
    { 
     //alert(element); 
     var id = $(element.parentNode).children(element.tagName).index(element) + 1; 
     id > 1 ? (id = '[' + id + ']') : (id = ''); 
     xpath = '/' + element.tagName.toLowerCase() + id + xpath; 
    } 
    return xpath; 
}

fonte

2013-09-04 06:31:01

grazie mille. Funziona .. – Piyush

Grande, potresti per favore segnare come risposta. –

funziona bene ty – themis

Questo potrebbe aiutare a

fiddle

$('p').click(function(){ 
parentEls = $(this).parents() 
      .map(function() { 
        return this.tagName; 
       }) 
      .get().join(", "); 

    alert(parentEls); 

    });

fonte

2013-09-04 06:31:34

grazie per help.but sta stampando il percorso nella direzione opposta. – Piyush

manipola il risultato in ordine inverso –

-1

Questo codice dà percorso di elemento.

 $('a').click(function() { 
      var XPATH = ""; 
      var FindParent = true; 
      var _parent = $(this); 

      while (FindParent) { 
       var myParent = _parent.parent(); 
       if (myParent != null) { 
        XPATH += myParent.prop("tagName") + "/"; 
        _parent = myParent; 
       } 
       else { 
        FindParent = false; 
       } 

      } 
     })

fonte

2013-09-04 06:34:26

In IE è necessario insatll Bookmarklets.

PASSI di installare bookmarklet

1) aprire IE

2) digitare about: blank nella barra degli indirizzi e premere Invio

3) dai Preferiti menu principale selezionare ---> Aggiungi favoriti

4) Nella finestra di popup Aggiungi un preferito immettere il nome GetXPATH1.

5) Fare clic sul pulsante Aggiungi nella finestra popup aggiunta.

6) Aprire il menu Preferiti e fare clic con il tasto destro del mouse sul nuovo preferito e selezionare l'opzione .

7) Le proprietà GetXPATH1 si apriranno. Seleziona la scheda Documento web.

8) Immettere quanto segue nel campo URL.

javascript: function getNode (nodo) {var nodeExpr = node.tagName; if (! NodeExpr) restituisce null; if (node.id! = '') {NodeExpr + = "[@ id = '" + nodo. id + "']"; return "/" + nodeExpr;} var rank = 1; var ps = node.previousSibling; while (ps) {if (ps.tagName == node.tagName) {rank ++;} ps = ps. previousSibling;} if (rank> 1) {nodeExpr + = '[' + rank + ']';} else {var ns = node.nextSibling; while (ns) {if (ns.tagName == node.tagName) {nodeExpr + = '[1]'; break;} ns = ns.nextSibling;}} restituisce nodeExpr;}

9) Fare clic su OK. Clicca SÌ sull'avviso popup.

10) Aggiungere un altro favorito dai seguenti passaggi da 3 a 5, il nome questo preferito GetXPATH2 (Fase 4)

11) Ripetere i punti 6 e 7 per GetXPATH2 appena creato.

12) Immettere quanto segue nel campo URL per GetXPATH2

javascript: funzione o_ o() {var = nodoCorrente document.selection.createRange() parentElement(); var path = []; mentre. (currentNode) {var pe = getNode (currentNode); if (pe) {path.push (pe); if (pe.indexOf ('@ id')! = - 1) break;} currentNode = currentNode.parentNode;} var xpath = "/" + path.reverse(). join ('/'); clipboardData.setData ("Testo", xpath);} o _o();

13) Ripetere il passaggio 9.

si sono tutti fatti !!

Ora per ottenere l'XPATH degli elementi basta selezionare l'elemento con il mouse. Ciò implicherebbe facendo clic con il pulsante sinistro del mouse poco prima che l'elemento (collegamento, pulsante, immagine, casella di controllo, testo ecc.) Inizi e trascinandolo fino alla fine dell'elemento. Dopo averlo fatto, seleziona prima GetXPATH1 preferito dal menu dei preferiti e poi seleziona il secondo GetXPATH2 preferito. Al suo punto riceverai una conferma, premi il pulsante di accesso consentito. Ora apri un file del blocco note, fai clic con il tasto destro e seleziona l'opzione Incolla. Questo ti darà l'XPATH dell'elemento che cerchi.

fonte

2013-09-04 06:55:56 Sankumarsingh

Questo ho già provato ma la cosa in questo è che dà Xpath come // Input [@ id = 'utente']. Sebbene questo xpath sia corretto, ma ho bisogno dell'intero percorso da html /.../ percorso toclicato. Ma grazie per l'aiuto. – Piyush

Come ottenere xpath facendo clic su un elemento html

risposta

Problemi correlati