Nutzererlebnisse mit KI-Agenten simulieren

Matthias Rohmer
José Luis Zapata

Mit Chrome DevTools für Agents kann Ihr Agent responsive Layouts überprüfen, standortbezogene APIs testen und unterschiedliche CPU- oder Netzwerkgeschwindigkeiten simulieren. Mit diesen Tools können Sie Grenzfälle identifizieren und Leistungsprüfungen effektiver automatisieren.

Diese Emulationsfunktionen funktionieren mit anderen Tools, mit denen Ihr Agent mit Ihrer Website interagieren kann, z. B. durch Klicken auf Elemente, Ausfüllen von Formularen und Navigieren auf Seiten.

Sie können unter anderem Folgendes emulieren:

  • Viewport und User Agent: Emulieren Sie bestimmte Bildschirmgrößen und Geräte-IDs.
  • Geostandort:Fälschen Sie Standortkoordinaten, um standortbezogene APIs zu testen.
  • Netzwerk und CPU:Drosseln Sie die Netzwerkbedingungen und die CPU-Geschwindigkeit, um Leistungsbeschränkungen in der realen Welt zu simulieren.
  • Farbschema:Wechseln Sie zwischen dem hellen und dem dunklen Modus.

Beachten Sie bei der Emulation Folgendes:

  • Geräteunterstützung: Ihr Agent kann jedes Gerät in der Liste Puppeteer's KnownDevices emulieren. Dazu gehört auch die Simulation von Touch-Ereignissen für mobile Viewports.
  • Verhalten der Browser-Engine: Das Tool emuliert zwar die Geräteeigenschaften, simuliert aber keine Nicht-Chromium-Browser-Engines oder andere Betriebssysteme. Ihr Agent wird immer in Chrome unter Ihrem aktuellen Betriebssystem ausgeführt.

Anwendungsfälle für die Nutzeremulation

Weisen Sie Ihren Agent an, Umgebungen zu emulieren und die Benutzeroberfläche für Sie zu überprüfen, anstatt nach jeder Codeänderung manuell die Größe von Browsern zu ändern, IPs zu fälschen oder Netzwerke zu drosseln.

Binden Sie die Emulation mit diesen Workflows in Ihren Entwicklungsprozess ein.

Responsives Design iterieren

Navigationsmuster ändern sich oft drastisch zwischen Mobilgeräten und Computern. Wenn Sie Ihre Anwendung entwickeln, können Sie Ihren Agent anweisen, zu überprüfen, ob die gerade geschriebenen Komponenten korrekt gerendert werden und auf allen Geräten dieselben Inhalte bereitstellen.

Beispiel-Prompt :

Go to developer.chrome.com. Click the burger menu on mobile, check the top level
items and ensure the same items are available for a desktop device.

Beispiel für die Agentenausführung:Ihr Agent öffnet ein Chrome-Fenster, ruft die Seite auf, startet die Emulation und vergleicht Elemente in beiden Viewports. Er bestätigt, dass die mobile Ansicht (Burgermenü) und die Desktopansicht (Header) die erwarteten Links enthalten.

Interaktionen über Viewports hinweg validieren

Layouts werden nicht nur im CSS, sondern auch bei Interaktionen beschädigt. Bei statischen Screenshots werden oft Fehler übersehen, die auftreten, wenn Nutzer tatsächlich mit der Benutzeroberfläche interagieren. Sie können Ihren Agent beauftragen, bestimmte Interaktionsabläufe in mehreren Viewports zu testen, um versteckte funktionale Fehler zu finden.

Beispiel-Prompt :

Go to https://developer.chrome.com/ on mobile, tablet and desktop device, type
in a search query but don't submit it and wait for the type-ahead suggestions.
Ensure the Sign in button is visible all the time. Let me know if that's not the
case.

Beispiel für die Agentenausführung:Ihr Agent gibt eine Suchanfrage ein und ändert die Größe des Bildschirms auf jede der drei Größen. In diesem Beispiel stellt Ihr Agent fest, dass sich die Suchleiste auf Tablets und Mobilgeräten über die gesamte Breite des Headers erstreckt und den Link Anmelden verdeckt.

Prototypen für standortbezogene Funktionen erstellen

Wenn Sie APIs testen, die auf dem physischen Standort des Nutzers basieren (z. B. „In meiner Nähe“ oder Standortfinder), müssen Sie normalerweise Sensoren manuell überschreiben. Jetzt können Sie Ihren Agent anweisen, bestimmte Geostandorte zu fälschen, um Ihre Frontend- und Backend-Logik reibungslos zu überprüfen.

Beispiel-Prompt :

Go to chrome.dev/devtools-store-locator. Search for Berlin, and confirm there's
a store showing. Confirm there's no store for Washington. Finally, simulate
Paris as location and verify there are stores listed.

Beispiel für die Agentenausführung:Ihr Agent ruft die Website auf, sucht nach Berlin und fügt dann dynamisch bestimmte Breiten- und Längengradkoordinaten ein, um Paris zu emulieren. Anschließend interagiert er mit der Funktion Meinen Standort verwenden , um sicherzustellen, dass die richtigen Geschäfte angezeigt werden.