XPath (XML Path Language) ist eine leistungsstarke Abfragesprache, die verwendet wird, um durch das Document Object Model (DOM) von HTML- und XML-Dokumenten zu navigieren. Für Webentwickler, Tester und Automatisierungsingenieure ist die Beherrschung von XPath unerlässlich, um Elemente auf Webseiten präzise zu lokalisieren und mit ihnen zu interagieren. Egal, ob Sie automatisierte Tests mit Selenium, Playwright oder anderen Test-Frameworks entwickeln oder Daten von Websites extrahieren, XPath bietet die Flexibilität und Präzision, die erforderlich sind, um selbst durch die komplexesten DOM-Strukturen zu navigieren.
Dieser umfassende Leitfaden führt Sie durch alles, was Sie über XPath wissen müssen, von der grundlegenden Syntax bis hin zu fortgeschrittenen Techniken, und hilft Ihnen dabei, versiert im Erstellen robuster und effizienter XPath-Ausdrücke zu werden.
Bevor wir tiefer in XPath eintauchen, wollen wir uns einen Moment Zeit nehmen, um Apidog vorzustellen, die beste Postman-Alternative, die heute verfügbar ist. Apidog kombiniert API-Dokumentation, Design, Debugging, Testen und Mocking in einer einheitlichen Plattform.
Im Gegensatz zu Postman bietet Apidog eine intuitivere Benutzeroberfläche, bessere Funktionen für die Teamzusammenarbeit und eine nahtlose Integration zwischen API-Design und -Tests. Mit seinen leistungsstarken Testfunktionen erleichtert Apidog die Validierung von APIs.
Wenn Sie mit APIs und Webtests arbeiten, kann das umfassende Toolset von Apidog Ihren Workflow erheblich optimieren und die Produktivität steigern.
Was ist XPath?
XPath ist eine Abfragesprache, die für die Auswahl von Knoten in XML-Dokumenten entwickelt wurde. Da HTML als eine spezialisierte Form von XML betrachtet werden kann, kann XPath auch effektiv auf HTML-Dokumente angewendet werden. Es wurde erstmals vom World Wide Web Consortium (W3C) als Teil der XSLT 1.0-Spezifikation eingeführt und hat sich seitdem zu einem unverzichtbaren Werkzeug für die Webautomatisierung und Datenextraktion entwickelt.
XPath dient als Navigationssprache und ermöglicht es Ihnen, durch die Hierarchie eines HTML-Dokuments zu navigieren, indem Sie Pfade zu Elementen definieren, ähnlich wie Sie in einem Dateisystem durch Ordner navigieren. Was XPath besonders leistungsfähig macht, ist seine Fähigkeit:
- Durch die Elementhierarchie in mehrere Richtungen navigieren
- Elemente basierend auf Attributen, Inhalten oder Position filtern
- Einfacher Zugriff auf übergeordnete, untergeordnete und gleichgeordnete Elemente
- Integrierte Funktionen zur Datenmanipulation und zum Vergleich von Werten verwenden
XPath-Locators in der Webautomatisierung
In Webautomatisierungs-Frameworks wie Selenium WebDriver dienen XPath-Locators als primäre Methode zur Identifizierung von Elementen auf einer Webseite. Während andere Locators wie CSS-Selektoren, ID- oder Klassennamen oft aufgrund ihrer Einfachheit und Leistung bevorzugt werden, bietet XPath in komplexen Szenarien unübertroffene Flexibilität.
Hier sind einige wichtige Vorteile der Verwendung von XPath in der Webautomatisierung:
- Flexibilität: XPath kann Elemente basierend auf Textinhalt, übergeordneten-untergeordneten Beziehungen und gleichgeordneten Beziehungen lokalisieren, was andere Locators nicht ohne weiteres können.
- Textbasierte Auswahl: Mit XPath können Sie Elemente finden, die bestimmten Text enthalten, was für dynamische Inhalte von unschätzbarem Wert ist.
- Traversal-Funktionen: Sie können im DOM-Baum nach oben (zu übergeordneten Elementen), nach unten (zu untergeordneten Elementen) oder seitwärts (zu gleichgeordneten Elementen) navigieren.
- Logische Operationen: XPath unterstützt logische Operatoren wie and, or und not, wodurch komplexe Auswahlbedingungen ermöglicht werden.
XPath Essentials
Um XPath effektiv nutzen zu können, ist es wichtig, seine grundlegenden Komponenten und seine Struktur zu verstehen.
1. Syntax und Struktur
XPath-Ausdrücke werden als eine Reihe von Schritten geschrieben, die durch Schrägstriche (/) getrennt sind und durch die Knotenhierarchie des Dokuments navigieren. Jeder Schritt besteht aus:
- Einer Knotenauswahl (z. B. einem Elementnamen oder einem Platzhalter)
- Optionalen Prädikaten (Bedingungen in eckigen Klammern)
- Optionalen Achsen (die die Richtungsbeziehung angeben)
Die grundlegende Syntax folgt diesem Muster:
axisname::nodetest[predicate]
Wobei:
axisnamedefiniert die zu verwendende Beziehung (untergeordnet, übergeordnet usw.)nodetestidentifiziert, welche Knoten ausgewählt werden sollenpredicatefiltert die ausgewählten Knoten basierend auf Bedingungen
2. Schlüsselachsen und Knotentypen
XPath bietet verschiedene Achsen, um Beziehungen zwischen Knoten zu definieren:
- child: Wählt alle untergeordneten Elemente des aktuellen Knotens aus
- parent: Wählt das übergeordnete Element des aktuellen Knotens aus
- ancestor: Wählt alle Vorfahren (übergeordnetes Element, Großeltern usw.) aus
- descendant: Wählt alle Nachkommen (untergeordnete Elemente, Enkel usw.) aus
- sibling: Wählt gleichgeordnete Elemente aus (Knoten mit demselben übergeordneten Element)
- self: Wählt den aktuellen Knoten aus
Zu den Knotentypen, die ausgewählt werden können, gehören:
- element: HTML/XML-Elemente
- attribute: Elementattribute
- text: Textinhalt innerhalb von Elementen
- comment: Kommentar-Knoten
- processing-instruction: Verarbeitungsanweisungs-Knoten
3. Häufige Funktionen
XPath enthält zahlreiche Funktionen, die seine Fähigkeiten erweitern:
- text(): Ruft den Textinhalt eines Elements ab
- contains(): Überprüft, ob eine Zeichenfolge eine bestimmte Teilzeichenfolge enthält
- starts-with(): Überprüft, ob eine Zeichenfolge mit einer bestimmten Teilzeichenfolge beginnt
- concat(): Kombiniert mehrere Zeichenfolgen
- substring(): Extrahiert einen Teil einer Zeichenfolge
- count(): Zählt die Anzahl der Knoten in einem Knotensatz
- position(): Gibt die Position eines Knotens in einem Knotensatz zurück
- last(): Gibt die Position des letzten Knotens in einem Knotensatz zurück
XPath-Typen
Es gibt zwei Hauptansätze zum Erstellen von XPath-Ausdrücken: absolut und relativ.
Absoluter XPath-Ausdruck
Absoluter XPath liefert den vollständigen Pfad von der Wurzel des Dokuments zum Zielelement. Er beginnt mit einem einzelnen Schrägstrich (/) und enthält jedes Element in der Hierarchie.
Beispiel:
/html/body/div[2]/form/input[3]
Vorteile:
- Bietet einen präzisen, eindeutigen Pfad zum Element
- Nützlich, wenn Sie eine bestimmte Instanz eines Elements ansprechen müssen
Nachteile:
- Extrem brüchig und anfällig für Brüche, wenn sich die Seitenstruktur ändert
- Lang und schwer zu lesen
- Erfordert eine Aktualisierung, wenn sich ein übergeordnetes Element ändert
Relativer XPath
Relativer XPath beginnt an einem beliebigen Punkt im Dokument und verwendet einen doppelten Schrägstrich (//), um anzugeben, dass der Pfad von überall aus beginnen kann. Dieser Ansatz ist flexibler und widerstandsfähiger gegen Änderungen in der Dokumentstruktur.
Beispiel:
//input[@id='email']
Vorteile:
- Robuster gegen Änderungen in der Dokumentstruktur
- Kürzer und lesbarer
- Konzentriert sich auf eindeutige Attribute oder Merkmale des Elements
Nachteile:
- Kann in komplexen Dokumenten weniger spezifisch sein
- Könnte potenziell mehrere Elemente abgleichen, wenn es nicht sorgfältig konstruiert wird
XPath-Syntax
Das Verständnis der Kernelemente der Syntax ist entscheidend für die Erstellung effektiver XPath-Ausdrücke:
Grundlegende Syntaxelemente:
- / (Einzelner Schrägstrich): Wählt vom Wurzelknoten aus, der einen absoluten Pfad darstellt
- // (Doppelter Schrägstrich): Wählt Knoten an beliebiger Stelle im Dokument aus, die dem Ausdruck entsprechen
- . (Punkt): Bezieht sich auf den aktuellen Knoten
- .. (Doppelpunkt): Bezieht sich auf das übergeordnete Element des aktuellen Knotens
- @ (At-Zeichen): Wählt Attribute aus
- [] (Eckige Klammern): Enthält Prädikate (Bedingungen)
- \(Sternchen): Platzhalter, der jedem Elementknoten entspricht
Prädikate
Prädikate sind Bedingungen, die in eckigen Klammern eingeschlossen sind und die Knotenauswahl filtern:
//div[@class='container'] // Wählt div-Elemente mit der Klasse 'container' aus
//button[text()='Submit'] // Wählt button-Elemente mit dem Text 'Submit' aus
//li[position()=3] // Wählt das dritte li-Element aus
//input[@type='text' and @required] // Wählt erforderliche Texteingabeelemente aus
XPath-Selektoren
XPath-Selektoren definieren die Kriterien für die Auswahl von Knoten im Dokument. Hier sind einige gängige Selektormuster:
Element-Selektoren:
//div // Wählt alle div-Elemente aus
//div/p // Wählt alle p-Elemente aus, die direkte untergeordnete Elemente von div sind
//div//p // Wählt alle p-Elemente an beliebiger Stelle innerhalb von div aus
Attribut-Selektoren:
//*[@id='username'] // Wählt Element mit der ID 'username' aus
//input[@name='password'] // Wählt Eingabe mit dem Namen 'password' aus
//a[@href] // Wählt alle Links mit dem Attribut href aus
//img[@src='logo.png'] // Wählt Bild mit bestimmter src aus
Positions-Selektoren:
//tr[1] // Wählt das erste tr-Element aus
//tr[last()] // Wählt das letzte tr-Element aus
//tr[position()>1] // Wählt alle tr-Elemente außer dem ersten aus
//ul/li[position() mod 2 = 0] // Wählt gleichmäßig positionierte li-Elemente aus
Textinhalt-Selektoren:
//h1[text()='Welcome'] // Wählt h1 mit exaktem Text 'Welcome' aus
//p[contains(text(),'important')] // Wählt p mit dem Wort 'important' aus
//label[starts-with(text(),'User')] // Wählt Labels aus, die mit 'User' beginnen
XPath-Ausdrücke
XPath-Ausdrücke können von einfach bis komplex reichen, abhängig von den Elementen, die Sie lokalisieren müssen. Hier sind einige Beispiele für zunehmend komplexe Ausdrücke:
Einfache Ausdrücke:
//h1 // Alle h1-Elemente
//div[@class='header'] // Alle div-Elemente mit der Klasse 'header'
//input[@type='submit'] // Alle Schaltflächen zum Absenden
Zwischenausdrücke:
//div[contains(@class,'product')]//span[@class='price'] // Preisspannen innerhalb von Produktdivs
//table//tr[position() > 1] // Alle Tabellenzeilen außer Überschriften
//form[.//input[@required]] // Formulare, die erforderliche Eingaben enthalten
Erweiterte Ausdrücke:
//div[not(@class='hidden') and contains(@id,'section')] // Sichtbare Abschnitte mit bestimmtem ID-Muster
//ul[count(./li) > 5] // Listen mit mehr als 5 Elementen
//a[contains(@href,'https') and not(contains(@class,'external'))] // Interne HTTPS-Links
XPath-Achsen
Achsen definieren die Navigationsrichtung vom aktuellen Knoten aus. Das Verständnis von Achsen ermöglicht eine anspruchsvollere Elementauswahl:
Untergeordnete und Nachkommen-Achsen:
child::div // Gleiches wie ./div
descendant::p // Gleiches wie .//p
Übergeordnete und Vorfahren-Achsen:
parent::div // Übergeordnetes div des aktuellen Knotens
ancestor::form // Beliebiger Formularvorfahre des aktuellen Knotens
ancestor-or-self::div // Beliebiger div-Vorfahre oder der aktuelle Knoten, wenn es sich um ein div handelt
Geschwister-Achsen:
following-sibling::li // Alle li-Geschwister, die dem aktuellen Knoten folgen
preceding-sibling::div // Alle div-Geschwister, die dem aktuellen Knoten vorausgehen
Andere nützliche Achsen:
following::h2 // Alle h2-Elemente, die nach dem aktuellen Knoten im Dokument erscheinen
preceding::input // Alle Eingabeelemente, die vor dem aktuellen Knoten erscheinen
self::p // Wählt den aktuellen Knoten aus, wenn es sich um einen Absatz handelt
XPath-Operatoren
XPath unterstützt verschiedene Operatoren zum Erstellen komplexer Bedingungen:
Vergleichsoperatoren:
- = : Gleich
- != : Ungleich
- < : Kleiner als
- > : Größer als
- <= : Kleiner als oder gleich
- >= : Größer als oder gleich
Logische Operatoren:
- and : Logisches UND
- or : Logisches ODER
- not() : Logisches NICHT
Arithmetische Operatoren:
- + : Addition
- : Subtraktion
- \: Multiplikation
- div : Division
- mod : Modulus
Beispiele:
//input[@value > 100] // Eingaben mit einem Wert größer als 100
//div[@class='item' and @id] // Divs mit der Klasse 'item', die auch eine ID haben
//product[price > 50 and price < 100] // Produkte mit einem Preis zwischen 50 und 100
//li[position() mod 2 = 1] // Ungerade nummerierte Listenelemente
XPath-Funktionen
XPath bietet zahlreiche integrierte Funktionen zur Datenmanipulation:
Zeichenfolgenfunktionen:
//a[contains(text(), 'Sign up')] // Links, die den Text "Sign up" enthalten
//label[starts-with(@for, 'user')] // Labels mit dem Attribut 'for', das mit 'user' beginnt
//p[string-length(text()) > 100] // Absätze mit Text, der länger als 100 Zeichen ist
//div[normalize-space(text())='Hello World'] // Divs mit exaktem Text (ohne zusätzliche Leerzeichen)
Numerische Funktionen:
//ul[count(li) > 5] // Listen mit mehr als 5 Elementen
//div[round(number(@data-value)) = 42] // Divs mit Datenwert, der auf 42 gerundet wird
//product[floor(price) = 99] // Produkte mit einem Preis, der auf 99 abgerundet wird
Knotensatzfunktionen:
//tr[position() = last()] // Letzte Tabellenzeile
//div[count(child::*) = 0] // Leere div-Elemente (keine untergeordneten Elemente)
//div[not(descendant::a)] // Divs, die keine Links enthalten
Debug-Konsole für XPath
Eine der effektivsten Möglichkeiten, XPath-Ausdrücke zu entwickeln und zu testen, ist die Verwendung der Entwicklertools Ihres Browsers:
In Chrome:
- Drücken Sie F12 oder Strg+Umschalt+I, um die DevTools zu öffnen
- Gehen Sie zur Registerkarte Konsole
- Verwenden Sie
$x("your-xpath-here"), um XPath-Ausdrücke auszuwerten - Die Ergebnisse werden als Array übereinstimmender Elemente angezeigt
In Firefox:
- Drücken Sie F12 oder Strg+Umschalt+I, um die DevTools zu öffnen
- Gehen Sie zur Registerkarte Konsole
- Verwenden Sie
$x("your-xpath-here"), um XPath-Ausdrücke auszuwerten - Die Ergebnisse werden als Array übereinstimmender Elemente angezeigt
In Edge:
- Drücken Sie F12 oder Strg+Umschalt+I, um die DevTools zu öffnen
- Gehen Sie zur Registerkarte Konsole
- Verwenden Sie
$x("your-xpath-here"), um XPath-Ausdrücke auszuwerten - Die Ergebnisse werden als Array übereinstimmender Elemente angezeigt
Diese direkte Feedbackschleife ermöglicht es Ihnen, Ihre XPath-Ausdrücke schnell zu verfeinern, bis sie die Zielelemente korrekt identifizieren.
Tipps und Best Practices
1. Vermeiden Sie häufige Fallstricke
Halten Sie es einfach: Einfachere XPath-Ausdrücke sind leichter zu warten und weniger anfällig für Brüche, wenn sich die Seitenstruktur ändert. Streben Sie nach prägnanten Ausdrücken, die Ihr Element direkt mit eindeutigen Attributen ansprechen.
Vermeiden Sie absolute Pfade: Absolute Pfade sind extrem brüchig. Wenn sich ein Element im Pfad ändert, bricht der XPath. Verwenden Sie relative Pfade, die sich nach Möglichkeit auf eindeutige Bezeichner konzentrieren.
Seien Sie spezifisch: Machen Sie Ihre Ausdrücke so spezifisch wie nötig, aber nicht mehr. Übermäßige Spezifität kann Ausdrücke brüchig machen, während zu wenig Spezifität möglicherweise unbeabsichtigte Elemente abgleicht.
Verwenden Sie Prädikate mit Bedacht: Prädikate sind leistungsstark für das Filtern von Elementen, aber zu viele verschachtelte Prädikate können Ausdrücke schwer lesbar und wartbar machen.
Berücksichtigen Sie die browserübergreifende Kompatibilität: Einige XPath-Funktionen funktionieren möglicherweise in verschiedenen Browsern unterschiedlich. Testen Sie Ihre Ausdrücke in allen Zielbrowsern, um die Konsistenz sicherzustellen.
2. Optimieren Sie die Leistung
Verwenden Sie effiziente Selektoren: Verwenden Sie nach Möglichkeit IDs oder andere eindeutige Bezeichner. Der Ausdruck //*[@id='username'] ist im Allgemeinen schneller als komplexe hierarchische Selektoren.
Begrenzen Sie die Verwendung von //: Der Doppel-Schrägstrich-Operator (//) durchsucht das gesamte Dokument, was langsam sein kann. Wenn Sie den allgemeinen Standort eines Elements kennen, beginnen Sie mit einem spezifischeren Pfad.
Cache-Elemente: Wenn Sie mehrmals mit demselben Element interagieren müssen, speichern Sie die Referenz, anstatt sie wiederholt mit XPath zu lokalisieren.
Minimieren Sie XPath-Aufrufe: Jede XPath-Auswertung benötigt Zeit. Gruppieren Sie Operationen nach Möglichkeit, um die Anzahl der Suchvorgänge zu reduzieren.
Testen Sie die Leistung: Wenn Sie Verlangsamungen in Ihren automatisierten Tests feststellen, profilieren Sie sie, um festzustellen, ob XPath-Abfragen der Engpass sind. Ziehen Sie bei Bedarf alternative Selektoren in Betracht.
3. Effektiv debuggen
Verwenden Sie die Entwicklertools des Browsers: Die meisten modernen Browser ermöglichen es Ihnen, XPath-Ausdrücke direkt in der Konsole zu testen. Dies liefert sofortiges Feedback, ob Ihr Ausdruck funktioniert.
Ausgabeergebnisse: Protokollieren Sie während der Entwicklung und des Debuggens die Ergebnisse Ihrer XPath-Abfragen, um zu überprüfen, ob Sie die beabsichtigten Elemente auswählen.
Schrittweise durch den Code gehen: Verwenden Sie Haltepunkte und schrittweises Debugging in Ihrem Test-Framework, um den Zustand Ihrer Anwendung und die XPath-Ergebnisse zu untersuchen.
Kommentieren Sie Ihren XPath: Fügen Sie Kommentare hinzu, um komplexe XPath-Ausdrücke zu erläutern, insbesondere wenn Sie erweiterte Funktionen verwenden oder Randfälle behandeln.
Regelmäßig überprüfen und refaktorieren: Überprüfen Sie Ihre XPath-Ausdrücke regelmäßig, wenn sich Ihre Anwendung weiterentwickelt, um sicherzustellen, dass sie zuverlässig und effizient bleiben.
XPath-Spickzettel
Hier ist ein umfassender Referenzleitfaden für XPath-Ausdrücke:
Grundlegende XPath-Syntax:
/ // Wählt vom Wurzelknoten aus
// // Wählt Knoten an beliebiger Stelle im Dokument aus
. // Repräsentiert den aktuellen Knoten
.. // Repräsentiert das übergeordnete Element des aktuellen Knotens
Selektoren:
element // Wählt alle Elemente mit dem angegebenen Namen aus
@attribute // Wählt den Wert des angegebenen Attributs aus
* // Wählt alle untergeordneten Elemente aus
text() // Wählt den Text innerhalb eines Elements aus
[predicate] // Fügt eine Bedingung zum Filtern von Knoten hinzu
Prädikate:
[name='value'] // Wählt Knoten mit dem angegebenen Attributwert aus
[position()] // Wählt Knoten basierend auf ihrer Position aus
[last()] // Wählt den letzten Knoten eines bestimmten Typs aus
[contains(@attribute, 'value')] // Wählt Knoten mit Attributwerten aus, die 'value' enthalten
[not(predicate)] // Negiert eine Bedingung
Achsen:
ancestor:: // Wählt alle Vorfahren aus
ancestor-or-self:: // Wählt Vorfahren und den aktuellen Knoten aus
child:: // Wählt alle untergeordneten Elemente aus
descendant:: // Wählt alle Nachkommen aus
descendant-or-self:: // Wählt Nachkommen und den aktuellen Knoten aus
following:: // Wählt alle folgenden Knoten aus
following-sibling:: // Wählt folgende Geschwister aus
parent:: // Wählt das übergeordnete Element aus
preceding:: // Wählt alle vorhergehenden Knoten aus
preceding-sibling:: // Wählt vorhergehende Geschwister aus
self:: // Wählt den aktuellen Knoten aus
Operatoren:
= // Gleich
!= // Ungleich
< // Kleiner als
<= // Kleiner als oder gleich
> // Größer als
>= // Größer als oder gleich
and // Logisches UND
or // Logisches ODER
not // Logisches NICHT
Funktionen (Beispiele):
name() // Gibt den Namen des aktuellen Knotens zurück
count(nodes) // Gibt die Anzahl der Knoten im Knotensatz zurück
concat(string1, string2) // Verkettet zwei Zeichenfolgen
substring(string, start, length) // Gibt eine Teilzeichenfolge zurück
contains(string, substr) // Überprüft, ob eine Zeichenfolge eine Teilzeichenfolge enthält
normalize-space(string) // Entfernt führende/nachgestellte Leerzeichen und fasst Leerzeichen zusammen
Beispiele:
/bookstore/book // Wählt alle Buchelemente im Wurzel-Buchladen aus
//title[text()='XPath'] // Wählt Titellelemente mit dem Text 'XPath' an beliebiger Stelle im Dokument aus
//*[@id='myId'] // Wählt Elemente mit dem Attribut id gleich 'myId' aus
/bookstore/book[position()=1] // Wählt das erste Buchelement aus
//div[@class='highlight']//p // Wählt p-Elemente innerhalb von div mit der Klasse 'highlight' aus
//a[contains(@href, 'example.com')] // Wählt a-Elemente mit 'example.com' im href-Attribut aus
Erweiterte XPath-Techniken
Arbeiten mit dynamischen IDs und Klassen
Moderne Web-Frameworks generieren oft dynamische IDs und Klassen, die sich bei jedem Seitenaufruf ändern. Hier sind Techniken zur Behandlung dieser Szenarien:
// Verwendung von teilweisem Attributabgleich
//div[contains(@id, 'main-content')]
//button[starts-with(@id, 'submit-')]
//input[ends-with(@id, '-input')] // Hinweis: Dies ist XPath 2.0 und wird nicht in allen Browsern unterstützt
// Verwendung von Klassennamenmustern
//div[contains(@class, 'btn') and contains(@class, 'primary')]
Umgang mit Iframes
Die Auswahl von Elementen innerhalb von Iframes erfordert eine spezielle Behandlung:
// Zuerst das Iframe lokalisieren
//iframe[@id='content-frame']
// Dann würden Sie in Selenium zum Iframe-Kontext wechseln, bevor Sie XPath verwenden, um Elemente darin zu finden
// driver.switchTo().frame(driver.findElement(By.xpath("//iframe[@id='content-frame']")));
// Nach dem Wechsel können Sie XPath normal innerhalb des Iframe-Kontexts verwenden
//button[@id='submit']
Erkennen der Elementsichtbarkeit
XPath selbst kann nicht direkt bestimmen, ob ein Element sichtbar ist, aber Sie können nach Eigenschaften suchen, die oft auf Sichtbarkeit hindeuten:
// Elemente mit display:none haben oft Inline-Stil
//div[not(contains(@style, 'display: none'))]
// Elemente können über Klassen ausgeblendet werden
//div[not(contains(@class, 'hidden'))]
// Elemente können das Attribut aria-hidden haben
//div[not(@aria-hidden='true')]
Umgang mit mehreren Elementen mit denselben Eigenschaften
Wenn mehrere Elemente dieselben Attribute oder Eigenschaften haben, können Sie die Indizierung oder spezifischere Attribute verwenden:
// Wähle die zweite Schaltfläche mit der Klasse 'action'
(//button[@class='action'])[2]
// Auswählen basierend auf Textinhalt und Klasse
//button[@class='action' and contains(text(), 'Save')]
// Auswählen basierend auf umgebenden Elementen
//div[@class='card']//button[contains(text(), 'View details')]
XPath in verschiedenen Test-Frameworks
Selenium WebDriver
Selenium bietet direkte Unterstützung für XPath-Locators:
// Java-Beispiel
WebElement element = driver.findElement(By.xpath("//button[@id='submit']"));
# Python-Beispiel
element = driver.find_element(By.XPATH, "//button[@id='submit']")
// JavaScript-Beispiel
const element = await driver.findElement(By.xpath("//button[@id='submit']"));
Playwright
Playwright unterstützt XPath-Selektoren, obwohl CSS-Selektoren für eine bessere Leistung empfohlen werden:
// JavaScript-Beispiel
const element = await page.locator('xpath=//button[@id="submit"]');
await element.click();
# Python-Beispiel
element = page.locator('xpath=//button[@id="submit"]')
element.click()
Cypress
Cypress unterstützt XPath mit einem Plugin:
// Zuerst das Plugin installieren: npm install -D cypress-xpath
// Zu cypress/support/e2e.js hinzufügen:
// require('cypress-xpath')
// Dann in Tests verwenden
cy.xpath('//button[@id="submit"]').click()
Beispiele aus der Praxis für XPath
E-Commerce-Website-Beispiele:
// Finde alle Produkte mit einem Rabatt
//div[@class='product'][.//span[@class='discount']]
// Finde Produkte mit einem Preis in einem bestimmten Bereich
//div[@class='product'][.//span[@class='price' and number(translate(text(), '$', '')) < 100]]
// Finde Produkte mit einer Bewertung von 4+ Sternen
//div[@class='product'][.//div[@class='rating' and @data-stars >= 4]]
Beispiele für Formularvalidierung:
// Finde alle Pflichtfelder
//input[@required]
// Finde Felder mit Validierungsfehlern
//input[../span[@class='error']]
// Finde Labels von Pflichtfeldern
//label[./following-sibling::input[@required] or ./input[@required]]
Beispiele für Tabellendaten:
// Finde Tabellenzeilen mit bestimmtem Inhalt
//table[@id='data']//tr[td[contains(text(), 'Completed')]]
// Finde die Header-Zelle für eine bestimmte Spalte
//table//th[contains(text(), 'Status')]
// Finde Zellen in derselben Spalte wie eine bestimmte Überschrift
//table//th[contains(text(), 'Status')]/following-sibling::td
Fazit
Die Beherrschung von XPath ist eine grundlegende Fähigkeit für alle, die an der Webtestautomatisierung oder Datenextraktion beteiligt sind. Dieser Leitfaden hat Sie mit einem tiefen Verständnis der XPath-Grundlagen, der Syntax, der Selektoren und der Best Practices ausgestattet. Durch die Umsetzung dieser Strategien können Sie Ihre automatisierten Testprozesse optimieren, die Testzuverlässigkeit verbessern und selbst durch die komplexesten DOM-Strukturen sicher navigieren.
Die Flexibilität und Leistungsfähigkeit von XPath machen es zu einem unverzichtbaren Werkzeug in Ihrem Test-Toolkit, insbesondere bei der Arbeit mit komplexen Webanwendungen, bei denen einfachere Locators möglicherweise nicht ausreichen. Während CSS-Selektoren oft aufgrund ihrer Leistung bevorzugt werden, gibt es viele Szenarien, in denen die einzigartigen Fähigkeiten von XPath – wie die Auswahl von Elementen basierend auf Textinhalt oder das Durchlaufen der DOM-Hier
