# Browser Tool (/de/docs/verdent-for-vscode/core-features/browser-tool)

> Automatisieren Sie Web-Interaktionen, testen Sie UIs und erfassen Sie Screenshots über Browsersitzungen



Das Browser Tool ermöglicht KI-gesteuerte Browserinteraktionen. Starten Sie Browsersitzungen, klicken Sie auf Elemente, geben Sie Text ein, scrollen Sie durch Seiten und erfassen Sie Screenshots über natürlichsprachliche Befehle.

### Was Sie lernen werden [#was-sie-lernen-werden]

* Sitzungslebenszyklus: Starten → Interagieren → Schließen
* Browseraktionen: Klicken, Eingeben, Scrollen
* Anwendungsfälle: UI-Tests, Screenshots, Navigation

***

## Sitzungslebenszyklus [#sitzungslebenszyklus]

Jeder Browser-Automatisierungsworkflow folgt einer strikten Abfolge:

1. **Starten** - Starten Sie eine Browsersitzung an einer Ziel-URL
2. **Interagieren** - Führen Sie Aktionen aus (Klicken, Eingeben, Scrollen)
3. **Schließen** - Beenden Sie die Sitzung, um Ressourcen freizugeben

Der Browserstatus bleibt über Aktionen innerhalb einer Sitzung hinweg erhalten. Sie müssen den Browser schließen, bevor Sie andere Verdent-Werkzeuge verwenden.

<Tip>
  Jede Aktion gibt einen Screenshot zurück, der den aktuellen Browserstatus zeigt. Überprüfen Sie die Screenshots zwischen den Aktionen, um den Erfolg zu bestätigen, bevor Sie fortfahren.
</Tip>

***

## Browseraktionen [#browseraktionen]

<Tabs>
  <Tab title="launch">
    **Eine neue Browsersitzung starten**

    * Erforderlich: Ziel-URL
    * Öffnet den Browser mit einer Auflösung von 1920x1080
    * Immer die erste Aktion in jedem Workflow

    ```
    Launch browser at https://example.com
    ```
  </Tab>

  <Tab title="click">
    **An bestimmten Koordinaten klicken**

    * Erforderlich: x,y-Koordinaten
    * Koordinaten sind relativ zum Viewport
    * Zielt auf Elementmittelpunkte für zuverlässige Ergebnisse

    ```
    Click coordinates 450,300
    ```
  </Tab>

  <Tab title="type">
    **Text über die Tastatur eingeben**

    * Erforderlich: einzugebender Text
    * Gibt Text in das aktuell fokussierte Element ein
    * Folgt oft auf einen Klick in ein Eingabefeld

    ```
    Type "user@example.com"
    ```
  </Tab>

  <Tab title="scroll">
    **Die Seite scrollen**

    * `scroll_down` - Um eine Seitenhöhe nach unten scrollen
    * `scroll_up` - Um eine Seitenhöhe nach oben scrollen
    * Zeigt Inhalte außerhalb des sichtbaren Bereichs an

    ```
    Scroll down to load more content
    ```
  </Tab>

  <Tab title="close">
    **Browsersitzung beenden**

    * Immer die letzte Aktion in jedem Workflow
    * Erforderlich, bevor andere Werkzeuge verwendet werden
    * Gibt Browserressourcen frei

    ```
    Close browser
    ```
  </Tab>
</Tabs>

<Tip>
  Koordinaten sind relativ zum 1920x1080-Viewport. Die Mitte liegt bei ungefähr (960, 540). Nutzen Sie Screenshots, um Elementpositionen abzuschätzen.
</Tip>

***

## Häufige Anwendungsfälle [#häufige-anwendungsfälle]

<Tabs>
  <Tab title="UI-Tests">
    **Formularübermittlungen und Navigationsabläufe testen**

    Starten Sie auf einer Anmeldeseite, klicken Sie auf Eingabefelder, geben Sie Anmeldedaten ein, senden Sie Formulare ab und überprüfen Sie die Ergebnisse anhand von Screenshots.

    ```
    Launch browser at https://app.example.com/login
    Click coordinates 450,280
    Type "testuser@example.com"
    Click coordinates 450,340
    Type "password123"
    Click coordinates 500,420
    Close browser
    ```
  </Tab>

  <Tab title="Screenshots">
    **Seiten für die Dokumentation erfassen**

    Screenshots werden automatisch nach jeder Aktion erfasst. Navigieren Sie zu Zielseiten und Abschnitten, um eine visuelle Dokumentation zu erstellen.

    ```
    Launch browser at https://docs.example.com
    Scroll down to API section
    Close browser
    ```
  </Tab>

  <Tab title="Navigation">
    **Zu Zielinhalten navigieren**

    Nutzen Sie die Browser-Automatisierung, um Inhalte zu erreichen, die eine Interaktion erfordern (Klicken auf Menüs, Laden von Lazy-Content), bevor Sie sie extrahieren.

    ```
    Launch browser at https://store.example.com
    Scroll down three times
    Click "Next Page" at 960,800
    Close browser
    ```
  </Tab>
</Tabs>

***

## Einschränkungen [#einschränkungen]

* **Werkzeug-Exklusivität** - Während aktiver Sitzungen kann nur browser\_action verwendet werden
* **Koordinatenbasiert** - Erfordert x,y-Koordinaten, keine CSS-Selektoren
* **Feste Auflösung** - Der Browser-Viewport ist auf 1920x1080 festgelegt
* **Nur Chrome** - Puppeteer unterstützt Chrome/Chromium-Browser
* **Keine Persistenz** - Sitzungen überstehen keine Neustarts von Verdent
* **Keine WSL-Unterstützung** - Browser Tool funktioniert nicht in WSL-Umgebungen
* **Kein gespeicherter Status** - Jede Sitzung startet neu, ohne Cookies oder Authentifizierung
* **Einzelsitzung** - Es kann jeweils nur eine Browsersitzung aktiv sein

<Tip>
  Schließen Sie die Browsersitzung immer, bevor Sie Dateioperationen, Suchwerkzeuge oder Bash-Befehle verwenden. Der Browser blockiert andere Werkzeuge während aktiver Sitzungen.
</Tip>

***

## Siehe auch [#siehe-auch]

<CardGroup cols="3">
  <Card title="Code-Diff" icon="code-compare" href="/docs/verdent-for-vscode/core-features/code-diff">
    Code-Änderungen überprüfen und genehmigen
  </Card>
</CardGroup>