Browser und DOM

Diese Seite fasst die browsernahen Teile der g.*-API zusammen. Nutzen Sie sie, wenn ein Skript Seiten öffnen, DOM-Inhalte lesen, Elemente anklicken, Formulare ausfüllen oder Screenshots erstellen soll.

Methode	Zweck
`g.nav.navigateToUrl(url, options?)`	Aktiven oder angegebenen Tab zu einer URL navigieren
`g.dom.waitForDomStable(options?)`	Warten, bis der DOM nicht mehr aktiv mutiert
`g.dom.waitForElement(selector, options?)`	Auf ein passendes Element warten
`g.page.getUrl(options?)`	Aktuelle URL lesen
`g.page.getDom(options?)`	Aktuellen DOM/HTML-Inhalt lesen

await g.nav.navigateToUrl("https://example.com");
await g.dom.waitForDomStable();

const url = await g.page.getUrl();
const html = await g.page.getDom();
g.log("URL: " + url + ", DOM-Länge: " + html.length);

Einige Websites reagieren empfindlich auf Automatisierung. g.nav.navigateToUrl() kann mit Optionen wie stealth: true und detectRedirects: true verwendet werden, wenn ein Skript Weiterleitungen oder einfache Automatisierungserkennung berücksichtigen muss.

Tabs

Methode	Zweck
`g.tabs.getTabs()`	Alle Tabs auflisten
`g.tabs.newBrowserTab(options?)`	Neuen Tab erstellen
`g.tabs.closeTab(tabId)`	Tab schließen
`g.tabs.closeAllTabs()`	Alle Tabs schließen
`g.tabs.setActiveBrowserTab(tabId)`	Tab aktivieren

Viele browserbezogene Methoden akzeptieren browserTabId, damit ein Skript gezielt mit einem Tab arbeitet, zum Beispiel in Workern.

const tabId = await g.tabs.newBrowserTab({ name: "Example", url: "https://example.com" });
await g.dom.waitForDomStable({ browserTabId: tabId });

DOM lesen

Methode	Zweck
`g.dom.getElements(selector, attributes?)`	Elemente als strukturierte Daten lesen
`g.dom.extractContent(selector, options?)`	Textinhalt eines Elements extrahieren
`g.page.executeJS(script, options?)`	JavaScript im Browserkontext ausführen

const links = await g.dom.getElements("a", ["href", "textContent"]);
for (const link of links) {
  g.log(link.textContent + " -> " + link.href);
}

g.page.executeJS() läuft im Seitenkontext. Verwenden Sie es, wenn eine DOM-Abfrage oder Seiteneigenschaft nicht über die höheren g.dom.*-Helfer abgedeckt ist.

DOM verändern und Eingaben senden

Methode	Zweck
`g.dom.click(selector, options?)`	Element anklicken
`g.dom.enterText(selector, text, options?)`	Text in ein Eingabefeld schreiben
`g.dom.selectOption(selector, value, options?)`	Option in einem Select-Feld wählen
`g.dom.pressKey(key, options?)`	Taste senden
`g.dom.scrollTo(selectorOrOptions, options?)`	Zu einem Element oder einer Position scrollen

await g.dom.enterText("#search", "Guida browser automation");
await g.dom.pressKey("Enter");
await g.dom.waitForDomStable();

Bei MCP-gesteuerten Browseraktionen gelten die Freigabe- und Domainregeln aus der MCP-Integration. Skripte, die Sie selbst ausführen, laufen unter Ihrer Kontrolle.

Screenshots und Viewports

Guida kann den sichtbaren Viewport, einzelne Elemente und ganze Seiten erfassen. Screenshots sind nützlich für Diagnose, Nachverfolgungsdaten und sichtbare KI-Prüfungen.

Methode	Zweck
`g.screenshot.screenshot(path?)`	Sichtbaren Viewport erfassen
`g.screenshot.screenshotElement(selector, path?, options?)`	Element erfassen
`g.screenshot.screenshotFullPage(path?, options?)`	Ganze Seite erfassen

Viewport- und Geräteseinstellungen sind besonders wichtig, wenn Sie mobile Layouts oder Remote View prüfen. Remote Ops und Remote View haben eigene Protokolle für Viewport- und Streamingsteuerung.

Typisches Extraktionsskript

async function main() {
  await g.nav.navigateToUrl("https://example.com/products");
  await g.dom.waitForDomStable();

  const products = await g.page.executeJS(`
    Array.from(document.querySelectorAll(".product")).map(card => ({
      name: card.querySelector(".name")?.textContent?.trim(),
      price: card.querySelector(".price")?.textContent?.trim()
    }))
  `);

  for (const product of products) {
    const key = product.name.toLowerCase().replace(/\s+/g, "-");
    g.store.put("products", key, product);
  }

  g.log("Produkte gespeichert: " + products.length);
}

Nächste Schritte

Scripting-Überblick - Fehlerbehandlung, Engines und Editor
Daten und Speicher - extrahierte Daten speichern
HTTP-Interception - Netzwerkverkehr prüfen und verändern
MCP-Integration - Browseraktionen durch KI beaufsichtigen