Stagehand Test: Das beste KI-Browserautomatisierungs-Framework?

Browser-Automatisierung ist seit langem ein Eckpfeiler der modernen Softwareentwicklung, des Testens und der Datenextraktion. Seit Jahren dominieren Frameworks wie Selenium, Puppeteer und neuerdings auch Playwright das Feld. Diese Tools bieten eine granulare Kontrolle über Browseraktionen, gehen aber mit einer steilen Lernkurve und einem erheblichen Wartungsaufwand einher. Skripte sind oft brüchig und brechen bei der geringsten Änderung an der Benutzeroberfläche einer Website. Am anderen Ende des Spektrums verspricht eine neue Welle von KI-nativen Agenten, komplexe Aufgaben mithilfe natürlicher Sprache zu automatisieren, oft jedoch auf Kosten von Zuverlässigkeit, Vorhersehbarkeit und Kontrolle.

Hier kommt Stagehand ins Spiel, ein Framework, das sich selbst als "The AI Browser Automation Framework" bezeichnet. Es zielt nicht darauf ab, bewährte Tools wie Playwright zu ersetzen, sondern sie zu erweitern. Stagehand baut auf Playwright auf und injiziert eine leistungsstarke KI-Schicht, die es Entwicklern ermöglicht, traditionelle, codebasierte Automatisierung mit hochstufigen Anweisungen in natürlicher Sprache zu verbinden.

Aber wie gut ist es wirklich? Findet es die richtige Balance zwischen der Präzision von Code und der Flexibilität von KI? Dieser ausführliche Test und dieses Tutorial werden die Kernkonzepte von Stagehand untersuchen, praktische Beispiele durchgehen und seine Position in der sich schnell entwickelnden Welt der Browser-Automatisierung bewerten.

Warum Stagehand? Das Problem mit den alten Methoden

Bevor wir uns mit dem "Wie" befassen, ist es entscheidend, das "Warum" zu verstehen. Bei der traditionellen Browser-Automatisierung geht es im Grunde darum, dem Browser genau zu sagen, was er tun soll. Ein typisches Skript in Playwright könnte so aussehen:

// Find an element by its CSS selector and click it
await page.locator('button[data-testid="login-button"]').click();

// Find an input field and type into it
await page.locator('input[name="username"]').fill('my-user');

Dieser Ansatz ist präzise und zuverlässig... bis er es nicht mehr ist. In dem Moment, in dem ein Entwickler data-testid ändert oder die HTML-Struktur des Formulars umgestaltet, bricht das Skript. Die Pflege dieser Selektoren über eine große Testsuite oder ein komplexes Web-Scraping-Projekt wird zu einer mühsamen und undankbaren Aufgabe.

Sehen Sie sich die vom Stagehand-Team bereitgestellte Demo an:

Hochstufige KI-Agenten versuchen, dies zu lösen, indem sie die Implementierungsdetails abstrahieren. Sie sagen dem Agenten einfach: "Melden Sie sich mit meinen Anmeldedaten an", und er findet die notwendigen Schritte heraus. Obwohl dies magisch klingt, kann es in Produktionsumgebungen unvorhersehbar sein. Der Agent könnte bei einer unbekannten Benutzeroberfläche fehlschlagen, einen ineffizienten Pfad einschlagen oder die Anweisung missverstehen, was zu inkonsistenten Ergebnissen führt.

Stagehand zielt darauf ab, einen Mittelweg zu bieten. Es erkennt an, dass man manchmal genau weiß, was man tun möchte (z. B. await page.goto('https://github.com')), und andere Male möchte man das "Wie" an eine KI auslagern (z. B. await page.act('click on the stagehand repo')). Dieser hybride Ansatz ist das Kernnutzenversprechen von Stagehand.

Die Kernpfeiler von Stagehand

Stagehand erweitert das Page-Objekt von Playwright um drei primäre Methoden: act, extract und observe. Es führt auch einen leistungsstarken agent für die Handhabung komplexerer, mehrstufiger Aufgaben ein.

act: Ausführen von Aktionen mit natürlicher Sprache

Die act-Methode ist das Herzstück der interaktiven Fähigkeiten von Stagehand. Sie nimmt eine einfache englische Anweisung entgegen und führt die entsprechende Aktion auf der Seite aus.

// Instead of brittle selectors...
await page.act("Click the sign in button");
await page.act("Type 'hello world' into the search input");

Hinter den Kulissen analysiert ein KI-Modell den aktuellen Zustand der Webseite (das DOM), identifiziert die relevantesten interaktiven Elemente (Schaltflächen, Links, Eingabefelder) und ordnet die Anweisung einer bestimmten Aktion zu, wie einem Klick oder einem Tastendruck. Dies macht Skripte widerstandsfähiger gegen kleinere UI-Änderungen. Solange ein Mensch die "Anmelde-Schaltfläche" identifizieren kann, kann Stagehand dies wahrscheinlich auch, selbst wenn sich der zugrunde liegende Code geändert hat.

Der Schlüssel zur effektiven Nutzung von act liegt darin, Anweisungen atomar und spezifisch zu halten. Eine Anweisung wie "Bestellen Sie mir eine Pizza" ist für act zu hochstufig. Stattdessen würden Sie sie in eine Reihe atomarer Schritte zerlegen: "Klicken Sie auf die Peperoni-Pizza", "Wählen Sie die Größe 'groß'", "In den Warenkorb legen" und "Zur Kasse gehen".

observe und Caching: Hinzufügen von Vorhersehbarkeit zur KI

Eine häufige Sorge bei der Verwendung von KI ist die Unvorhersehbarkeit. Wird das Modell jedes Mal das richtige Element auswählen? Stagehand adressiert dies mit der observe-Methode. observe führt keine Aktion aus; es gibt eine Liste potenzieller Aktionen zurück, die der Anweisung entsprechen.

const [action] = await page.observe("Click the sign in button");

Das zurückgegebene action-Objekt ist ein serialisierbarer Deskriptor der Operation, die Stagehand ausführen möchte. Sie können es untersuchen, protokollieren und, was am wichtigsten ist, es direkt an act zurückgeben:

const [action] = await page.observe("Click the sign in button");
await page.act(action);

Dieser zweistufige Prozess bietet eine leistungsstarke "Vorschau"-Funktion. Aber seine wahre Stärke liegt im Caching. Für sich wiederholende Aufgaben können Sie eine Aktion einmal observen, das Ergebnis speichern und es bei nachfolgenden Ausführungen wiederverwenden.

const instruction = "Click the sign in button";
let cachedAction = await getFromCache(instruction);

if (cachedAction) {
  await page.act(cachedAction);
} else {
  const [observedAction] = await page.observe(instruction);
  await saveToCache(instruction, observedAction);
  await page.act(observedAction);
}

Diese Caching-Strategie bietet mehrere Vorteile:

1. Zuverlässigkeit: Sie stellt sicher, dass jedes Mal genau dieselbe Aktion ausgeführt wird, wodurch die Variabilität des KI-Modells beseitigt wird.
2. Geschwindigkeit: Sie umgeht die Notwendigkeit eines KI-Aufrufs und macht die Automatisierung deutlich schneller.
3. Kosten: Sie spart API-Aufrufe an das zugrunde liegende Sprachmodell und reduziert so die Betriebskosten.

extract: Intelligente Datenextraktion

Das Scrapen von Daten von einer Webseite mit traditionellen Tools beinhaltet das Schreiben von CSS- oder XPath-Selektoren, um die Daten genau zu bestimmen. Dies ist eine weitere Form der anfälligen Kopplung an die Benutzeroberfläche. Die extract-Methode von Stagehand revolutioniert diesen Prozess, indem sie Ihnen ermöglicht, in natürlicher Sprache anzugeben, was Sie extrahieren möchten.

Optional können Sie ein Zod-Schema bereitstellen, um sicherzustellen, dass die Ausgabe korrekt strukturiert ist. Zod ist eine beliebte TypeScript-first Schema-Deklarations- und Validierungsbibliothek, und ihre Integration hier ist ein Game-Changer.

Stellen Sie sich vor, Sie sind auf einer GitHub Pull-Request-Seite und möchten den Benutzernamen des Autors und den PR-Titel abrufen. Mit extract ist es so einfach wie das:

import { z } from "zod";

// ... inside an async function
const { author, title } = await page.extract({
  instruction: "extract the author and title of the PR",
  schema: z.object({
    author: z.string().describe("The username of the PR author"),
    title: z.string().describe("The title of the PR"),
  }),
});

console.log(`PR: "${title}" by ${author}`);

Die KI von Stagehand liest die Seite, versteht den Kontext und füllt das Zod-Schema mit den angeforderten Daten. Dies ist weitaus robuster als das Verlassen auf Selektoren wie #pull_request_header .author, die sich jederzeit ändern könnten. Sie können sogar komplexe verschachtelte Daten extrahieren, einschließlich Arrays von Objekten, indem Sie das entsprechende Zod-Schema definieren.

agent: Für autonome, mehrstufige Aufgaben

Während act für einzelne, atomare Aktionen ist, ist agent für die Orchestrierung größerer, komplexerer Ziele. Der Agent kann ein hochstufiges Ziel übernehmen und es selbstständig in eine Abfolge von act- und extract-Aufrufen zerlegen.

// Navigate to a website
await stagehand.page.goto("https://www.google.com");

const agent = stagehand.agent({
  provider: "openai",
  model: "gpt-4o", // Or an Anthropic model
});

// Execute the agent
await agent.execute(
  "Find the official website for the Stagehand framework and tell me who developed it."
);

Der Agent bietet eine "Human-in-the-Loop"-Erfahrung für Ihre Automatisierungsskripte. Er ist ideal für explorative Aufgaben oder das Navigieren auf komplexen, unbekannten Webseiten, bei denen das Vordefinieren jedes einzelnen Schritts unpraktisch wäre. Er unterstützt Top-Tier-Modelle von OpenAI und Anthropic und gibt Entwicklern Zugang zu modernsten KI-Funktionen mit minimalem Setup-Aufwand.

Erste Schritte: Ein Mini-Tutorial zur Verwendung von Stagehand Team

Sehen Sie sich hier Anirudhs Demo zur Erstellung eines Stagehand-Projekts mit create-browser-app an:

Der schnellste Weg, ein Stagehand-Projekt zu starten, ist die Verwendung ihres Befehlszeilen-Tools.

npx create-browser-app my-stagehand-project
cd my-stagehand-project

Dies erstellt ein neues Projektgerüst mit allen notwendigen Abhängigkeiten, Konfigurationsdateien und einem Beispielskript. Sie müssen Ihre API-Schlüssel für einen LLM-Anbieter (wie OpenAI oder Anthropic) und optional einen Browserbase-Schlüssel (für cloud-basierte Browserausführung) zur Datei .env hinzufügen.

Ein einfaches Skript sieht so aus:

import { Stagehand } from "@browserbasehq/stagehand";
import StagehandConfig from "./stagehand.config"; // Your project's config
import { z } from "zod";

async function main() {
  // 1. Initialize Stagehand
  const stagehand = new Stagehand(StagehandConfig);
  await stagehand.init();

  const page = stagehand.page;

  try {
    // 2. Navigate to a page
    await page.goto("https://github.com/trending");

    // 3. Perform actions
    await page.act("Click on the first repository in the list");

    // 4. Extract data
    const { description } = await page.extract({
      instruction: "Extract the repository description",
      schema: z.object({
        description: z.string(),
      }),
    });

    console.log("Repository description:", description);

  } finally {
    // 5. Clean up
    await stagehand.close();
  }
}

main();

Dieses einfache Beispiel demonstriert den gesamten Lebenszyklus: Initialisierung, Navigation, Aktion, Extraktion und Aufräumen. Es ist sauber, lesbar und bemerkenswert widerstandsfähig gegen UI-Änderungen auf der GitHub-Trending-Seite.

Das Urteil: Wie gut ist es?

Nach einem tiefen Einblick in seine Funktionen und Philosophie ist klar, dass Stagehand mehr ist als nur ein weiteres Automatisierungstool. Es ist ein durchdachtes und leistungsstarkes Framework, das die Lücke zwischen traditioneller, codeintensiver Automatisierung und der neuen Welt der KI-Agenten erfolgreich überbrückt.

Das Gute:

• Entwicklererfahrung: Durch den Aufbau auf Playwright bietet es vielen Entwicklern eine vertraute API. Die Hinzufügung von act und extract macht das Schreiben von Automatisierungsskripten schneller und intuitiver.
• Widerstandsfähigkeit: Skripte sind weitaus weniger anfällig und widerstandsfähiger gegen UI-Änderungen, was den Wartungsaufwand drastisch reduziert.
• Kontrolle & Vorhersehbarkeit: Der observe- und Caching-Mechanismus ist eine brillante Lösung für das Problem der Unvorhersehbarkeit von KI und macht ihn für Produktionsanwendungsfälle nutzbar.
• Leistung & Flexibilität: Die Kombination aus atomaren act-Aufrufen, intelligenten extract-Schemata und dem hochstufigen agent bietet ein Spektrum an Tools, die für fast jede Browser-Automatisierungsaufgabe geeignet sind.
• Strukturierte Datenextraktion: Die Integration mit Zod für extract ist eine herausragende Funktion, die das Daten-Scraping einfacher und zuverlässiger als je zuvor macht.

Die potenziellen Nachteile:

• Abhängigkeit von LLMs: Die Qualität der Automatisierung ist an die Leistung der zugrunde liegenden KI-Modelle gebunden. Während die heutigen Modelle unglaublich fähig sind, sind sie nicht perfekt.
• Kosten: API-Aufrufe an leistungsstarke Modelle sind nicht kostenlos. Während die Caching-Strategie hilft, dies abzumildern, könnte eine hohe Nutzung Kosten verursachen.
• Lernkurve: Obwohl einfacher als reines Playwright für viele Aufgaben, müssen Entwickler immer noch die Kernkonzepte von act, observe, extract verstehen und wissen, wann sie welches verwenden. Das Denken in "atomaren Aktionen" vs. "hochstufigen Zielen" ist eine neue Fähigkeit.

Fazit

Wie gut ist Stagehand also? Es ist außergewöhnlich gut. Es ist keine Wunderwaffe, aber es stellt einen bedeutenden Fortschritt in der Browser-Automatisierung dar. Es ermöglicht Entwicklern, robustere, intelligentere und leistungsfähigere Automatisierungen mit weniger Aufwand zu erstellen. Indem es Ihnen die Wahl gibt, Low-Level-Code zu schreiben, wenn Sie Präzision benötigen, und hochstufige KI zu verwenden, wenn Sie Flexibilität benötigen, bietet Stagehand ein pragmatisches und leistungsstarkes Toolkit für den modernen Entwickler.

Wenn Sie ein QA-Ingenieur sind, der es leid ist, Selektoren zu aktualisieren, ein Datenwissenschaftler, der nach einer besseren Methode zum Scrapen des Webs sucht, oder ein Entwickler, der komplexe browserbasierte Workflows erstellt, ist Stagehand nicht nur einen Blick wert – es könnte einfach Ihr neues Lieblingstool werden. Es hält erfolgreich sein Versprechen und ist damit ein führender Anwärter auf den Titel "The AI Browser Automation Framework".