XPath Spickzettel für Web Scraping

XML Path Language (XPath) ist eine Abfragesprache und ein Hauptelement des XSLT-Standards. Sie verwendet eine pfadähnliche Syntax (sogenannte Pfadausdrücke), um Knoten in einem XML- und XML-ähnlichen Dokument zu identifizieren und zu navigieren.

Beim Web Scraping können wir XPath nutzen, um Elemente aus dem DOM-Baum praktisch jedes HTML-Dokuments zu finden und auszuwählen, so dass wir leistungsfähigere Parser in unseren Skripten erstellen können.

Am Ende dieses Leitfadens werden Sie ein solides Verständnis von XPath-Ausdrücken haben und wissen, wie Sie diese in Ihren Skripten zum Scrapen komplexer Websites verwenden können.

Die XPath-Syntax verstehen

Das Schreiben von XPath-Ausdrücken ist recht einfach, da es eine Struktur verwendet, mit der wir alle gut vertraut sind. Sie können sich diese Pfadausdrücke so vorstellen wie die, die wir in Standard-Dateisystemen verwenden.

Es gibt einen Stammordner und innerhalb dieses Ordners gibt es mehrere Verzeichnisse, die auch weitere Ordner enthalten können. XPath verwendet die Beziehung zwischen diesen Elementen, um den Baum zu durchlaufen und die Elemente zu finden, die wir suchen.

Wir können zum Beispiel den Ausdruck //div um alle div-Elemente auszuwählen oder schreiben Sie //div/p um alle Absätze innerhalb der Divs zu markieren. Dies ist aufgrund der Verschachtelungsstruktur von HTML möglich.

XPath verwenden, um Elemente mit Chrome Dev Tools zu finden

Lassen Sie uns ein Beispiel verwenden, um ein klareres Bild zu zeichnen. Navigieren Sie zu https://quotes.toscrape.com/ und sehen Sie sich die Seite an.

Jetzt können wir den HTML-Code der Website sehen und mit Hilfe unserer XPath-Ausdrücke ein Element auswählen. Wenn wir alle auf der Seite angezeigten Anführungszeichen abrufen möchten, brauchen wir nur auf cmd + f um eine Suche zu starten und unseren Ausdruck zu schreiben.

Anmerkung: Dies ist eine gute Übung, um Ihre Ausdrücke zu testen, bevor Sie Zeit in Ihren Code-Editor investieren und ohne den Server der Website zu belasten.

Wenn wir genauer hinsehen, können wir erkennen, dass alle Anführungszeichen in ein div mit der Klasse quote, wobei der Text selbst innerhalb eines span-Elements mit der Klasse textlassen Sie uns also dieser Struktur folgen, um unseren Pfad zu schreiben:

XPath: //div[@class=’quote’]/span[@class=’text’]

Es hebt das erste Element hervor, das unserer Suche entspricht, und sagt uns auch, dass es das erste von 10 Elementen ist, was perfekt zur Anzahl der Anführungszeichen auf der Seite passt.

Anmerkung: Es würde auch gut funktionieren mit //span[@class="text"] weil es nur einen Span gibt, der diese Klasse verwendet. Wir möchten so beschreibend wie möglich sein, denn in den meisten Fällen werden wir XPath auf Websites mit einer unübersichtlicheren Struktur verwenden.

Haben Sie bemerkt, dass wir die Attribute der Elemente verwenden, um sie zu lokalisieren? Mit XPath können wir uns in jede Richtung und auf fast jede Weise durch den Knotenbaum bewegen. Wir können Klassen, IDs und die Beziehung zwischen Elementen anvisieren.

Für das vorherige Beispiel können wir unseren Pfad so schreiben: //div[@class="quote"]/span[1]; und finden Sie das Element trotzdem. Dieser letzte Ausdruck würde bedeuten, dass alle divs mit der Klasse quote gefunden werden und das erste span-Element ausgewählt wird.

Um nun alles zusammenzufassen, was wir bisher gelernt haben, hier die Struktur der XPath-Syntax:

• Tagname - was der Name des HTML-Elements selbst ist. Denken Sie an divs, H1s, etc.
• Attribut - die IDs, Klassen und jede andere Eigenschaft des HTML-Elements sein können, das wir zu finden versuchen.
• Wert - der der Wert ist, der im Attribut des HTML-Elements gespeichert ist.

Wenn Sie immer noch Schwierigkeiten mit dieser Syntax haben, ist ein guter Anfang, zu verstehen, was Data Parsing ist und wie es funktioniert. In diesem Artikel gehen wir näher auf das DOM und seine Struktur ein, was wiederum dazu führt, dass alles, was mit XPath zu tun hat, besser funktioniert.

Wann XPath vs. CSS für Web Scraping verwendet werden sollte

Wenn Sie eines unserer Beautiful Soup-Tutorials oder Cheerio-Anleitungen gelesen haben, ist Ihnen sicher schon aufgefallen, dass wir bei so gut wie jedem Projekt CSS verwenden. Das hat allerdings nur praktische Gründe.

In realen Projekten werden die Dinge ein wenig komplizierter sein, und wenn Sie beides verstehen, haben Sie mehr Werkzeuge, um jede Herausforderung zu meistern.

Lassen Sie uns also über die Unterschiede zwischen XPath- und CSS-Selektoren sprechen, um zu verstehen, wann Sie den einen und wann den anderen verwenden sollten.

Vorteile von CSS für Web Scraping

CSS-Selektoren sind in der Regel einfacher zu schreiben und zu lesen als XPath-Selektoren, so dass sie sowohl beim Erlernen als auch bei der Implementierung einsteigerfreundlicher sind.

Zum Vergleich sehen Sie hier, wie wir einen Absatz mit der Klasse easy auswählen würden:

• XPAth: //p[@class=”easy”]
• CSS: p.easy

Außerdem sollten Sie bedenken, dass bei der Arbeit mit einer Website, die mit eindeutigen IDs und sehr unterschiedlichen Klassen strukturiert ist, die Verwendung von CSS die beste Wahl ist, da die Auswahl von Elementen auf der Grundlage von CSS-Selektoren zuverlässiger ist.

Eine Änderung im DOM und unser XPath wird nicht mehr funktionieren, was unser Skript sehr anfällig macht. Aber Klassen und IDs ändern sich nur sehr selten, so dass Sie das Element immer finden können, auch wenn sich seine Position ändert.

Auch wenn es sehr eigenwillig sein mag, betrachten wir CSS als unsere erste Option für ein Projekt und gehen nur dann zu XPath über, wenn wir keinen effizienten Weg finden, CSS zu verwenden.

Empfohlen: Der ultimative CSS-Selektoren-Spickzettel für Web Scraping

Vorteile von XPath für Web Scraping

Im Gegensatz zu CSS kann XPath den DOM-Baum nach oben und unten durchlaufen, was Ihnen mehr Flexibilität bei der Arbeit mit weniger strukturierten Websites bietet. Dies eröffnet viele Möglichkeiten zur Interaktion mit dem DOM, die CSS nicht bietet.

Ein einfaches Beispiel ist die Vorstellung, dass Sie ein bestimmtes übergeordnetes Div aus einem Dokument mit 15 verschiedenen Divs ohne Klasse, ID oder Attribut auswählen müssen. Wir werden CSS nicht effektiv einsetzen können, weil es keine guten Ziele gibt, die wir behandeln können.

Mit XPath können wir jedoch ein untergeordnetes Element des auszuwählenden div anvisieren und von dort aus nach oben gehen.

Mit //span[@class=”text”]/.. erstellen wir einen Pfad, um das span-Element mit der Klasse text zu finden und dann zum übergeordneten Element dieses speziellen span-Elements zu wechseln, wodurch wir uns effektiv im DOM nach oben bewegen.

Eine weitere großartige Verwendung von XPath-Selektoren/Ausdrücken ist die Suche nach einem Text, der mit CSS nicht gefunden werden kann, und zwar mit der Funktion contains.

XPath: //*[contains(text(), ‘world’)]

Im obigen Beispiel stimmt unser XPath-Ausdruck mit zwei Elementen überein, da sowohl das Zitat als auch der Tag das Wort "Welt" enthalten. Obwohl wir diese Funktion beim Web Scraping wahrscheinlich nicht allzu oft verwenden werden, ist sie ein großartiges Werkzeug für Nischensituationen.

Wenn Sie mehr über die Unterschiede zwischen diesen beiden erfahren möchten, empfehlen wir Ihnen den Leitfaden von Exadel zur Auswahl von Selektoren für die Automatisierung.

Auch wenn es nicht direkt mit Web Scraping zu tun hat, ist es von großem Wert, etwas über Automatisierungskonzepte zu lernen.

XPath ist eine mächtige Sprache, die in vielen Fällen benötigt wird. Sehen wir uns also einige gängige Ausdrücke an, die Sie beim Web Scraping verwenden können.

XPath Spickzettel: Allgemeine Ausdrücke für Web Scraping

Wenn Sie sich also für Web Scraping interessieren, haben wir hier einen kurzen Spickzettel, den Sie bei Ihrer täglichen Arbeit verwenden können. Speichern Sie ihn unter Ihren Lesezeichen, und viel Spaß!

Anmerkung: Sie können jeden Ausdruck in der Spalte "Beispiel" auf Quotes to Scrape testen, um zu sehen, was Sie auswählen. Mit Ausnahme des ID-Beispiels, denn die Website verwendet keine IDs, lol.

Dies sind wahrscheinlich die gebräuchlichsten XPath-Ausdrücke, die Sie verwenden werden, um Elemente aus einem HTML-Dokument auszuwählen. Dies sind jedoch nicht die einzigen, und wir möchten Sie ermutigen, weiter zu lernen.

Sie können zum Beispiel auch Elemente auswählen, die keinen bestimmten Text enthalten, indem Sie den Ausdruck //tagName[not(contains(text(), "someText"))]. Dies könnte nützlich sein, wenn die Website den Elementen einen Text in Abhängigkeit von einer Variable hinzufügt, wie z.B. "nicht vorrätig" zu Produkttiteln innerhalb einer Kategorieseite.

Wir können die ODER-Logik auch verwenden, wenn wir mit einer Klasse arbeiten, die sich in Abhängigkeit von einer Variablen ändert, indem wir //tagName[@class="class1" or @class="class2"]. Wir sagen unserem Scraper, dass er ein Element auswählen soll, das die eine oder die andere Klasse hat.

In einem früheren Eintrag haben wir einige Aktiendaten ausgewertet, aber der Name der Klasse "Preisänderung in Prozent" änderte sich, je nachdem, ob der Preis stieg oder fiel. Da die Änderung konsistent war, konnten wir die ODER-Logik ganz einfach mit XPath implementieren und unseren Scraper den Wert extrahieren lassen, egal welcher class das Element verwendet hat.

XPath: //span[@class="instrument-price_change-percent__19cas ml-2.5 text-positive-main" or @class="instrument-price_change-percent__19cas ml-2.5 text-negative-main"]

XPath Web Scraper Beispiel

Bevor Sie loslegen, möchten wir Ihnen ein in Puppeteer geschriebenes Skript zeigen, damit Sie diese XPath-Selektoren in Aktion sehen können.

Anmerkung: Technologien wie Cheerio oder Beautiful Soup funktionieren nicht gut - und in einigen Fällen überhaupt nicht - mit XPath. Daher empfehlen wir Ihnen, Dinge wie Scrapy für Python und Puppeteer für JavaScript zu verwenden, wenn Sie XPath nutzen müssen. Diese Tools sind anfangs etwas komplizierter, aber Sie werden im Handumdrehen ein Experte sein.

Erstellen Sie einen neuen Ordner namens "xpathproject", öffnen Sie ihn in VScode (oder Ihrem bevorzugten Editor), starten Sie ein neues Node.js-Projekt mit npm init -y, und installieren Sie Puppeteer darin - npm install puppeteer.

Als nächstes erstellen Sie eine neue Datei mit einem beliebigen Namen (wir haben sie der Einfachheit halber index.js genannt) und fügen den folgenden Code ein:

</p>const puppeteer = require('puppeteer');

scrapedText = [];

(async () =&gt; {
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
await page.goto('https://quotes.toscrape.com/');

await page.waitForXPath('//div[@class="quote"]/span[1]');

let elements = await page.$x('//div[@class="quote"]/span[1]');
const elementText = await page.evaluate((...elements) =&gt; {
return elements.map(el =&gt; el.textInhalt);
}, ...elements)

scrapedText.push({
'Ergebnisse': elementText
})

console.log(scrapedText);

await browser.close();
})();
<p>

Wenn Sie keine Erfahrung mit Puppeteer haben, lesen Sie unseren Leitfaden zur Erstellung von Web Scrapers mit Cheerio und Puppeteer. Wenn Sie dieses Skript jedoch aufmerksam lesen, werden Sie sehen, wie anschaulich es ist.

Das Beste daran ist, dass Sie ein beliebiges XPath-Beispiel aus der XPath-Spickzettel-Tabelle verwenden und die Ausdrücke im Skript ersetzen können, so dass der Text der gefundenen Elemente übernommen wird.

Es ist wichtig zu wissen, dass dieser Web Scraper dafür ausgelegt ist, den Text innerhalb mehrerer Elemente auszulesen, so dass es zum Beispiel nicht möglich ist, nur den Titel der Seite auszulesen.

Probieren Sie verschiedene Kombinationen aus und spielen Sie ein wenig mit dem Skript. Sie werden bald den Dreh mit XPath raus haben. Bis zum nächsten Mal, viel Spaß beim Scrapen!