Jak uzyskać xpath przez kliknięcie elementu html

Jestem całkiem nowy w programowaniu i muszę wygenerować ścieżkę Xpath po kliknięciu elementu html. na przykład: jeśli kliknąłem na pole tekstowe nazwy użytkownika, powinienem podać mi ścieżkę xpath, taką jak html/head/body/tr [1]/table [2] ..... itd. Najważniejsze jest to, że nie mogę używać firebuga, ponieważ moja aplikacja jest uruchomiona na IE. Widziałem wiele fxn, aby uzyskać xpath i próbowałem ją zintegrować, ale nie otrzymuję wartości zwracanej. Prosty fragment kodu, w którym użyłem funkcji kliknięcia() jquery, aby pobrać wartość, nie działa. Rzecz polega na tym, że nie mogę przekazać elementu html w funkcji. Funkcja xpath została pobrana tylko z tej strony. Mój kod znajduje się poniżej.Jak uzyskać xpath przez kliknięcie elementu 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>

Źródło

2013-09-04 Piyush

zmiana skrypt

$("#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; 
}

Źródło

2013-09-04 06:31:01

wielkie dzięki. Jego działanie. – Piyush

Świetnie, czy mógłbyś zaznaczyć jako odpowiedź. –

działa nicelly ty – themis

To może pomóc

fiddle

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

    alert(parentEls); 

    });

Źródło

2013-09-04 06:31:34

dzięki za pomoc. Ale jest to ścieżka drukowania w odwrotnym kierunku. – Piyush

manipulować wynikiem w odwrotnej kolejności –

-1

Kod ten daje ścieżkę elementu.

 $('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; 
       } 

      } 
     })

Źródło

2013-09-04 06:34:26

W IE Musisz dodać zakładki do zakładek.

KROKI DO INSTAL bookmarkletów

1) Otwórz IE

2) Wpisz about: blank w pasku adresu i naciśnij enter

3) Z menu głównego wybierz Ulubione ---> Dodaj ulubione

4) W polu Dodaj ulubione okno wpisz nazwę GetXPATH1.

5) Kliknij przycisk Dodaj w Dodaj ulubione okno wyskakujące.

6) Otwórz menu Ulubione i kliknij prawym przyciskiem myszy nowo dodaną ulubioną opcję i wybierz opcję Właściwości.

7) Właściwości GetXPATH1 zostaną otwarte. Wybierz kartę dokumentu sieciowego.

8) Wprowadź w polu adresu URL następującą pozycję.

javascript: funkcja getNode (node) {var nodeExpr = node.tagName; if (! NodeExpr) zwraca null; if (node.id! = '') {NodeExpr + = "[@ id = '" + węzeł. id + "']"; return "/" + nodeExpr;} var rank = 1; var ps = node.previousSibling; while (ps) {if (ps.tagName == node.tagName) {rank ++;} ps = ps. previousSibling;} if (pozycja> 1) {nodeExpr + = '[' + rank + ']';} else {var ns = node.nextSibling; while (ns) {if (ns.tagName == node.tagName) {nodeExpr + = '[1]'; break;} ns = ns.nextSibling;}} return nodeExpr;}

9) Kliknij OK. Kliknij TAK na wyskakującym okienku.

10) Dodaj kolejny ulubiony przez następujące kroki 3 do 5, Imię to ulubiony GetXPATH2 (Krok 4)

11) Powtórz kroki 6 i 7 dla GetXPATH2 która właśnie została utworzona.

12) Wprowadzić następujące w polu adresu URL na GetXPATH2

JavaScript: o_ funkcja f() {var currentNode = document.selection.createRange() parentElement(); ścieżka var = [], podczas gdy. (currentNode) {var pe = getNode (currentNode); if (pe) {path.push (pe); if (pe.indexOf ('@ id')! = - 1) break;} currentNode = currentNode.parentNode;} var xpath = "/" + ścieżka.reverse(). join ('/'); clipboardData.setData ("Tekst", xpath);} o _o();

13) Powtórz Krok 9.

Ty wszystko zrobić !!

Teraz, aby uzyskać XPATH elementów, wystarczy wybrać element za pomocą myszy. Wymagałoby to kliknięcia lewego przycisku myszy tuż przed tym, zanim element (link, przycisk, obraz, pole wyboru, tekst itp.) Zacznie się i przeciągnie, aż element się skończy. Gdy to zrobisz, najpierw wybierz ulubiony GetXPATH1 z menu ulubionych, a następnie wybierz drugi ulubiony GetXPATH2. W tym momencie dostaniesz potwierdzenie, wciśnij przycisk Pozwól na dostęp. Teraz otwórz plik notatnika, kliknij prawym przyciskiem myszy i wybierz opcję wklejania. To da ci XPATH elementu, którego szukasz.

Źródło

2013-09-04 06:55:56 Sankumarsingh

To już próbowałem, ale chodzi o to, że daje Xpath jak // Input [@ id = 'user']. Chociaż ta ścieżka jest poprawna, ale potrzebuję całej ścieżki ze ścieżki html /.../ toclicked. Ale dzięki za pomoc. – Piyush

Jak uzyskać xpath przez kliknięcie elementu html

Odpowiedz

Powiązane problemy