Midscene.js: AI로 브라우저 자동화 테스트를 구동하는 오픈 소스 플러그인

16.3K 00

일반 소개

Midscene.js는 자연어 명령을 통해 웹 페이지를 제어하고 어설션을 실행하며 데이터를 추출할 수 있는 AI 기반 브라우저 자동화 도구입니다. 이 도구는 Chrome 확장 프로그램, JavaScript SDK 및 YAML 스크립트를 지원하여 UI 테스트 작성 및 유지 관리 프로세스를 간소화합니다. GPT-4o와 같은 멀티모달 빅 언어 모델을 활용하여 사용자가 웹 페이지와 직관적으로 상호 작용하고 구조화된 JSON 데이터를 가져올 수 있는 새로운 자동화된 개발 환경을 제공하는 Midscene.js.

바이트 오픈 소스 Midscene.js, 자연어 + 인터페이스 스크린샷이 직접 E2E 테스트를 생성하여 팀의 수많은 반복 노동 시간을 절약하고, 현재 코딩 + 멀티모달 기능으로 많은 기본 E2E 문제를 해결하는 것은 매우 완벽합니다.

기능 목록

자연어 상호 작용단계를 설명하는 자연어를 사용하여 AI가 자동으로 사용자 인터페이스를 계획하고 제어합니다.
JSON 데이터 추출사용자 요구사항에 따라 JSON 형식의 응답 데이터를 자동으로 생성합니다.
직관적인 어설션어설션은 자연어로 이루어지며, AI가 이를 이해하고 실행합니다.
Chrome 확장 프로그램 환경확장 기능으로 경험을 시작하기 위해 코드를 작성할 필요가 없습니다.
시각화 보고서사용자가 프로세스를 이해하고 디버깅할 수 있도록 자세한 구현 보고서를 제공합니다.
여러 스크립트 지원자바스크립트 및 YAML을 포함하여 유연한 자동 스크립팅을 제공합니다.

도움말 사용

설치 및 구성

Chrome 확장 프로그램을 설치합니다:

Chrome 스토어를 방문하여 '미드신'을 검색합니다.
'Chrome에 추가' 버튼을 클릭합니다.
설치를 확인하고 권한을 허용합니다.

환경 변수를 구성합니다(SDK 사용 시):

OpenAI API를 사용하려면 다음을 생성해야 합니다..env파일에 다음을 추가합니다:

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

다른 모델 서비스를 사용하는 경우에는 위의 환경 변수를 적절히 조정해야 합니다.

사용 프로세스

Chrome 확장 프로그램을 통해 사용

확장 프로그램 실행: 설치 후 브라우저 도구 모음에 확장 아이콘이 표시됩니다. 아이콘을 클릭하면 미드씬 제어판이 열립니다.
대화형 작업제어판에서 "로그인 버튼 클릭" 또는 "웹 페이지에서 모든 제목 추출"과 같은 자연어 명령을 입력합니다.
결과 보기: 작업이 완료되면 확장 프로그램은 실행 결과를 반환하며, 일반적으로 추출된 데이터를 JSON 형식으로 표시합니다.

자바스크립트 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.js 기능을 최대한 활용할 수 있습니다.