--- title: "Browser-Automation und Scraping: Playwright, Browser Use und der .har-Trick" description: "Das Web zuverlässig mit Playwright automatisieren und scrapen, inklusive Non-Headless-Trick mit manuellem Login und dem .har-Trick" type: "lesson" locale: "de-CH" course: "Automation und agentische Systeme" number: "4.2" canonical: "https://agenticschool.dev/de/kurse/automation-agentic-systems/browser-automation-and-scraping-playwright-browser-use-and-the-har-trick" datePublished: "2026-06-12" dateModified: "2026-06-12" --- # Browser-Automation und Scraping: Playwright, Browser Use und der .har-Trick - Kurs: Automation und agentische Systeme - Lektion: 4.2 - Dauer: 28 min - Level: fortgeschritten - Status: published - Kanonische URL: https://agenticschool.dev/de/kurse/automation-agentic-systems/browser-automation-and-scraping-playwright-browser-use-and-the-har-trick - Sprache: de-CH > Das Web zuverlässig mit Playwright automatisieren und scrapen, inklusive Non-Headless-Trick mit manuellem Login und dem .har-Trick ## Zusammenfassung Wenn es keine API gibt, ist der Browser deine API. Diese Lektion behandelt das Automatisieren des Webs mit Playwright und agent-getriebenem Browsing, verantwortungsvolles Scraping, den Non-Headless-Trick, einen sichtbaren Browser zu starten und sich von Hand einzuloggen, bevor du automatisierst, und den .har-Trick: Netzwerkverkehr in den DevTools aufzeichnen und einen Agent die echten API-Endpunkte daraus extrahieren lassen. ## Was du lernst - Den Browser mit Playwright und agent-getriebenen Browser-Tools automatisieren - Der Non-Headless-Trick mit manuellem Login für Sites hinter Authentifizierung - Der .har-Trick: die echten API-Endpunkte hinter einer Seite extrahieren ## Überblick Der grösste Teil des Webs hat keine öffentliche API, aber jede Site ist bereits eine Oberfläche, die ein Mensch bedienen kann, was heisst, dass auch ein Programm sie bedienen kann. Playwright ist das Tool, das das tut: Es steuert einen echten Browser so, wie es eine Nutzerin täte, klickt, tippt und liest die Seite. Darauf sitzen zwei Tricks, die fragiles Scraping in zuverlässige Automation verwandeln. Der Non-Headless-Trick lässt dich dich einmal von Hand einloggen und die Session wiederverwenden. Der .har-Trick lässt dich die gerenderte Seite ganz überspringen und die API aufrufen, die die Site selbst aufruft. Diese Lektion lehrt alle drei, plus wann du zu einem agent-getriebenen Browser greifst und wie du auf der richtigen Seite von Ethik und Gesetz bleibst. ## Was du lernst Du lernst die Playwright-Grundlagen, wie sich agent-getriebenes Browsing (Browser Use und Ähnliches) von skripteter Automation unterscheidet, das Muster mit sichtbarem Browser und manuellem Login, das den härtesten Teil authentifizierter Sites umgeht, und wie du eine .har-Datei aufzeichnest und einen Agent die zugrunde liegenden API-Calls extrahieren lässt. Du lernst auch, wo die rechtlichen und ethischen Grenzen liegen und wann du Skalierung an einen Anbieter wie Brightdata abgibst. ## Voraussetzungen Kurse 1 bis 3 und ein funktionierendes Node-Projekt. Du solltest mit asynchronem Code vertraut sein, damit, wie HTTP-Requests und Header funktionieren, und damit, deine Browser-DevTools zu lesen. Die Fundamentals-Seite dazu, was eine API ist, hilft, wenn Request und Response noch unscharf sind, denn der ganze .har-Trick dreht sich darum, die API zu finden, die eine Seite versteckt. ## Das Problem Du brauchst Daten oder eine Aktion von einer Site, die dir keine API gibt. Der naive Ansatz ist, das gerenderte HTML mit brüchigen Selektoren zu scrapen, die in dem Moment kaputtgehen, in dem die Site einen Klassennamen ändert. Die härteren Fälle sind Sites hinter einem Login, mit Bot-Erkennung, oder die alles über JavaScript laden, sodass das HTML leer ist, bis Scripts laufen. Leute verbrennen Tage damit, gegen Selektoren und Login-Flows zu kämpfen, während die Site die ganze Zeit leise saubere JSON-API-Calls macht, sichtbar in den DevTools, die sie direkt aufrufen könnten. ## Playwright-Grundlagen Playwright startet und steuert Chromium, Firefox oder WebKit. Du sagst ihm, eine URL aufzurufen, auf Elemente zu warten, zu klicken, zu tippen und Text oder Attribute zu lesen. Es wartet automatisch, bis Elemente bereit sind, was den grössten Teil der Flakiness entfernt, die ältere Tools plagte. Dieselbe Library treibt die End-to-End-Tests aus deinen Quality Gates an, also ist der Muskel wiederverwendbar. Hier ist die Form eines Basis-Skripts, das eine Seite lädt und ein paar Daten herauszieht. ```typescript import { chromium } from 'playwright' const browser = await chromium.launch() const page = await browser.newPage() await page.goto('https://example.com/products') // Wartet automatisch auf den Selektor vor dem Lesen await page.waitForSelector('.product-card') const titles = await page.$$eval('.product-card h2', (nodes) => nodes.map((n) => n.textContent?.trim()), ) console.log(titles) await browser.close() ``` Ein minimales Playwright-Scrape: Seite laden, auf Elemente warten, Text lesen. Das Auto-Warten handhabt die meiste Timing-Flakiness. ## Der Non-Headless-Trick mit manuellem Login Der härteste Teil beim Automatisieren einer authentifizierten Site ist der Login: Passwörter, Zwei-Faktor-Codes, Captchas und Bot-Erkennung kämpfen alle gegen dich, und Credentials in ein Skript zu hardcoden ist sowohl fragil als auch ein Security-Risiko. Der Trick ist, das Automatisieren des Logins ganz zu überspringen. Starte den Browser non-headless (sichtbar), navigiere zur Login-Seite und pausiere das Skript, während du dich von Hand einloggst. Sobald du drin bist, speichert Playwright die authentifizierte Session (Cookies und Storage) in eine Datei, und jeder künftige Lauf lädt diese Datei und ist schon eingeloggt. Keine gespeicherten Passwörter, kein Captcha-Lösen, kein brüchiger Login-Flow. ```typescript import { chromium } from 'playwright' // Einmalig: von Hand einloggen, dann die Session speichern. const browser = await chromium.launch({ headless: false }) // sichtbar const context = await browser.newContext() const page = await context.newPage() await page.goto('https://app.example.com/login') console.log('Log in manually in the window, then press Enter here...') // Warte, bis DU den Login beendet hast, bevor es weitergeht await page.waitForURL('**/dashboard', { timeout: 0 }) // Die authentifizierte Session für alle künftigen Läufe speichern await context.storageState({ path: 'auth.json' }) await browser.close() // Jeder spaetere Lauf startet schon eingeloggt: // const context = await browser.newContext({ storageState: 'auth.json' }) ``` Der Non-Headless-Login-Trick: sichtbar starten, einmal von Hand einloggen, die Session speichern, dann für immer headless wiederverwenden. Halt auth.json aus Git heraus (es ist ein lebendiger Session-Token) und behandle es wie ein Secret. Sessions laufen ab, also ist es normal, den einmaligen Login-Schritt gelegentlich neu auszuführen. Dieses Muster ist das mit Abstand grösste Zuverlässigkeits-Upgrade für authentifizierte Automation. ## Agent-getriebenes Browsing Skriptetes Playwright ist präzise, aber brüchig: Ändere die Seite und deine Selektoren brechen. Agent-getriebene Browser-Tools wie Browser Use nehmen den entgegengesetzten Ansatz. Du gibst einem Agent ein Ziel in normaler Sprache ("finde den günstigsten Flug von Zürich nach London nächsten Freitag und leg ihn in den Warenkorb") und es liest die Seite, entscheidet, was zu klicken ist, und passt sich an, wenn das Layout anders ist als erwartet. Es ist langsamer und weniger deterministisch, aber es überlebt Site-Änderungen und handhabt Aufgaben, die du nicht vollständig vorab spezifizieren kannst. Der ehrliche Trade-off: nimm skriptetes Playwright für stabile, hochvolumige, wiederholbare Jobs, bei denen du das Ziel kontrollierst, und einen agent-getriebenen Browser für einmalige oder unscharfe Aufgaben, bei denen Anpassungsfähigkeit Tempo schlägt. Viele echte Systeme kombinieren beide - ein Agent, um den Flow einmal zu entdecken, dann ein generiertes Skript, um ihn günstig in grossem Massstab zu fahren. ## Der .har-Trick Das ist der hebelstärkste Zug der ganzen Lektion. Bevor du irgendein gerendertes HTML scrapst, öffne die DevTools, geh zum Network-Tab, führe die Aktion aus, die du automatisieren willst, dann rechtsklick und "Save all as HAR". Eine .har-Datei ist eine vollständige Aufzeichnung jedes Netzwerk-Requests, den die Seite gemacht hat, inklusive der JSON-API-Calls hinter den Kulissen. Die meisten modernen Sites rendern aus sauberen internen APIs, was heisst, dass die Daten, die du willst, oft in einer aufgeräumten JSON-Response sitzen, die du direkt aufrufen kannst - keine Selektoren, kein Headless-Browser, weit schneller und weit robuster. Die Datei ist gross und verrauscht, was genau die Stelle ist, an der ein Agent glänzt: gib ihm die .har und bitte ihn, die relevanten Endpunkte zu extrahieren. ```markdown ## Task Here is a .har file I recorded while loading the product list page. Extract the underlying API the page uses to fetch products. I want: 1. The exact request URL and method. 2. Which headers actually matter (auth token, content-type) vs noise. 3. Query params or request body, with what each field appears to mean. 4. The shape of the JSON response (the fields I care about: name, price, id). 5. A minimal fetch() call in TypeScript that reproduces just that request. Ignore analytics, fonts, images and tracking pixels. Focus only on the call that returns the product data. ``` Ein Prompt, der einen verrauschten .har-Export in einen sauberen, wiederholbaren API-Call verwandelt. Der Agent erledigt das mühsame Filtern für dich. Sobald der Agent dir den fetch-Call gibt, hast du ein brüchiges Browser-Scrape durch einen direkten API-Call ersetzt, der schneller, günstiger und weit stabiler ist. Wenn die API einen Auth-Token braucht, holst du ihn aus der Non-Headless-Session oben. Diese Kombination - manueller Login für den Token, .har-Trick für den Endpunkt - handhabt einen riesigen Anteil echter "diese Site hat keine API"-Probleme. ## Ethik, Legalität und Skalierung Das Web zu automatisieren ist mächtig und nicht folgenlos, also sei bewusst. Dieser Abschnitt ist Orientierung, keine Rechtsberatung - wenn Geld oder personenbezogene Daten im Spiel sind, sprich mit einer Anwältin. - Lies die Nutzungsbedingungen und robots.txt. Manche Sites verbieten automatisierten Zugriff, und das zu ignorieren kann einen Vertrag brechen oder, in manchen Rechtsräumen, gegen Computer-Missbrauchsrecht verstossen. - Scrape nie personenbezogene Daten ohne Rechtsgrundlage. Die Datenschutzgesetze aus CLAUDE.md (DSGVO, FADP, US-Bundesstaatengesetze) gelten für gescrapte Daten genauso wie für alle anderen. - Rate-limite dich selbst und identifiziere dich ehrlich. Eine Site zu hämmern ist missbräuchlich und bringt dich auf die Blockliste; ein höflicher, langsamer Scraper ist ein besserer Bürger und zuverlässiger. - Für legitime Skalierung nimm einen Anbieter wie Brightdata. Sie handhaben Proxy-Rotation, Geo-Verteilung und Compliance-Tooling, was der verantwortungsvolle Weg ist, grosse Jobs zu fahren, statt eine verdeckte Bot-Armee zu bauen. ## Typische Fehler Die Klassiker: brüchiges HTML scrapen, wenn eine saubere JSON-API die ganze Zeit in der .har sass; Credentials hardcoden statt den Non-Headless-Session-Trick zu nutzen; auth.json oder einen Token nach Git committen; einen agent-getriebenen Browser für einen stabilen, hochvolumigen Job fahren, wo ein günstiges Skript reichen würde; und Nutzungsbedingungen und Rate Limits ignorieren, bis du blockiert wirst oder Schlimmeres. Prüfe den Network-Tab, bevor du einen einzigen Selektor schreibst. ## Business-ROI Browser-Automation schaltet Daten und Aktionen frei, die sonst eine Integration bräuchten, die der Anbieter nie gebaut hat. Der .har-Trick allein kann ein mehrtägiges Scraping-Projekt in einen Nachmittag verwandeln, weil du die gerenderte Seite überspringst und die echte API aufrufst. Der Non-Headless-Trick entfernt den fragilsten Teil jeder authentifizierten Automation. Zusammen lassen sie ein kleines Team Wettbewerbsrecherche automatisieren, interne Dateneingabe quer durch Altsysteme und sich wiederholende Anbieter-Portal-Aufgaben, die keine API haben - Arbeit, die sonst für immer manuell bleibt. ## Checkliste Bestätige, dass du jedes davon kannst, bevor du weitergehst, denn die nächste Lektion setzt voraus, dass du nicht vertrauenswürdigen Code sicher ausführen kannst. - Ein Basis-Playwright-Skript schreiben, das eine Seite lädt und Daten liest. - Den Non-Headless-Trick nutzen, um dich einmal einzuloggen und die Session headless wiederzuverwenden. - Erklären, wann du agent-getriebenes Browsing statt eines festen Skripts nimmst. - Eine .har-Datei aufzeichnen und einen wiederholbaren API-Call mit deinem Agent daraus extrahieren. - Zwei rechtliche oder ethische Grenzen nennen, die du beim Scraping immer respektierst. ## Ressourcen Halt die Playwright-Docs als Lesezeichen für Selektor- und Auto-Wait-Referenz und die Browser-Use-Docs für agent-getriebenes Browsing. Der Network-Tab deiner Browser-DevTools ist das mit Abstand nützlichste Tool dieser Lektion - lern fliessend, ein HAR daraus aufzuzeichnen und zu speichern. Für grosse oder compliance-sensible Jobs sind Brightdata und ähnliche Anbieter der dokumentierte, unterstützte Weg. ## Deine Aufgabe Wähle eine Site, die du nutzt und die keine API hat. Zeichne eine .har der Aktion auf, die dich interessiert, gib sie deinem Agent mit dem Prompt oben und sieh, ob du die Aktion mit einem direkten fetch-Call reproduzieren kannst. Wenn die Site einen Login braucht, speichere zuerst eine Session mit dem Non-Headless-Trick. Schreib auf, welchen Ansatz (Skript, agent-getrieben oder direkte API aus der .har) du ausliefern würdest. ## Nächste Lektion Code, den ein Agent generiert hat - oder den ein Scrape hereingezogen hat - auf deiner eigenen Maschine auszuführen ist riskant. Die nächste Lektion behandelt Sandboxes: isolierte, wegwerfbare Umgebungen von E2B, Daytona und ähnlichen Tools, die einen schlechten Lauf so einsperren, dass er dein System nicht anfassen kann. ## Transkript Wenn es keine API gibt, ist der Browser deine API. Diese Lektion behandelt das Automatisieren des Webs mit Playwright und agent-getriebenem Browsing, verantwortungsvolles Scraping, den Non-Headless-Trick, einen sichtbaren Browser zu starten und sich von Hand einzuloggen, bevor du automatisierst, und den .har-Trick: Netzwerkverkehr in den DevTools aufzeichnen und einen Agent die echten API-Endpunkte daraus extrahieren lassen.