대본 기획 도우미▸ 
AI 앱 
AI 뉴스 
Midscene.js: AI를 브라우저 조작자로 활용하세요
Midscene.js: AI를 브라우저 조작자로 활용하세요소개
Midscene는 ai 기술 기반의 자동화 브라우저 어시스턴트로, 자연어를 통해 웹페이지를 조작할 수 있습니다. 사용자가 실행하고자 하는 작업을 간단히 설명하기만 하면 Midscene이 자동으로 웹페이지를 처리하여 트윗 작성, 콘텐츠 검증, 정보 검색 등의 기능을 수행합니다.
Midscene.js 주요 기능
자연어 상호작용: 사용자는 "로그인 버튼 클릭" 또는 "키워드 검색"과 같은 자연어 명령으로 브라우저를 제어할 수 있으며, Midscene은 이러한 명령을 이해하고 실행할 수 있습니다.
데이터 추출: Midscene은 웹페이지의 정보를 자동으로 추출하여 JSON과 같은 구조화된 형식으로 출력할 수 있습니다. 예를 들어 검색 결과나 표 데이터를 추출할 수 있습니다.
웹페이지 조작: 여러 웹사이트에서 트윗 작성, 양식 작성, 링크 클릭 등 다양한 작업을 수행할 수 있도록 지원하여, 사용자가 복잡한 코드를 작성할 필요가 없습니다.
시각화 보고서: 매번 실행 후 애니메이션 재생 및 단계별 세부 정보를 포함한 상세한 시각화 보고서를 생성하여, 테스트 프로세스의 디버깅 및 최적화를 용이하게 합니다.
높은 통합성: Puppeteer, Playwright 등 도구와의 원활한 통합을 지원하여 다양한 자동화 테스트 시나리오에 적합합니다.
강한 유연성: 사용자가 다양한 대규모 언어 모델(LLM)을 선택할 수 있으며, 오픈소스 모델 UI-TARS도 지원합니다.
UI 자동화 테스트: Midscene은 UI 자동화 테스트 도구로 사용되어 개발자가 테스트 스크립트를 빠르게 작성하고 유지 보수하며 테스트 효율성을 높일 수 있도록 도와줍니다.
Midscene.js 사용 사례
소셜 미디어 관리: 사용자는 Midscene에 "상태 업데이트 게시" 또는 "특정 댓글에 답글"과 같은 명령을 직접 내릴 수 있으며, Midscene이 이러한 작업을 자동으로 완료하여 시간과 에너지를 절약해 줍니다.
데이터 수집: 시장 조사나 데이터 분석을 수행할 때 사용자는 Midscene을 사용하여 특정 웹사이트의 정보를 신속하게 수집할 수 있습니다. 예를 들어 "모든 제품의 가격과 설명 추출"과 같은 명령을 내리면 Midscene이 자동으로 처리하여 필요한 구조화된 데이터를 제공합니다.
자동화 테스트: 개발자의 경우 Midscene의 자연어 명령을 통해 UI 테스트 작성이 훨씬 간단해집니다. 개발자는 테스트할 동작을 설명하기만 하면 Midscene이 테스트 단계를 자동으로 실행하고 보고서를 생성합니다.
Midscene.js 사용 방법：
예제 코드 (Puppeteer 사용):
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
// 导航至目标网站
await page.goto("http://example.com");
// 执行 Midscene.js 动作
await midscene.execute(page, '输入用户名 "testuser"');
await midscene.execute(page, '点击登录按钮');
// 数据提取
let userData = await midscene.query(page, '提取用户信息为 JSON 格式');
console.log(userData);
// 关闭浏览器
await browser.close();
})();Midscene.js 사용 방법은 매우 간단합니다. Chrome 플러그인만 설치하면 사용할 수 있으며, 프로그래밍 기반 지식이 필요하지 않습니다. 실행하고자 하는 작업을 설명하기만 하면, Midscene이 사용자의 의도를 이해하고 해당 브라우저 작업을 자동으로 수행합니다. 정말 놀랍지 않나요?
GitHub：https://github.com/web-infra-dev/midscene
