logo
languageDEdown
menu

XPath beim Web Scraping: Ein Einstieg für Anfänger

star

XPath ist eine Pfadsprache, mit der Scraping-Tools gezielt Elemente auf Webseiten auswählen — von einfachen Attribut-Selektoren bis hin zu Textabgleich und Geschwisternavigation. Der Leitfaden erklärt die Grundkonzepte, die zehn wichtigsten Ausdrücke und zeigt, wie man langlebige Selektoren schreibt, die auch nach Website-Updates noch funktionieren.

10 Minuten lesen
XPath Web Scraping Grundlagen und Struktur

XPath Web Scraping basiert auf einer Sprache, die die meisten Scraping Tools verwenden, um gezielt auf Elemente einer Seite zu zeigen: einen Preis, einen „Weiter”-Button oder eine Zeile in einer Tabelle. Wenn Ihr Scraper ständig abstürzt, ist das Problem fast immer ein anfälliger XPath und nicht das Tool selbst.

Dieses Tutorial setzt keine Programmierkenntnisse voraus. Wir beginnen damit, woraus eine Webseite eigentlich besteht, da XPath ohne dieses Grundverständnis schwer nachvollziehbar ist. Danach lernen Sie, Ihren ersten XPath-Ausdruck zu schreiben, Textabgleich-Tricks anzuwenden und Selektoren so zu gestalten, dass sie auch nach Website-Updates zuverlässig funktionieren. 

Vor XPath: Den Website Quelltext durchsuchen und verstehen

Jede Webseite, die Sie sehen, basiert auf einer in HTML geschriebenen Textdatei. Wenn Sie den Website-Quelltext durchsuchen, sieht das hinter den Fotos und Buttons so aus: 

<div class="product">
  <h2>Kabellose Maus</h2>
  <span class="price">24,99 €</span>
  <a href="/buy/mouse-123">Jetzt kaufen</a>
</div>

Vier Begriffe entschlüsseln alles, was folgt:

  • Tag. Die Bezeichnungen in spitzen Klammern, wie <div>, <h2>, <a>. Jeder Tag-Typ hat eine Aufgabe: h2 ist eine Überschrift, a ist ein Link, span ist ein kleiner Textabschnitt, div ist ein allgemeiner Container, wie ein Karton, der andere Dinge enthält.
  • Element. Eine komplette Einheit vom öffnenden bis zum schließenden Tag, einschließlich allem, was dazwischen liegt. <h2>Kabellose Maus</h2> ist ein Element. Wenn in diesem Tutorial steht „Wählen Sie ein Element aus”, bedeutet das: Gemeint ist eine dieser Einheiten.
  • Attribut. Zusätzliche Bezeichnungen, die im öffnenden Tag in der Form name="wert" geschrieben werden. Im Beispiel hat das div ein class-Attribut mit dem Wert „product”, und der Link hat ein href-Attribut, das die Ziel-URL enthält. Attribute sind die Art und Weise, wie Entwickler Dinge benennen und konfigurieren, und sie sind die bevorzugten Ankerpunkte für XPath.
  • Verschachtelung (Nesting). Elemente leben in anderen Elementen. Das h2, das span und das a befinden sich alle innerhalb des div. Browser verfolgen diese Beziehungen wie einen Stammbaum: Das div ist das Elternelement (Parent), die drei Elemente darin sind seine Kinder (Children), und diese drei sind Geschwister (Siblings) zueinander.

Programmierer nennen diesen Stammbaum von Elementen das DOM (Document Object Model). Sie müssen sich das Akronym nicht merken. Behalten Sie einfach das Bild im Kopf: Eine Webseite ist ein Baum aus Boxen in Boxen, und jede Box kann Namensschilder (Attribute) tragen.

Noch ein Wort, das Sie überall sehen werden: Knoten (Node). Ein Knoten ist einfach ein einzelnes Element in diesem Baum, meist ein Element, manchmal ein Textstück oder ein Attribut. „Den Knoten auswählen” bedeutet einfach „auf dieses Element im Baum zeigen”.

Was ist XPath?

XPath (XML Path Language) ist eine Sprache, um Pfade durch diesen Baum zu beschreiben. Ein Dateipfad wie C:\Fotos\2026\strand.jpg beschreibt einen Weg durch Ordner zu einer Datei. Ein XPath beschreibt einen Weg durch verschachtelte Elemente genau zu dem Element, das Sie benötigen. 

Nehmen Sie den Ausdruck //div[@class="product"]/h2 und lesen Sie ihn Stück für Stück:

  • //div sagt „finde jedes div, überall auf der Seite”
  • [@class="product"] grenzt es ein: „aber nur die, deren class-Attribut ‘product’ entspricht”
  • /h2 geht noch einen Schritt weiter: „dann gehe hinein und nimm das h2

Wenden Sie das auf unser Beispiel-HTML an, und es landet genau bei <h2>Kabellose Maus</h2>. Browser, Test-Frameworks wie Selenium und visuelle Scraping Tools wie Octoparse (die beste Software für XPath Web Scraping) nutzen XPath auf diese Weise: Sie übergeben die Wegbeschreibung, und das Tool holt das, was sich am Ziel befindet.

XPath hat im Vergleich zu CSS-Selektoren — auf die wir später noch eingehen — zwei Fähigkeiten, die für das Scraping besonders wichtig sind. Es kann in jede Richtung durch den Baum reisen: nach unten zu den Kindern, nach oben zu den Eltern, seitwärts zu den Geschwistern. Und es kann Elemente anhand der auf dem Bildschirm sichtbaren Wörter finden, wie „finde den Link, auf dem Weiter steht”. Beides kommt auf echten Websites ständig vor.

XPath Syntax Grundlagen: Die Bausteine

Jeder XPath-Ausdruck wird aus einer Handvoll Symbolen zusammengesetzt. Lernen Sie diese sechs, und Sie können fast jeden Selektor lesen, dem Sie jemals begegnen werden: 

SyntaxWas sie tutBeispielSo liest man es
/Geht genau eine Ebene nach unten/html/body/div“Von ganz oben: in html, in body, in div”
//Sucht überall, in jeder Tiefe//h2“Jedes h2, wo auch immer es ist”
@Bezieht sich auf ein Attribut//a[@href]“Jeder Link, der ein href-Attribut hat”
[ ]Fügt eine Filterbedingung hinzu//div[@id=”main”]“Nur divs, deren id main ist”
*Platzhalter, jeder Tag-Name//div/*“Alles direkt in einem beliebigen div”
. and ..Dieses Element / sein Elternelement//span/..“Das Elternelement jedes spans, was auch immer es ist”

Die Bedingung in den eckigen Klammern hat einen formalen Namen — Prädikat — aber es ist im Grunde nur ein Filter. Er kann nach Attributen filtern (//li[@class="active"] behält nur Listenelemente mit dieser Klasse) oder nach Position (//li[3] behält nur das dritte Listenelement). Stellen Sie sich das vor wie den Unterschied zwischen „die Häuser in dieser Straße” und „die Häuser in dieser Straße mit einer roten Tür”.

XPath hat auch Achsen — benannte Bewegungsrichtungen. Während / immer „hinunter in” bedeutet, können Sie mit einer Achse sagen „hinauf zum Elternelement” (parent::) oder „hinüber zum nächsten Geschwisterelement” (following-sibling::). Warum das in der Praxis wichtig ist, zeigt folgendes Beispiel. Produktseiten kennzeichnen Daten oft so:

<span>Preis</span><span>24,99 €</span>

Der Preis selbst hat überhaupt kein Namensschild. Aber er steht direkt neben einem Label, das eines hat. Also verankern Sie sich am Label und gehen einen Schritt zur Seite: //span[text()="Preis"]/following-sibling::span liest sich als „finde das span, in dem Preis steht, und nimm dann das span daneben”. Sie haben nach Beziehung statt nach Name navigiert — eine Fähigkeit, die CSS-Selektoren nicht besitzen.


Absoluter vs. relativer XPath: Warum absolute Pfade fehleranfällig sind

Absoluter vs. Relativer XPath: Warum absolute Pfade fehleranfällig sind

Es gibt zwei Arten, Wegbeschreibungen zu schreiben, und der Unterschied entscheidet darüber, ob Ihr Scraper den Monat überlebt.

Ein absoluter XPath beginnt ganz oben auf der Seite und buchstabiert jeden einzelnen Schritt aus: /html/body/div[3]/div[2]/ul/li[1]/a. Das ist so, als würde man als Wegbeschreibung “vom Stadttor aus nimm die 3. Straße, dann das 2. Gebäude, dann die 1. Tür” geben. Hyperpräzise, aber es zerbricht in dem Moment, in dem etwas dazwischen gebaut wird. Wenn die Seite ein Banner über Ihrem Ziel einfügt, wird “das 3. div” zum 4., und Ihr Pfad zeigt nun stillschweigend auf das falsche Element.

Ein relativer XPath überspringt die Route und verankert sich an einem Orientierungspunkt: //ul[@id="results"]/li[1]/a, oder “wo auch immer die Liste namens results ist, nimm den Link ihres ersten Elements”. Die Seite kann die ganze Nachbarschaft umbauen; solange dieser Orientierungspunkt seinen Namen behält, funktioniert Ihre Wegbeschreibung weiterhin.

Bevorzugen Sie immer relativen XPath. Diese einzige Gewohnheit ist das größte Haltbarkeits-Upgrade, das Sie jedem Scraper verpassen können. (Das ist auch der Grund, warum Sie dem “XPath kopieren”-Button in Browsern gegenüber misstrauisch sein sollten, der Ihnen normalerweise die anfällige absolute Variante liefert.)

Wie man einen XPath-Ausdruck schreibt: Schritt für Schritt

Jetzt schreiben wir einen Ausdruck für eine echte Seite. Das einzige Tool, das Sie brauchen, ist bereits in Ihrem Browser: DevTools, ein integriertes Panel, das Ihnen das HTML hinter jeder Seite zeigt. Es sieht beim ersten Mal einschüchternd aus, aber Sie werden nur zwei Teile davon verwenden.

  1. Das Element untersuchen. Klicken Sie mit der rechten Maustaste auf das gewünschte Objekt auf der Seite (den Preis, den Button) und wählen Sie „Untersuchen” (Inspect). Die DevTools öffnen sich, wobei die entsprechende HTML-Zeile hervorgehoben wird. Diese hervorgehobene Zeile ist Ihr Zielelement; Sie betrachten nun den Baum, den wir zuvor beschrieben haben.
  2. Den nächsten stabilen Orientierungspunkt finden. Betrachten Sie Ihr Element und die Elemente, die es umhüllen (die Zeilen darüber, weniger eingerückt). Sie suchen nach einem Attribut, das wie ein bewusster Name aussieht: id="search-results", data-product-id="8831", role="navigation". Namen wie diese existieren für die eigene Funktionalität der Seite, also ändern sie sich selten. Ignorieren Sie Attribute, die wie zufälliges Kauderwelsch aussehen (class="css-1x9k2p"), da diese maschinell generiert werden und sich ständig ändern.
  3. Ihren Ausdruck dort verankern. Schreiben Sie den Orientierungspunkt als //tag[@attribut="wert"], zum Beispiel //div[@data-product-id]. (Das Weglassen des ="wert"-Teils bedeutet „dieses Attribut ist vorhanden, unabhängig von seinem Wert” — was oft alles ist, was Sie brauchen.)
  4. Zum Ziel hinabsteigen. Fügen Sie die verbleibenden Schritte hinzu, um Ihr Element zu erreichen: //div[@data-product-id]//span[@class="price"]. Im Klartext: „Finde innerhalb jedes product-divs das price-span.”
  5. Testen Sie es, bevor Sie ihm vertrauen. Öffnen Sie in den DevTools den Tab „Console” (Konsole — eine Kommandozeile für die Seite, in die Sie hier immer nur eine Sache eintippen werden). Tippen Sie $x('ihr-xpath-hier') ein und drücken Sie Enter. Die Seite meldet eine Liste aller Elemente zurück, die mit Ihrem Ausdruck übereinstimmen. Das ist kein Programmieren; es ist ein eingebauter Überprüfungstrick. Ein Treffer, wenn Sie einen erwartet haben: perfekt. Fünfzig Treffer: Ihr Filter ist zu locker, ziehen Sie das Prädikat an. Null Treffer: siehe die Hinweise zur Fehlerbehebung unten.

Eine schnellere visuelle Überprüfung: Drücken Sie Strg+F (Cmd+F auf dem Mac) im Elements-Panel und fügen Sie Ihren XPath ein. Der Browser markiert jeden Treffer direkt im HTML-Baum.

Die contains()-Funktion: Textabgleich mit XPath

Bisher haben wir Attribute exakt abgeglichen: class ist gleich „product”, Punkt. Echte Seiten sind chaotischer. Klassennamen kommen mit zufälligen Suffixen, Button-Beschriftungen haben verirrte Leerzeichen, und manchmal ist das einzig Verlässliche an einem Element der Text, den ein Mensch darauf lesen kann.

Hier kommt contains() ins Spiel. Es ist eine Funktion — ein kleiner eingebauter Helfer, der eine Frage beantwortet, in diesem Fall: „Enthält dieser Text dieses Fragment?” Wenn Sie contains() verwenden, platzieren Sie es innerhalb des Filters in eckigen Klammern, und der Filter behält nur Elemente, bei denen die Antwort ja lautet.

Hier ein konkretes Beispiel, bevor wir zur Tabelle kommen. //a[contains(text(), "Weiter")] liest sich als: „Finde jeden Link (a), betrachte seinen sichtbaren Text (text()) und behalte ihn, wenn dieser Text das Wort Weiter enthält.” Ein Button mit der Aufschrift „Weiter”, „Nächste Seite” oder „Weiter →” wird in jedem Fall akzeptiert. Genau diese Flexibilität macht contains() so nützlich.

Die Muster, die Menschen tatsächlich verwenden:

ZielAusdruck
Link anhand seines sichtbaren Textes//a[contains(text(), "Nächste Seite")]
Element nach Teilklasse//div[contains(@class, "product-card")]
Button, der ein Wort enthält (auch in verschachtelten Tags)//button[contains(., "In den Warenkorb")]
Exakte Textübereinstimmung//span[text()="Auf Lager"]
Einen Treffer ausschließen//li[not(contains(@class, "ad"))]
Zwei Bedingungen gleichzeitig//div[contains(@class, "row") and @data-id]
Groß-/Kleinschreibung ignorierender Abgleich//a[contains(translate(text(), "ABCDEFGHIJKLMNOPQRSTUVWXYZ", "abcdefghijklmnopqrstuvwxyz"), "weiter")]

Zwei Anmerkungen zur Tabelle. Der not(...)-Wrapper kehrt eine Bedingung um: „Einen Treffer ausschließen” bedeutet „Listenelemente, deren Klasse NICHT ad enthält” — so filtern Sie gesponsertes Material aus den Ergebnissen heraus. Und der Teilklassenabgleich ist gierig: contains(@class, "card") passt auch auf „card-footer” und „discard”. Wenn Präzision wichtig ist, verwenden Sie die strengere Form contains(concat(" ", normalize-space(@class), " "), " card ").

Textabgleich ist auch die Standardlösung für die Paginierung. Ein „Weiter”-Button hat oft keine stabile Klasse, aber seine Beschriftung ändert sich selten, sodass //a[contains(text(), "Weiter")] auch dann noch funktioniert, wenn sich das Styling ändert.

Dieser Abschnitt deckt die Muster ab, die Sie am häufigsten benötigen. Für jede Variation — einschließlich not(), und/oder-Verkettung, Attributabgleich und Tricks ohne Berücksichtigung der Groß- und Kleinschreibung — lesen Sie unseren vollständigen Leitfaden zu XPath contains().

Die 10 XPath-Ausdrücke, die Sie am meisten verwenden werden

Diese zehn Muster decken den Großteil der tatsächlichen XPath-Web-Scraping-Arbeit ab. Für jedes einzelne: was es im Klartext bedeutet, wann Sie es einsetzen und worauf Sie achten müssen.

Element nach ID//*[@id="main"]Lesen Sie es als: „alles, überall, dessen id main ist”. Der *-Platzhalter bedeutet, dass Sie nicht einmal den Tag-Namen kennen müssen. Eine id ist per Definition seiteneinzigartig, was dies zum zuverlässigsten Selektor macht, den es gibt. Wenn Ihr Ziel (oder ein Container darum herum) eine id hat, beginnen Sie hier und suchen Sie nicht weiter. Die Falle: Einige Frameworks generieren IDs, die zufällig aussehen (id="ember-422"); diese ändern sich zwischen Besuchen, vertrauen Sie also nur IDs, die wie bewusste Namen aussehen.

Element nach Teilklasse//div[contains(@class, "price")]Lesen Sie es als: „jedes div, dessen class-Attribut das Wort price enthält”. Sie benötigen die teilweise Übereinstimmung, da echte Elemente normalerweise mehrere Klassen gleichzeitig tragen (class="price price-large text-bold"), und eine exakte Übereinstimmung mit nur „price” würde fehlschlagen. Dies ist wahrscheinlich der Ausdruck, den Sie beim Scraping am häufigsten verwenden werden. Die Falle: Er passt auch auf „price-old” und „compare-price”, also überprüfen Sie mit $x(), was zurückkommt, bevor Sie ihm vertrauen.

Letztes Element in einer Liste//ul/li[last()]Lesen Sie es als: „nimm in der Liste das letzte Element”. last() ist ein Helfer, der immer auf das Ende zeigt, egal wie viele Elemente die Liste heute hat: zehn Produkte oder zweihundert. Klassische Verwendung: der letzte Link in einer Paginierungsleiste, der oft die höchste Seitenzahl ist. Der Begleit-Trick li[1] wählt das erste Element aus, und li[position()>1] bedeutet „alles außer dem ersten” — praktisch, um eine Kopfzeile zu überspringen.

Nur der erste Treffer(//div[@class="result"])[1]Lesen Sie es als: „sammle jedes result-div auf der Seite und behalte dann nur das erste”. Beachten Sie die Klammern: Sie lassen XPath zuerst alle Treffer sammeln und dann aus dieser kombinierten Liste auswählen. Ohne sie bedeutet //div[@class="result"][1] etwas subtil anderes („jedes div, das das erste Ergebnis innerhalb seines eigenen Elternelements ist”), was mehrere Elemente zurückgeben kann. Wenn Sie genau eine Sache wollen und die Seite viele hat, setzen Sie sie in Klammern und fügen Sie [1] hinzu.

Element mit einem data-*-Anker//div[@data-product-id]Lesen Sie es als: „jedes div, das ein data-product-id-Attribut hat, unabhängig von seinem Wert”. Kein ="..."-Teil nötig; allein das Vorhandensein des Attributs ist die Bedingung. Attribute, die mit data- beginnen, sind Hooks, von denen das eigene JavaScript der Seite abhängt, also halten Entwickler sie stabil — was sie zu Goldstandard-Ankern macht. Auf E-Commerce-Websites wählt dieser eine Ausdruck oft genau die Produktkarten und sonst nichts aus.

Elternelement eines Elements//span[@class="price"]/parent::divLesen Sie es als: „finde das price-span, dann gehe hoch zum div, das es enthält”. Dies ist die Aufwärtsbewegung, die CSS nicht ausführen kann. Warum Sie sie brauchen: Oft befindet sich das Element, das Sie leicht finden können (ein gekennzeichneter Preis), innerhalb des Elements, das Sie eigentlich auswählen möchten (die gesamte Produktkarte, damit Sie Titel, Preis und Link zusammen erfassen können). Kind finden, zum Elternelement navigieren — fertig. Die Kurzform /.. erledigt denselben Job: //span[@class="price"]/..

Nächstes Geschwisterelement//dt[text()="SKU"]/following-sibling::dd[1]Lesen Sie es als: „finde das Label, auf dem SKU steht, und nimm dann das erste Wertelement direkt danach”. Dies ist das Muster für Label-Wert-Paare, die überall sind: Spezifikationstabellen, Produktdetails, Kontaktinformationen. Der Wert hat normalerweise keinen eigenen Namen, aber das Label daneben bewegt sich nie. (dt und dd sind HTMLs Label- und Wert-Tags für Definitionslisten; dasselbe Muster funktioniert mit spans oder Tabellenzellen.) Das [1] am Ende behält nur das nächste Geschwisterelement, da die Achse sonst alle greifen würde.

Link-URL (die Adresse, nicht der Linktext)//a[@class="title"]/@hrefLesen Sie es als: „finde die title-Links, extrahiere dann ihr href-Attribut”. Der entscheidende Unterschied: Wenn Sie einen Ausdruck mit /@attribut beenden, ziehen Sie den Wert des Attributs heraus anstatt des Elements. Ohne /@href würden Sie sammeln, was der Link sagt („Kabellose Maus”); damit sammeln Sie, wohin der Link führt („/buy/mouse-123″). So ernten Sie URLs, die ein Scraper als Nächstes besuchen soll.

Bildquelle (die URL der Bilddatei)//img/@srcLesen Sie es als: „die Dateiadresse jedes Bildes”. Derselbe /@attribut-Trick wie oben, angewendet auf Bilder. Sammeln Sie diese und Sie haben herunterladbare URLs für jedes übereinstimmende Bild. Die Falle: Lazy-Loading-Sites parken die echte URL in einem anderen Attribut (data-src, data-original) und hinterlassen einen Platzhalter in src, bis Sie scrollen. Wenn Ihre gescrapten Bild-URLs alle wie derselbe winzige Platzhalter aussehen, wechseln Sie zu //img/@data-src.

Element mit nicht-leerem Text//p[normalize-space()]Lesen Sie es als: „jeder Absatz, der tatsächlich sichtbaren Text enthält”. normalize-space() schneidet Leerzeichen und Zeilenumbrüche weg; allein innerhalb eines Filters verwendet, fragt es „ist nach dem Trimmen noch etwas übrig?”. Leere und nur aus Leerzeichen bestehende Elemente fallen durch den Test und werden übersprungen. Verwenden Sie es, um Müllzeilen aus Ihren Ergebnissen zu bereinigen, bevor sie jemals Ihre Tabelle erreichen.

Für die umfassende Referenz, einschließlich aller Achsen, Funktionen und Operatorsyntax, setzen Sie ein Lesezeichen für unseren vollständigen [XPath-Spickzettel].

XPath vs. CSS-Selektoren: Was sollten Sie verwenden?

CSS-Selektoren sind die andere gängige Sprache, um auf Elemente zu verweisen. (CSS selbst ist die Sprache, die Webseiten formatiert, und ihre Targeting-Syntax wurde für das Scraping entlehnt.) Für einfache Aufgaben sind die beiden austauschbar; die Unterschiede zeigen sich in den Grenzfällen:

 CSS-SelektorenXPath
SyntaxKürzer, vertraut für Front-End-EntwicklerAusführlicher
RichtungNur abwärts (Eltern zu Kind)Jede Richtung, auch aufwärts
Abgleich nach TextNeinJa (contains(text(), …))
Bedingungen und FunktionenBegrenztReichhaltig (not(), last(), normalize-space())
Am besten fürSaubere, gut strukturierte SeitenUnbeholfene Strukturen, Textanker, Geschwisterlogik

Fazit: CSS ist der sauberere Standard, wenn die Seite gut aufgebaut ist. XPath ist die bessere Wahl, wenn das Element nur durch seinen Text, durch ein Geschwisterelement oder durch einen Vorfahren identifiziert werden kann.

Wie man langlebigen XPath schreibt, der Website-Updates übersteht

Ein Selektor, der heute funktioniert und nächste Woche kaputt geht, kostet mehr Zeit, als er gespart hat. Um zu verstehen, warum Selektoren verrotten, müssen Sie eines über moderne Websites wissen: Viele werden von Frameworks (React, Vue und Konsorten) zusammengestellt, die Klassennamen automatisch generieren, frisches Kauderwelsch bei jedem Website-Update. Alles, was an diesem Kauderwelsch verankert ist, stirbt beim nächsten Deploy. Langlebigkeit läuft auf fünf Prinzipien hinaus:

  • Vermeiden Sie automatisch generierte Klassennamen. Wenn es wie .css-1a2b3c oder sc-bdVaJa aussieht, hat es eine Maschine geschrieben und eine Maschine wird es überschreiben. Tretmine.
  • Bevorzugen Sie semantische Attribute. id, data-*, role und aria-label existieren, weil die eigenen Funktionen der Website davon abhängen (Barrierefreiheits-Tools lesen aria-label, die eigenen Skripte der Website lesen data-*). Entwickler können diese nicht beiläufig ändern, was genau der Grund ist, warum Ihr Selektor sich daran festhalten sollte.
  • Halten Sie die Kette kurz. Jeder zusätzliche Eltern-Kind-Schritt ist ein weiterer Ort, an dem eine Layoutänderung den Selektor zerbrechen lassen kann.
  • Vermeiden Sie Positionsindizes. li[4] geht davon aus, dass die Seite ihre Liste nie neu anordnet. Seiten werden neu angeordnet.
  • Verankern Sie sich am nächsten stabilen Orientierungspunkt. Wählen Sie relativ zum nächstgelegenen sinnvollen Element aus, nicht vom Dokumentenstamm.

Wenn Sie einen kaputten Scraper überprüfen, gleichen Sie die Selektoren zuerst mit dieser Liste ab. In den meisten Fällen besteht die Lösung darin, einen anfälligen Anker durch einen semantischen zu ersetzen.

Wie man langlebigen XPath schreibt, der Website-Updates übersteht

Ein Selektor, der heute funktioniert und nächste Woche kaputt geht, kostet mehr Zeit, als er gespart hat. Um zu verstehen, warum Selektoren verrotten, müssen Sie eines über moderne Websites wissen: Viele werden von Frameworks (React, Vue und Konsorten) zusammengestellt, die bei jedem Update frisches Kauderwelsch als Klassennamen generieren. Alles, was an diesem Kauderwelsch verankert ist, stirbt beim nächsten Deploy. Langlebigkeit läuft auf fünf Prinzipien hinaus:

  • Vermeiden Sie automatisch generierte Klassennamen. Wenn es wie .css-1a2b3c oder sc-bdVaJa aussieht, hat es eine Maschine geschrieben und eine Maschine wird es überschreiben — eine Tretmine.
  • Bevorzugen Sie semantische Attribute. id, data-*, role und aria-label existieren, weil die eigenen Funktionen der Website davon abhängen (Barrierefreiheits-Tools lesen aria-label, die eigenen Skripte der Website lesen data-*). Entwickler können diese nicht beiläufig ändern — genau deshalb sollten Sie Ihre Selektoren darauf aufbauen.
  • Halten Sie die Kette kurz. Jeder zusätzliche Eltern-Kind-Schritt ist eine weitere Stelle, an der eine Layoutänderung den Selektor brechen kann.
  • Vermeiden Sie Positionsindizes. li[4] geht davon aus, dass die Seite ihre Liste nie neu anordnet. Seiten werden neu angeordnet.
  • Verankern Sie sich am nächsten stabilen Orientierungspunkt. Wählen Sie relativ zum nächstgelegenen sinnvollen Element aus, nicht vom Dokumentenstamm.

Wenn Sie einen kaputten Scraper überprüfen, gleichen Sie die Selektoren zuerst mit dieser Liste ab. In den meisten Fällen besteht die Lösung darin, einen anfälligen Anker durch einen semantischen zu ersetzen.

XPath nutzen ohne Code zu schreiben: Wie Octoparse damit umgeht

Alles oben Genannte gilt, egal ob Sie Selektoren von Hand schreiben oder ein visuelles Tool verwenden. Octoparse ist ein No-Code-Scraper, der von über 3 Millionen Menschen genutzt wird, und XPath steht im Mittelpunkt seiner Funktionsweise. Die Grundlagen zu kennen, macht Sie schneller im Umgang damit, nicht überflüssig. Wenn es Ihnen schwerfällt, einen XPath in einer benutzerdefinierten Aufgabe zu schreiben, wählen Sie eine vorgefertigte Vorlage aus.

Octoparse Vorlagen für effektives XPath Web Scraping

Wenn Sie lieber auf ein Element klicken, als seinen Selektor zu schreiben

In Octoparse klicken Sie auf das gewünschte Element und das Tool generiert den XPath. Der Unterschied zum „XPath kopieren” im Browser liegt in dem, was dabei generiert wird. Wo der Browser Ihnen einen anfälligen absoluten Pfad liefert, wendet Octoparse einen Attribut-Priorisierungsalgorithmus an, der stabile Identifikatoren wie id, data-* und role gegenüber flüchtigen Klassennamen und Positionsindizes bevorzugt — genau die Langlebigkeitsregeln aus dem vorherigen Abschnitt, hier automatisch angewendet.

Der Generator wurde in Version 10.1.0 neu entwickelt und produziert nun für die große Mehrheit der Seiten beim ersten Klick einen korrekten, langlebigen XPath. Der integrierte XPath-Editor bleibt für die Fälle geöffnet, in denen Sie das Ergebnis überprüfen oder manuell anpassen möchten — genau hier zahlt sich dieses Tutorial aus.

Wenn sich die Seite über Nacht ändert und Ihre Aufgabe abbricht

Selektoren-Verfall ist die chronische Krankheit beim Scraping, besonders wenn Sie für Ihre Preisüberwachung Online-Shop-Daten extrahieren möchten.

Octoparse bietet eine KI-gestützte Selbstreparatur, die einen fehlerhaften Selektor erkennt und ihn aus der geänderten Seitenstruktur neu aufbaut. Sie deckt die beiden Fehlermodi ab, die die meisten Aufgaben blockieren: ein Paginierungselement, das verschoben oder umbenannt wurde, und ein Datenfeld, das sich innerhalb des Layouts verschoben hat. In Kombination mit einer KI-gestützten XPath-Generierung, die den breiteren Seitenkontext berücksichtigt, sollen Selektoren entstehen, die Sie selten statt wöchentlich reparieren müssen.

Wenn Sie das Schreiben von Selektoren lieber komplett überspringen möchten, bringen vorgefertigte Scraping-Vorlagen für große Websites bereits gepflegte Selektoren mit. Der kostenlose Plan umfasst 50.000 Zeilen pro Monat, genug, um all dies an Ihren eigenen Zielseiten zu testen. Melden Sie sich kostenlos an oder laden Sie die Desktop-App herunter und probieren Sie aus, auf ein Element zu klicken, um zu sehen, welcher XPath zurückkommt.

Häufig gestellte Fragen (FAQ)

Wofür wird XPath beim Web Scraping verwendet?

XPath teilt einem Scraper genau mit, welche Elemente er aus einer Seite extrahieren soll. Es definiert einen Pfad durch den HTML-Baum der Seite zu einem Ziel wie einem Preis, Titel oder Link. Die meisten Scraping-Tools, einschließlich Selenium-basierter Skripte und visueller Tools wie Octoparse, verwenden XPath als primäre Sprache für die Element-Auswahl.

Muss ich programmieren können, um XPath zu lernen?

Nein. XPath ist eine Art, Wegbeschreibungen zu schreiben, keine Programmiersprache. Es gibt keine Programme zu installieren oder Skripte auszuführen; ein Ausdruck wie //div[@class="price"] ist näher an einer Suchanfrage als an Code. Wenn Sie einen Dateipfad lesen können, können Sie auch XPath lernen.

Ist XPath besser als CSS-Selektoren?

Keines von beiden ist strikt besser. CSS-Selektoren sind kürzer und schneller für einfache, gut strukturierte Seiten. XPath kann Elemente anhand von sichtbarem Text abgleichen, nach oben zu Eltern navigieren und Funktionen wie not() und last() anwenden, was CSS nicht kann. Bei unregelmäßig strukturierten Seiten aus der realen Welt ist XPath meist die flexiblere Wahl.

Wie teste ich einen XPath-Ausdruck?

Öffnen Sie die Chrome DevTools (Rechtsklick auf die Seite, „Untersuchen” wählen), gehen Sie zum Tab „Console” und führen Sie $x('//ihr/xpath') aus. Es gibt eine Liste passender Elemente zurück, die Sie untersuchen können. Sie können auch Strg+F im Elements-Panel drücken und den XPath einfügen, um Treffer direkt im HTML-Baum hervorzuheben.

Was ist der Unterschied zwischen absolutem und relativem XPath?

Ein absoluter XPath beginnt bei der Dokumentenwurzel und listet jeden Schritt auf, wie /html/body/div[2]/p. Ein relativer XPath beginnt mit // und verankert sich an einem aussagekräftigen Attribut, wie //div[@id="content"]/p. Relativer XPath ist klar vorzuziehen, da absolute Pfade brechen, sobald sich das Seitenlayout verschiebt.

Wie funktioniert XPath contains()?

contains() gibt „wahr” zurück, wenn ein Attribut oder Text einen bestimmten Teilstring enthält. //a[contains(text(), "Weiter")] findet Links, deren sichtbarer Text „Weiter” enthält, und //div[contains(@class, "card")] findet Elemente, deren class-Attribut „card” enthält. Es ist das Standardwerkzeug zum Abgleichen unordentlicher oder teilweise dynamischer Werte.

Muss ich XPath lernen, um einen No-Code-Scraper zu nutzen?

Nein, aber es hilft. Tools wie Octoparse generieren XPath automatisch, wenn Sie auf ein Element klicken, sodass Sie Scraper erstellen können, ohne Selektoren zu schreiben. Die Grundlagen zu verstehen ermöglicht es Ihnen jedoch, den generierten Selektor zu bewerten, Randfälle im XPath-Editor zu beheben und zu diagnostizieren, warum eine Aufgabe nach einem Website-Update fehlgeschlagen ist.

Erhalte Webdaten in Klicks
Daten-Scraping von jeder Website ganz ohne Codierung.
Kostenloser Download

Beliebte Beiträge

Themen untersuchen

Starten mit Octoparse heute

Downloaden

Verwandte Artikel