Midscene.js : un plugin open source qui permet de tester l'automatisation des navigateurs grâce à l'IA

Introduction générale

Midscene.js est un outil d'automatisation du navigateur alimenté par l'IA, capable de contrôler les pages web, d'exécuter des assertions et d'extraire des données par le biais de commandes en langage naturel. Il prend en charge les extensions Chrome, les SDK JavaScript et les scripts YAML, simplifiant ainsi le processus d'écriture et de maintenance des tests d'interface utilisateur. En s'appuyant sur des modèles multimodaux de grand langage tels que GPT-4o, Midscene.js offre une nouvelle expérience de développement automatisé qui permet aux utilisateurs d'interagir intuitivement avec les pages web et d'extraire des données JSON structurées.

Byte open source Midscene.js, le langage naturel + les captures d'écran de l'interface génèrent directement des tests E2E, épargnant à l'équipe d'innombrables heures de travail répétitif, et les capacités actuelles de codage + multimodales pour résoudre de nombreux problèmes E2E de base ont été très parfaites.

Liste des fonctions

• interaction avec le langage naturelL'IA planifie et contrôle automatiquement l'interface utilisateur en utilisant le langage naturel pour décrire les étapes.
• Extraction de données JSONLes données de réponse sont automatiquement générées au format JSON en fonction des besoins de l'utilisateur.
• affirmation intuitiveLes assertions sont formulées en langage naturel, que l'IA comprend et exécute.
• Expérience en matière d'extensions ChromeLes extensions : Il n'est pas nécessaire d'écrire du code pour commencer l'expérience avec les extensions.
• Rapport de visualisationLes rapports de mise en œuvre sont détaillés afin d'aider les utilisateurs à comprendre et à déboguer le processus.
• Prise en charge de plusieurs scriptsLe système de gestion de l'information de la Commission européenne (CEI) : Il comprend JavaScript et YAML, ce qui permet de créer des scripts automatisés et flexibles.

Utiliser l'aide

Installation et configuration

Installer l'extension Chrome :

1. Visitez le Chrome Store et recherchez "Midscene".
2. Cliquez sur le bouton "Ajouter à Chrome".
3. Confirmer l'installation et autoriser les permissions.

Configurer les variables d'environnement (pour l'utilisation du SDK) :

• Pour l'utilisation de l'API OpenAI, vous devez créer un fichier.envajouter ce qui suit :

export OPENAI_API_KEY="你的API密钥"
export MIDSCENE_MODEL_NAME="gpt-4o"

• Si vous utilisez un autre modèle de service, vous devez adapter les variables d'environnement ci-dessus en conséquence.

Processus d'utilisation

Utilisé via l'extension Chrome

• Lancement de l'extensionAprès l'installation, l'icône de l'extension s'affiche dans la barre d'outils du navigateur. Cliquez sur l'icône pour ouvrir le panneau de contrôle de Midscene.
• fonctionnement interactifLe panneau de contrôle permet de saisir des commandes en langage naturel, telles que "Cliquer sur le bouton de connexion" ou "Extraire tous les titres d'une page web".
• Voir les résultatsL'extension renvoie les résultats de l'exécution une fois l'opération terminée, en présentant généralement les données extraites au format JSON.

Utilisé via le SDK JavaScript

• Présentation du SDK: :

  import { ai, aiQuery, aiAssert } from'@midscene/web';
  

• opération exécutable: :
  • fonctionnement de base: Utilisationaipermet d'effectuer des opérations simples sur une page web. Exemple :

    await ai('在搜索框中输入 "React"');
    

  • extraction de données: UtilisationaiQuerypour extraire les données :

    const data = await aiQuery('{title: string, price: number}[]', '找到产品列表并提取标题和价格');
    

  • contrôle des assertionsUtilisation : UtilisationaiAssertFaire des affirmations :

    await aiAssert('页面上应该有登录按钮');
    

Utilisation de scripts YAML

• Écrire des scripts YAMLLes tâches d'automatisation : Définissez vos tâches d'automatisation dans un fichier **.yaml**, par exemple :

  -action:type
  selector:'input[name="search"]'
  value:'JavaScript'
  -action:click
  selector:'button[type="submit"]'
  

• script exécutableLes scripts peuvent être exécutés à l'aide d'outils de ligne de commande ou de l'interface de programmation de Midscene.

Détails opérationnels

• l'enseignement en langue naturelleLes instructions peuvent être aussi simples que "cliquez", "entrez" ou aussi complexes que "trouvez tous les produits étiquetés "Soldes" et notez le prix ! ".
• traitement des erreursSi l'opération échoue, Midscene fournit un rapport détaillé indiquant la raison de l'échec et vous aidant à ajuster les instructions.
• Débogage et lectureL'exécution de chaque test ou opération peut être lue avec des rapports visuels pour vous aider à comprendre ou à déboguer vos scripts.

Ce guide d'utilisation détaillé permet aux utilisateurs de se familiariser rapidement avec les fonctionnalités de Midscene.js et d'en tirer le meilleur parti pour des tests d'automatisation de navigateur efficaces.