--- title: "Playwright-Leitfaden zu Web-Scraping" slug: playwright-web-scraping date: 2023-05-19T08:14:55+00:00 modified: 2025-09-16T16:43:01+00:00 permalink: https://brightdata.de/blog/wie/playwright-web-scraping type: blog --- [ Blog ](https://brightdata.de/blog "Blog") / [How Tos](https://brightdata.de/blog/wie) [How Tos](https://brightdata.de/blog/wie) # Playwright-Leitfaden zu Web-Scraping Playwright-Leitfaden zu Web-Scraping. In dieser Schritt-für-Schritt-Anleitung lernen Sie, wie Sie mit Playwright, einem leistungsstarken Scraping-Tool, Daten scrapen können. 14 min lesen [ ![Antonello Zanini](https://media.brightdata.de/2022/12/Antonello-Zanini-2-50x50.jpg) ](https://brightdata.com/blog/authors/antonello-zanini) [Antonello Zanini Technical Writer ](https://brightdata.com/blog/authors/antonello-zanini) ![Web Scraping with Playwright blog image](https://media.brightdata.de/2023/05/Web-Scraping-with-Playwright.svg) Das Internet birgt gewaltige Datenmengen, die für Forschungs- und Geschäftsentscheidungen von unschätzbarem Wert sein können. Daher ist ein fundiertes Verständnis für die Nutzung von Tools wie [Playwright](https://playwright.dev/) ausgesprochen wichtig. Playwright ist eine leistungsstarke [Node.js](https://nodejs.org/en/) -Bibliothek, die von Microsoft entwickelt wurde und mit der Daten von Websites ausgelesen werden können. In diesem Artikel lernen Sie anhand praktischer und ausführlicher Beispiele, wie Sie mit Playwright Daten von der Bright Data-Startseite scrapen können. Diese Beispiele können Sie anschließend auf eine beliebige andere Website anwenden, die Sie mit Playwright scrapen möchten. ## Warum Playwright verwenden? Web-Scraping ist kein neues Konzept. Im JavaScript-Ökosystem vereinfachen Tools wie [Ch](https://cheerio.js.org/)[e](https://cheerio.js.org/)[erio](https://cheerio.js.org/), [Selenium](https://www.selenium.dev/), [Puppeteer](https://pptr.dev/)und Playwright das Web-Scraping. Als neuere Web-Scraping-Bibliothek ist Playwright aufgrund der folgenden Funktionen besonders attraktiv: ### Leistungsstarke Locator Playwright verwendet [Locator](https://playwright.dev/docs/api/class-locator), die über eine eingebaute automatische Warte- und Wiederholungslogik zur Auswahl von Elementen auf einer Webseite verfügen. Die automatische Wartelogik vereinfacht die Erstellung Ihres Web-Scraping-Codes, da der manuelle Ladevorgang einer Webseite nicht länger abgewartet werden muss. Durch die Wiederholungslogik eignet sich Playwright auch für das Scraping moderner Single-Page-Webanwendung (SPA), welche nach dem anfänglichen Seitenaufruf Daten dynamisch laden. ### Verschiedene Locator-Methoden Beim Einsatz von Locator können Sie in Playwright festlegen, welche Elemente auf der Webseite anhand verschiedener Syntaxen lokalisiert werden sollen, darunter die [CSS-Selektor-Syntax](https://developer.mozilla.org/en-US/docs/web/css/css_selectors), die [XPath-Syntax](https://developer.mozilla.org/en-US/docs/Web/XPath) bzw. die Inhaltselemente. Zudem können Sie [Filter](https://playwright.dev/docs/locators#filtering-locators) auf Locator anwenden, um die Suche zusätzlich zu verfeinern. ## Web-Scraping mit Playwright In diesem Abschnitt erstellen Sie ein Node.js-Projekt, installieren Playwright und lernen, wie Sie mit Playwright eine Webseite finden, mit dieser interagieren und Daten aus ihr extrahieren können. ### Voraussetzungen Die Codeausschnitte in diesem Artikel werden mit der neuesten Long-Term-Support-Version (LTS) von Node.js ausgeführt, die zum Zeitpunkt der Erstellung dieses Artikels Version 18.15.0 ist. Vergewissern Sie sich, dass Sie [Node.js](https://nodejs.org/en/download) bereits installiert haben, bevor Sie beginnen. Ein Code-Editor zur Hervorhebung der JavaScript-Syntax und zur automatischen Vervollständigung, wie z. B. [Visual Studio Code](https://code.visualstudio.com/), ist ebenfalls äußerst empfehlenswert. ### Erstellung eines neuen Projekts Öffnen Sie ein neues Terminalfenster, legen Sie einen neuen Ordner für Ihr Node.js-Projekt an und rufen Sie diesen mit folgendem Befehl auf: ```none mkdir playwright-demo cd playwright-demo ``` Erstellen Sie nun mit folgendem npm-Befehl das gewünschte Node.js-Projekt: ```none npm init -y ``` ### Installation von Playwright Nach der Erstellung eines Node.js-Projekts installieren Sie die [Playwright-Bibliothek](https://playwright.dev/docs/library) , indem Sie folgenden Befehl in Ihrem Terminalfenster ausführen: ```none npm install playwright ``` Die Installation der Bibliothek kann einige Zeit in Anspruch nehmen, da Playwright die erforderlichen Browser als Teil der Installation herunterladen muss. ### Aufruf der Bright Data-Startseite Nachdem Sie die Playwright-Bibliothek installiert haben, legen Sie in Ihrem Projektordner eine neue Datei mit der Bezeichnung `index.js an`. Fügen Sie anschließend folgenden Code in diese Datei ein: ```none // Import the Playwright library to use it const playwright = require("playwright"); (async () => { // Launch a new instance of a Chromium browser const browser = await playwright.chromium.launch({ // Set headless to false so you can see how Playwright is // interacting with the browser headless: false, }); // Create a new Playwright context const context = await browser.newContext(); // Create a new page/tab in the context. const page = await context.newPage(); // Navigate to the Bright Data home page. await page.goto("https://brightdata.com/"); // Wait 10 seconds (or 10,000 milliseconds) await page.waitForTimeout(10000); // Close the browser await browser.close(); })(); ``` Führen Sie den Ausschnitt über folgenden Befehl in Ihrem Terminal aus: ```none node index.js ``` Daraufhin sollte sich ein [Chromium](https://www.chromium.org/) -Browser öffnen und die Bright Data- Startseite laden: ![](https://media.brightdata.com/2023/05/N8T6cqy-1024x640.png)### Lokalisierung von Elementen Sobald Sie über Playwright zur Startseite von Bright Data geleitet wurden, können Sie jetzt Locator zur Lokalisierung bestimmter Elemente auf der Webseite verwenden. Playwright verfügt über verschiedene Locator. In den folgenden Abschnitten erfahren Sie, wie jeder einzelne Locator funktioniert. #### Lokalisierung von Elementen mit CSS-Selektoren Mit Playwright können Sie anhand von [CSS-Selektoren](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors), einer prägnanten und zugleich leistungsstarken Syntax, die in CSS zur Anwendung von Stilen auf bestimmte HTML-Elemente der Webseite dient, Elemente auf einer Webseite lokalisieren. Das Bright Data-Logo ist beispielsweise ein `{` Element in der Seitenüberschrift, dem `page_header_logo_svg `class zugeordnet ist: ![](https://media.brightdata.com/2023/05/sz1No5E-1024x196.png)Mithilfe dieser Informationen können Sie das SVG-Element mit einem CSS-Selektor lokalisieren: ```none const logoSvg = page.locator(".page_header_logo_svg"); ``` Der Locator wird in der Variable `logoSvg` abgelegt und kann zu einem späteren Zeitpunkt verwendet werden, um mit dem Element zu interagieren oder Informationen aus diesem zu extrahieren. #### Lokalisierung von Elementen mit XPath-Abfragen Eine weitere Selector-Syntax, die zur Lokalisierung von Elementen in einem XML-Dokument verwendet werden kann, ist[XPath](https://developer.mozilla.org/en-US/docs/Web/XPath) . Da es sich bei HTML um XML handelt, kann diese Syntax zum Auffinden von HTML-Elementen auf einer Webseite verwendet werden. Beispielsweise können Sie mit der folgenden XPath-Abfrage dasselbe SVG-Logo auswählen, das Sie im vorherigen Abschnitt gesehen haben: ```none const logoSvg = page.locator("//*[@class='page_header_logo_svg']"); ``` Die Abfrage durchsucht die Seite nach sämtlichen mit `page_header_logo_svg` class verknüpften Elementen und speichert deren Position in der Variablen `logoSVG` . #### Lokalisierung von Elementen nach Rolle HTML-Elementen können verschiedene Rollen zugewiesen werden. Diese [Rollen geben einer Webseite einen semantischen Wert](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) , der es Screenreadern und anderen Tools erleichtert, die Seite zu unterstützen. Weitere Einzelheiten zu Rollen finden Sie [hier](https://www.w3.org/TR/wai-aria-1.2/#roles). Der folgende Codeausschnitt zeigt auf, wie die Schaltfläche **Anmelden** anhand der Rolle und des Namens gefunden werden kann: ```none const signupButton = page.getByRole("button", { name: "Start free trial", }); ``` Dieser Ausschnitt lokalisiert die Schaltfläche **Kostenlose Testversion starten** auf der Startseite: ```none const signupButton = page.getByRole("button", { name: "Start free trial", }); ``` Dieser Ausschnitt lokalisiert die Schaltfläche **Kostenlose Testversion starten** auf der Startseite: ![](https://media.brightdata.com/2023/05/start-free-trial-1024x318.png)#### Lokalisierung von Elementen anhand von Textinhalten Wenn ein HTML-Element kein aussagekräftiges Attribut zur Kennzeichnung besitzt, wie etwa ein `id-` oder `class` -Attribut, können Sie das Element mit der `getByText` -Methode über seinen Text auswählen. Die Bright Data-Startseite verfügt beispielsweise über einen Titel im Abschnitt „Hero“ mit den Worten „Strukturierte Daten“ in blauer Schrift: ![Screenshot der Bright Data-Startseite mit den Worten „Strukturierte Daten“ ](https://media.brightdata.com/2023/05/blue-1024x205.png)Sie können das `{4}` -Element, das diese Wörter enthält, mit folgendem Playwright-Ausschnitt auswählen: ```none const structuredData = page.getByText("structured data"); ``` #### Lokalisierung von Elementen nach Beschreibung In einem HTML-Formular haben die Eingabeelemente oft Beschreibungen. Playwright kann diese Beschreibungen verwenden, um das damit verbundene Eingabeelement mit der `getByLabel` -Methode zu identifizieren. Die Anmeldeseite **von** Bright Data hat beispielsweise ein Eingabeelement mit einer Beschreibung, welche die Worte „Arbeits-E-Mail“ enthält: ![](https://media.brightdata.com/2023/05/lgoin-email-1024x514.png)Mit dem folgenden Codeausschnitt können Sie das Eingabeelement auf der Seite lokalisieren und in einer Variablen speichern, um es später zu verwenden: ```none // Navigate to the Bright Data login page. await page.goto("https://brightdata.com/cp/start"); // Locate the using the label const emailInput = page.getByLabel("Work email"); ``` #### Lokalisierung von Elementen nach Platzhalter Sie können ein Eingabeelement auch anhand des angezeigten Platzhalterwerts finden, indem Sie die `getByPlaceholder` -Methode verwenden. Sie werden feststellen, dass das E-Mail-Feld auf der **Anmeldeseite** von Bright Data über einen Platzhaltertext verfügt, der dem Benutzer einen Hinweis bezüglich der einzugebenden Informationen gibt. ![](https://media.brightdata.com/2023/05/login-highlightes-1024x514.png)Der folgende Ausschnitt findet dieses Element über den von der Eingabe angezeigten Platzhalterwert: ```none // Navigate to the Bright Data login page. await page.goto("https://brightdata.com/cp/start"); // Locate the using the placeholder const emailInput = page.getByPlaceholder("[email protected]"); ``` #### Lokalisierung von Elementen anhand von alt-Text In HTML können Sie Bildern mithilfe des `alt` -Attributs eine Textbeschreibung zuweisen, die bei nicht geladenen Bildern angezeigt und von Screenreadern zur Beschreibung des Bildes vorgelesen wird. Mit der `getByAltText` -Methode von Playwright können Sie ein `img` -Element anhand seines `alt` -Attributs ausfindig machen. Bright Data listet bspw. Branchen auf, die ihre Daten verwenden. Mithilfe des alt-Attributs `„Anwendungsfall im Gesundheitswesen“` können Sie das für das Gesundheitswesen verwendete Bild abrufen: ![](https://media.brightdata.com/2023/05/healthcare-1024x370.png)Mit dem folgenden Codeausschnitt lässt sich das Bildelement lokalisieren: ```none const healthcareImage = page.getByAltText("healthcare use case"); ``` #### Lokalisierung von Elementen nach Titel Der letzte Playwright-Selektor, den Sie für das Scraping nutzen können, ist die `getByTitle` -Methode, mit der Sie ein HTML-Element anhand seines title-Attributs lokalisieren können. Der Titelwert wird angezeigt, wenn Sie mit dem Mauszeiger über die HTML-Komponente fahren. Die Helpdesk-Website von Bright Data enthält nämlich einen Anmeldelink mit einem title-Attribut: ![](https://media.brightdata.com/2023/05/how-can-we-hlep-1024x145.png)Mit dem folgenden Playwright-Ausschnitt können Sie den Link anhand seines title-Attributs lokalisieren: ```none // Navigate to the Bright Data helpdesk webpage. await page.goto("https://help.brightdata.com/hc/en-us"); // Locate the Sign in link using its title attribute const signInLink = page.getByTitle("Opens a dialog"); ``` Nachdem wir Ihnen nun einige Methoden zur Lokalisierung von Elementen auf einer Webseite mit Playwright vorgestellt haben, möchten wir Ihnen die Interaktion mit diesen Elementen und deren Extraktion von Daten näher bringen. ### Interaktion mit Elementen Sobald Sie ein Element auf einer Webseite lokalisiert haben, können Sie damit interagieren. Sie müssen sich eventuell bei einer Website anmelden, bevor Sie geschützte Seiten auslesen können. Dieser Codeausschnitt verdeutlicht die verschiedenen Playwright-Methoden zur Interaktion mit den Elementen auf einer Webseite. Im nachfolgenden Code finden Sie eine Erklärung der einzelnen Funktionen: ```none // Import the Playwright library to use it const playwright = require("playwright"); (async () => { // Launch a new instance of a Chromium browser const browser = await playwright.chromium.launch({ // Set headless to false so you can see how Playwright is // interacting with the browser headless: false, }); // Create a new Playwright context const context = await browser.newContext(); // Create a new page/tab in the context. const page = await context.newPage(); // Navigate to the Bright Data login page. await page.goto("https://brightdata.com/"); // Locate and click on the signup button await page .locator("#hero_new") .getByRole("button", { name: "Start free trial", }) .click(); // Locate the first name field and FILL in a first name await page.locator(".hs_firstname input").fill("John"); // Locate the last name field and FILL in a last name await page.locator(".hs_lastname input").fill("Smith"); // Locate the email field and TYPE in an email address await page.locator(".hs_email input").type("[email protected]"); // Locate the company size field and SELECT an option await page.locator(".hs_numemployees select").selectOption("1-9 employees"); // Locate the terms and conditions checkbox and CHECK it. await page.locator(".legal-consent-container input").check(); // Wait 10 seconds so you can see the result. await page.waitForTimeout(10000); // Close the browser await browser.close(); })(); ``` Fügen Sie diesen Ausschnitt in Ihre `index.js` -Datei ein und führen Sie ihn mit folgendem Befehl erneut aus: ```none node index.js ``` Die Startseite von Bright Data wird kurz eingeblendet, bevor ein Anmeldedialog erscheint. Als Nächstes sehen Sie, wie Playwright das **Anmeldeformular** mithilfe der verschiedenen Methoden in diesem Ausschnitt auffüllt: ![](https://media.brightdata.com/2023/05/form-1024x640.png)#### Anklicken von Elementen Im vorherigen Ausschnitt hat Playwright zunächst auf die Schaltfläche **Anmelden** geklickt, um das Dialogfeld zu öffnen: ```none // Locate and click on the signup button await page .getByRole("button", { name: "Start free trial", }) .click(); ``` Playwright stellt zwei Methoden zum [Anklicken](https://playwright.dev/docs/input#mouse-click) von Elementen zur Verfügung: 1. Die **`click` -Methode** simuliert das einmalige Anklicken eines Elements. 2. Die **`dblclick` Methode** simuliert einen Doppelklick auf ein Element. Im vorliegenden Beispiel musste nur einmal auf die Schaltfläche **Anmelden** geklickt werden. Aus diesem Grund verwendet der Ausschnitt die `click` -Methode. #### Ausfüllen von Textfeldern Für dieses Beispiel verwendet der Ausschnitt zwei Methoden für das Ausfüllen von Textfeldern im **Anmeldeformular** : ```none // Locate the first name field and FILL in a first name await page.locator(".hs_firstname input").fill("John"); // Locate the last name field and FILL in a last name await page.locator(".hs_lastname input").fill("Smith"); // Locate the email field and TYPE in an email address await page.locator(".hs_email input").type("[email protected]"); ``` Der Ausschnitt setzt die `fill-` und `type -Methoden für verschiedene Felder ein. Beide Funktionen füllen ein Textfeld, aber sie tun dies auf etwas unterschiedliche Weise:` - `fill` -Methode - `type` -Methode In den meisten Fällen werden Sie wahrscheinlich die `fill` -Methode verwenden, aber gegebenenfalls können Sie auch die `type` -Methode nutzen, um die manuelle Werteingabe zu simulieren. #### Auswahl einer Dropdown-Option Das **Anmeldeformular** verfügt über ein Dropdown-Feld zur Auswahl der Unternehmensgröße, das Playwright mit „1–9 Mitarbeiter“ vorbelegt hat: ```none // Locate the company size field and SELECT an option await page.locator(".hs_numemployees select").selectOption("1-9 employees"); ``` MitPlaywright können Sie die [`selectOption` -Methode](https://playwright.dev/docs/input#select-options) verwenden, um Dropdown-Felder in einem Formular auszufüllen. Diese Funktion gestattet die Auswahl eines Dropdown-Elements anhand eines Wertes oder einer Beschriftung sowie die Auswahl mehrerer Optionen in einer Mehrfachauswahl. #### Markieren von Optionsfeldern und Kontrollkästchen Vor dem Absenden des Formulars müssen Sie die Allgemeinen Geschäftsbedingungen akzeptieren. Der folgende Ausschnitt markiert das entsprechende Kontrollkästchen: ```none // Locate the terms and conditions checkbox and CHECK it. await page.locator(".legal-consent-container input").check(); ``` Um ein Kontrollkästchen zu ändern, können Sie die [`check-` und `uncheck` -Methode](https://playwright.dev/docs/input#checkboxes-and-radio-buttons)einsetzen: - Die **`check` -Methode** stellt sicher, dass das Kontrollkästchen markiert ist. - Die **`uncheck` -Methode** gewährleistet, dass die Markierung des Kontrollkästchens aufgehoben wird. Nachdem wir Ihnen erläutert haben, wie Sie in Playwright mit HTML-Elementen auf einer Seite interagieren können, lernen Sie im folgenden Abschnitt, wie man Daten aus einer Seite extrahiert. ### Extrahieren von Daten aus Elementen Das Extrahieren von Daten ist für Web-Scraping unerlässlich. In Playwright stehen Ihnen diverse Methoden zum Abrufen verschiedener Datentypen aus den von Ihnen gefundenen Elementen offen. In den folgenden Abschnitten werden einige dieser Methoden erläutert. #### Extrahieren des inneren Textes Mit der `innerText` -Methode lässt sich der Textinhalt eines Elements extrahieren. Die Bright Data-Startseite verfügt beispielsweise über ein Hero-Element am oberen Rand: ![](https://media.brightdata.com/2023/05/extracting-inner-text-1024x448.png)Mit dem folgenden Ausschnitt können Sie den Titel des Hero-Elements auf der Bright Data-Startseite extrahieren: ```none const headerText = await page.locator(".brd_hero__title.h1").innerText(); // headerText = "Turn websitesninto structured data" ``` Wenn Ihr Locator auf mehr als ein Element verweist, können Sie anhand der `allInnerTexts` -Methode den Text als String von Arrayelementen abrufen. Auf der Startseite von Bright Data finden Sie eine Auflistung der Anwendungsfälle ihrer Daten: ![](https://media.brightdata.com/2023/05/use-case-selector-1024x485.png)Anhand des nachfolgenden Ausschnitts können Sie eine Auflistung aller Anwendungsfälle von Bright Data extrahieren: ```none const useCases = await page .locator(".section_cases_row_col .elementor-image-box-title") .allInnerTexts(); // useCases = [ // 'E-commerce', // 'Social Media for Marketing', // 'SERP & SEO', // 'Ad Tech', // 'Market Research', // 'Travel', // 'Financial Services', // 'Healthcare', // 'Real Estate', // 'Data for Good' // ] ``` #### Extrahieren von innerem HTML Playwright bietet außerdem die Möglichkeit, den inneren HTML-Code eines Elements mit der `innerHTML` -Methode zu extrahieren. So erhalten Sie z. B. den HTML-Code für die Fußzeile der Bright Data-Startseite mit folgendem Ausschnitt: ```none const footerHtml = await page.locator("#footer").innerHTML(); // footerHtml = '