Midscene.js: ein Open-Source-Plugin, das Browser-Automatisierungstests mit KI unterstützt

Allgemeine Einführung

Midscene.js ist ein KI-gestütztes Browser-Automatisierungstool, das in der Lage ist, Webseiten zu steuern, Assertions auszuführen und Daten durch natürlichsprachliche Befehle zu extrahieren. Es unterstützt Chrome-Erweiterungen, JavaScript-SDKs und YAML-Skripte und vereinfacht so das Schreiben und Warten von UI-Tests. Durch den Einsatz von multimodalen Big-Language-Modellen wie GPT-4o bietet Midscene.js ein neues automatisiertes Entwicklungserlebnis, mit dem Benutzer intuitiv mit Webseiten interagieren und strukturierte JSON-Daten abrufen können.

Byte Open Source Midscene.js, natürliche Sprache + Screenshots der Benutzeroberfläche generieren direkt E2E-Tests und ersparen dem Team unzählige Stunden repetitiver Arbeit, und die aktuellen Coding + multimodalen Fähigkeiten, um viele grundlegende E2E-Probleme zu lösen, ist sehr perfekt.

Funktionsliste

• natürlichsprachliche InteraktionDie KI plant und steuert die Benutzeroberfläche automatisch, indem sie die Schritte in natürlicher Sprache beschreibt.
• JSON-DatenextraktionAutomatisches Generieren von Antwortdaten im JSON-Format entsprechend den Benutzeranforderungen.
• intuitive BehauptungBehauptungen werden in natürlicher Sprache formuliert, die die KI versteht und ausführt.
• Erfahrung mit Chrome-ErweiterungenKeine Notwendigkeit, Code zu schreiben, um die Erfahrung mit Erweiterungen zu beginnen.
• Bericht zur VisualisierungBereitstellung detaillierter Implementierungsberichte, die den Benutzern helfen, den Prozess zu verstehen und zu debuggen.
• Unterstützung für mehrere SkripteEnthält JavaScript und YAML, was eine flexible automatische Skripterstellung ermöglicht.

Hilfe verwenden

Installation und Konfiguration

Installieren Sie die Chrome-Erweiterung:

1. Besuchen Sie den Chrome Store und suchen Sie nach "Midscene".
2. Klicken Sie auf die Schaltfläche "Zu Chrome hinzufügen".
3. Bestätigen Sie die Installation und geben Sie die Berechtigungen frei.

Konfigurieren Sie die Umgebungsvariablen (für die Verwendung des SDK):

• Für die Verwendung von OpenAI API müssen Sie eine.envfügen Sie Folgendes hinzu:

export OPENAI_API_KEY="Ihr API-Schlüssel"
export MIDSCENE_MODEL_NAME="gpt-4o"

• Wenn Sie einen anderen Modelldienst verwenden, müssen Sie die oben genannten Umgebungsvariablen entsprechend anpassen.

Verwendung Prozess

Verwendet über Chrome-Erweiterung

• Erweiterung startenNach der Installation wird das Symbol der Erweiterung in der Symbolleiste des Browsers angezeigt. Klicken Sie auf das Symbol, um das Midscene-Bedienfeld zu öffnen.
• interaktive BedienungEingabe von Befehlen in natürlicher Sprache in das Bedienfeld, z. B. "Klicken Sie auf die Anmeldeschaltfläche" oder "Extrahieren Sie alle Überschriften aus einer Webseite".
• Ergebnisse anzeigenNach Abschluss des Vorgangs gibt die Erweiterung die Ergebnisse der Ausführung zurück, wobei die extrahierten Daten in der Regel im JSON-Format vorliegen.

Verwendung über JavaScript SDK

• Einführung in das SDK::

  importieren { ai, aiQuery, aiAssert } von '@midscene/web';
  

• ausführbare Operation::
  • grundlegende Bedienung: VerwendungaiFunktion führt einfache Webseitenoperationen durch. Beispiel:

    await ai('Geben Sie in das Suchfeld "Reagieren Sie"');
    

  • Datenextraktion: VerwendungaiQueryum die Daten zu extrahieren:

    const data = await aiQuery('{title: string, price: number}[]', 'Finde die Liste der Produkte und extrahiere den Titel und den Preis');
    

  • Assertion CheckingVerwertungaiAssertBehauptungen aufstellen:

    await aiAssert('Es sollte eine Anmeldeschaltfläche auf der Seite vorhanden sein');
    

YAML-Skripte verwenden

• Schreiben von YAML-SkriptenDefinieren Sie Ihre Automatisierungsaufgaben z. B. in einer **.yaml**-Datei:

  -Aktion:Typ
  selector:'input[name="suche"]'
  Wert:'JavaScript'
  -aktion:klick
  selector:'button[type="submit"]'
  

• ausführbares SkriptAusführen dieser Skripte über Befehlszeilentools oder die CLI von Midscene.

Operative Einzelheiten

• Unterricht in natürlicher SpracheAnweisungen können so einfach sein wie "Klick", "Enter" oder so komplex wie "Finde alle Produkte mit der Aufschrift 'Sale' und notiere den Preis! ".
• FehlerbehandlungWenn der Vorgang fehlschlägt, liefert Midscene einen detaillierten Bericht, der den Grund für den Fehler angibt und Ihnen hilft, die Anweisungen anzupassen.
• Debuggen und WiedergebenDie Ausführung eines jeden Tests oder Vorgangs kann mit visuellen Berichten wiedergegeben werden, um das Verständnis oder die Fehlersuche in Ihren Skripten zu erleichtern.

Dieses detaillierte Benutzerhandbuch stellt sicher, dass die Benutzer sich schnell zurechtfinden und alle Vorteile der Midscene.js-Funktionen für effiziente Browser-Automatisierungstests nutzen können.