Midscene.js: плагин с открытым исходным кодом для автоматизации тестирования браузеров с помощью искусственного интеллекта

Общее введение

Midscene.js - это инструмент автоматизации браузера на основе искусственного интеллекта, способный управлять веб-страницами, выполнять утверждения и извлекать данные с помощью команд на естественном языке. Он поддерживает расширения Chrome, JavaScript SDK и YAML-скрипты, упрощая процесс написания и поддержки UI-тестов. Используя мультимодальные модели большого языка, такие как GPT-4o, Midscene.js обеспечивает новый опыт автоматизированной разработки, позволяющий пользователям интуитивно взаимодействовать с веб-страницами и получать структурированные данные JSON.

Байт с открытым исходным кодом Midscene.js, естественный язык + скриншоты интерфейса напрямую генерируют E2E-тесты, экономя команде бесчисленные часы повторяющегося труда, а текущий кодинг + мультимодальные возможности для решения многих базовых E2E-задач оказались очень совершенными.

Список функций

• взаимодействие на естественном языке: Используя естественный язык для описания шагов, ИИ автоматически планирует и управляет пользовательским интерфейсом.
• Извлечение данных в формате JSON: Автоматическое генерирование данных ответа в формате JSON в соответствии с требованиями пользователя.
• интуитивное утверждениеУтверждения составляются на естественном языке, который ИИ понимает и выполняет.
• Опыт работы с расширениями Chrome: Для начала работы с расширениями не нужно писать код.
• Отчет о визуализации: Предоставление подробных отчетов о внедрении, чтобы помочь пользователям понять и отладить процесс.
• Поддержка нескольких сценариев: Включает JavaScript и YAML, обеспечивая гибкое автоматическое создание сценариев.

Использование помощи

Установка и настройка

Установите расширение для Chrome:

1. Зайдите в магазин Chrome и найдите "Midscene".
2. Нажмите кнопку "Добавить в Chrome".
3. Подтвердите установку и разрешите разрешения.

Настройте переменные окружения (для использования SDK):

• Для использования API OpenAI вам необходимо создать.envдобавьте следующее:

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

• Если вы используете другой модельный сервис, вам необходимо соответствующим образом настроить вышеуказанные переменные окружения.

Процесс использования

Используется через расширение Chrome

• Расширение запуска: После установки на панели инструментов браузера появится значок расширения. Нажмите на значок, чтобы открыть панель управления Midscene.
• интерактивная работа: Введите в панель управления команды на естественном языке, например "Нажать на кнопку входа в систему" или "Извлечь все заголовки из веб-страницы".
• Посмотреть результаты: После завершения операции расширение возвращает результаты выполнения, обычно представляя извлеченные данные в формате JSON.

Используется через JavaScript SDK

• Знакомство с SDK::

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

• исполняемая операция::
  • базовая операция: ИспользованиеaiФункция выполняет простые операции с веб-страницами. Пример:

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

  • извлечение данных: ИспользованиеaiQueryчтобы извлечь данные:

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

  • проверка утверждений: УтилизацияaiAssertДелайте утверждения:

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

Использование сценариев YAML

• Написание скриптов YAML: Определите задачи автоматизации в файле **.yaml**, например:

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

• исполняемый скрипт: Запустите эти скрипты с помощью инструментов командной строки или CLI Midscene.

Оперативные детали

• обучение на естественном языке: Инструкции могут быть простыми: "нажмите", "введите" или сложными: "найдите все товары с надписью "Продажа" и запишите цену! ".
• обработка ошибок: Если операция не удалась, Midscene предоставляет подробный отчет с указанием причины неудачи и помогает скорректировать инструкции.
• Отладка и воспроизведениеВыполнение каждого теста или операции можно воспроизвести с помощью визуальных отчетов, чтобы помочь вам понять или отладить ваши сценарии.

Это подробное руководство пользователя гарантирует, что пользователи быстро войдут в курс дела и смогут в полной мере использовать возможности Midscene.js для эффективного автоматизированного тестирования браузера.