Midscene.js: un complemento de código abierto que impulsa las pruebas de automatización del navegador con IA

Introducción general

Midscene.js es una herramienta de automatización del navegador impulsada por IA capaz de controlar páginas web, ejecutar aserciones y extraer datos mediante comandos de lenguaje natural. Es compatible con extensiones de Chrome, SDK de JavaScript y scripts YAML, lo que simplifica el proceso de escribir y mantener pruebas de interfaz de usuario. Midscene.js aprovecha modelos de lenguaje multimodal como GPT-4o para ofrecer una nueva experiencia de desarrollo automatizado que permite a los usuarios interactuar intuitivamente con páginas web y obtener datos JSON estructurados.

Byte de código abierto Midscene.js, el lenguaje natural + capturas de pantalla de la interfaz generan directamente las pruebas E2E, ahorrando al equipo incontables horas de trabajo repetitivo, y la codificación actual + capacidades multimodales para resolver muchos problemas básicos E2E ha sido muy perfecta.

Lista de funciones

• interacción en lenguaje naturalLa IA planifica y controla automáticamente la interfaz de usuario utilizando el lenguaje natural para describir los pasos.
• Extracción de datos JSONGeneración automática de datos de respuesta en formato JSON según los requisitos del usuario.
• afirmación intuitivaLas afirmaciones se hacen en lenguaje natural, que la IA entiende y ejecuta.
• Experiencia con extensiones de Chrome: No es necesario escribir código para comenzar la experiencia con las extensiones.
• Informe de visualización: Proporcionar informes de aplicación detallados para ayudar a los usuarios a comprender y depurar el proceso.
• Compatibilidad con varios guiones: Incluye JavaScript y YAML para proporcionar scripts automatizados flexibles.

Utilizar la ayuda

Instalación y configuración

Instale la extensión de Chrome:

1. Visita Chrome Store y busca "Midscene".
2. Haz clic en el botón "Añadir a Chrome".
3. Confirme la instalación y permita los permisos.

Configurar variables de entorno (para uso del SDK):

• Para utilizar la API de OpenAI, debe crear un archivo.envañada lo siguiente:

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

• Si utiliza otro servicio modelo, deberá ajustar las variables de entorno anteriores en consecuencia.

Proceso de utilización

Utilizado a través de la extensión de Chrome

• Extensión de lanzamientoInstalación: Tras la instalación, el icono de la extensión aparecerá en la barra de herramientas del navegador. Haga clic en el icono para abrir el panel de control de Midscene.
• operación interactiva: Introduzca comandos de lenguaje natural en el panel de control, como "Haga clic en el botón de inicio de sesión" o "Extraiga todos los encabezados de una página web".
• Ver resultados: Una vez finalizada la operación, la extensión devuelve los resultados de la ejecución, normalmente presentando los datos extraídos en formato JSON.

Utilizado a través del SDK de JavaScript

• Presentación del SDK::

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

• operación ejecutable::
  • funcionamiento básico: Usoairealiza operaciones sencillas en una página web. Ejemplo:

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

  • extracción de datos: UsoaiQuerypara extraer los datos:

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

  • comprobación de aserciones: UtilizaciónaiAssertHaz afirmaciones:

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

Uso de scripts YAML

• Escritura de scripts YAMLDefina sus tareas de automatización en un archivo **.yaml**, por ejemplo:

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

• script ejecutableEjecuta estos scripts mediante herramientas de línea de comandos o la CLI de Midscene.

Detalles operativos

• enseñanza del lenguaje naturalLas instrucciones pueden ser tan sencillas como "haga clic", "introduzca" o tan complejas como "¡encuentre todos los productos etiquetados como 'Rebajas' y anote el precio! ".
• tratamiento de erroresSi la operación falla, Midscene proporciona un informe detallado indicando el motivo del fallo y ayudándole a ajustar las instrucciones.
• Depuración y reproducciónLa ejecución de cada prueba u operación puede reproducirse con informes visuales para ayudarle a comprender o depurar sus guiones.

Esta detallada guía de usuario garantiza que los usuarios se pongan al día rápidamente y aprovechen al máximo las funciones de Midscene.js para realizar pruebas de automatización del navegador de forma eficaz.