Met Chrome DevTools voor agents kunnen uw agents responsieve lay-outs controleren, locatiebewuste API's testen en verschillende CPU- of netwerksnelheden simuleren. Gebruik deze tools om uitzonderlijke gevallen te identificeren en prestatieaudits effectiever te automatiseren.
Deze emulatiefuncties werken samen met andere tools waarmee uw agent kan interageren met uw site, bijvoorbeeld door op elementen te klikken, formulieren in te vullen en door pagina's te navigeren.
Dingen die je kunt nabootsen zijn onder andere:
- Viewport en user agent : Emuleer specifieke schermformaten en apparaat-ID's.
- Geolocation: Gebruik vervalste locatiecoördinaten om locatiebewuste API's te testen.
- Netwerk en CPU: Beperk de netwerkcondities en de CPU-snelheid om prestatiebeperkingen uit de praktijk te simuleren.
- Kleurenschema: Schakel tussen lichte en donkere modus.
Houd bij het gebruik van emulatie rekening met het volgende:
- Apparaatondersteuning: Uw agent kan elk apparaat in de
KnownDevices-lijst van Puppeteer emuleren. Dit omvat ook het simuleren van aanraakgebeurtenissen voor mobiele schermen. - Gedrag van de browserengine : Hoewel de tool apparaatkenmerken nabootst, simuleert deze geen andere browserengines dan Chromium of andere besturingssystemen. Uw agent wordt altijd uitgevoerd in Chrome op uw huidige besturingssysteem.
Gebruiksscenario's voor gebruikersemulatie
Geef uw agent de opdracht om omgevingen te emuleren en de gebruikersinterface voor u te verifiëren, in plaats van handmatig browsers te vergroten of verkleinen, IP-adressen te vervalsen of netwerken te beperken na elke codewijziging.
Integreer emulatie in uw ontwikkelproces met behulp van deze workflows.
Verbeter het responsieve ontwerp.
Navigatiepatronen verschillen vaak drastisch tussen mobiele en desktopapparaten. Tijdens het ontwikkelen van je applicatie kun je je agent de opdracht geven om te controleren of de zojuist geschreven componenten correct worden weergegeven en dezelfde inhoud op alle apparaten tonen.
Voorbeeld van een 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.
Voorbeeld van agentuitvoering: Uw agent opent een Chrome-venster, navigeert naar de pagina, start de emulatie en vergelijkt de items in beide weergaven. Het bevestigt dat de mobiele weergave (Burgermenu) en de desktopweergave (Header) de verwachte links bevatten.
Valideer interacties tussen verschillende vensters.
Lay-outs kunnen tijdens interacties niet alleen door CSS-fouten beschadigd raken. Statische screenshots missen vaak bugs die optreden wanneer gebruikers de gebruikersinterface daadwerkelijk aanraken. U kunt uw agent de opdracht geven om specifieke interactiestromen in verschillende vensters te testen om verborgen functionele bugs op te sporen.
Voorbeeld van een 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.
Voorbeeld van een agentuitvoering: Uw agent typt een zoekopdracht in en past de schermgrootte aan elk van de drie formaten aan. In dit voorbeeld merkt uw agent op dat op tablets en mobiele telefoons de zoekbalk de volledige breedte van de header vult, waardoor de link ' Inloggen' wordt verborgen.
Prototype van locatiebewuste functies
Het testen van API's die afhankelijk zijn van de fysieke locatie van de gebruiker (zoals "In de buurt"-zoekopdrachten of winkellocators) vereist doorgaans dat je sensoren handmatig uitschakelt. Nu kun je je agent opdracht geven om specifieke geolocaties te simuleren, zodat je frontend- en backendlogica probleemloos kunt verifiëren.
Voorbeeld van een 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.
Voorbeeld van agentuitvoering: Uw agent navigeert naar de site, zoekt naar Berlijn en voegt vervolgens dynamisch specifieke breedte- en lengtegraadcoördinaten in om Parijs te simuleren, voordat hij/zij interactie heeft met de functie 'Mijn locatie gebruiken' om ervoor te zorgen dat de juiste winkels worden weergegeven.