자연어로 테스트 목표를 설명하고 에이전트로 앱을 조작하는 웹·모바일 앱용 E2E 테스트 프레임워크입니다.
web-infra-dev/midscene
Midscene.js는 웹, 모바일, 데스크톱 앱의 UI 테스트 단계와 검증문을 자연어로 작성할 수 있는 비전 기반 E2E 테스트 프레임워크입니다.
- 스타
- 15,331
- 포크
- 1,201
- 열린 이슈
- 123
- 마지막 커밋
- 6시간 전
어떤 프로젝트인가요?
Midscene.js는 AI 비전을 엔드투엔드 테스트에 적용합니다. 테스트에서 UI 단계와 기대 결과를 일상적인 언어로 설명하면, 시각적 GUI 에이전트가 스크린샷에서 요소를 찾아 클릭하고, 텍스트를 입력하고, 스크롤하며, 화면에 보이는 내용을 확인합니다. 덕분에 CSS나 XPath 셀렉터를 관리하지 않고도 아이콘만 있는 버튼, 커스텀 컨트롤, 캔버스 콘텐츠, cross-origin iframe을 대상으로 테스트할 수 있습니다.
프로젝트를 사용하는 방법은 두 가지입니다. Midscene Test에서는 테스트 케이스를 YAML로 작성하고, 설정·API 호출·정리에 TypeScript 노드를 재사용할 수 있습니다. 또는 기존 Playwright나 Puppeteer 테스트에 Agent API(aiAct, aiTap, aiInput, aiAssert, aiQuery, aiWaitFor)를 추가할 수도 있습니다. Web 브라우저, ADB를 통한 Android, WebDriverAgent를 통한 iOS, HDC를 통한 HarmonyOS, 데스크톱 시스템을 지원합니다.
모델 선택의 폭도 넓습니다. 자체 호스팅할 수 있는 모델을 포함해 비전 기능을 갖춘 여러 모델과 함께 사용할 수 있습니다. 테스트 실행 결과로 스크린샷, 요소 위치, 액션 및 검증 결과가 담긴 인터랙티브 HTML 리포트가 생성됩니다.
핵심 기능
- 01색상, 레이아웃, 시각적 피드백 확인을 포함해 UI 액션과 검증문을 자연어로 작성할 수 있습니다.
- 02스크린샷에서 요소를 찾아 아이콘 버튼이나 캔버스 콘텐츠에 셀렉터 없이 접근할 수 있습니다.
- 03Midscene Test에서 재사용 가능한 TypeScript 노드를 활용해 YAML 테스트 케이스를 작성할 수 있습니다.
- 04Agent API를 통해 Playwright 및 Puppeteer와 연동할 수 있습니다.
- 05Web, Android, iOS, HarmonyOS, 데스크톱 플랫폼을 지원합니다.
- 06스크린샷과 실행 결과가 포함된 인터랙티브 HTML 리포트를 생성합니다.
활용 사례
- 셀렉터가 불안정하거나 사용할 수 없는 웹 앱의 엔드투엔드 테스트 작성
- DOM 검증으로 확인할 수 없는 캔버스 기반 또는 시각적으로 렌더링되는 인터페이스 테스트
- 기존 Playwright 또는 Puppeteer 테스트 스위트에 시각적 검증 추가
- Android 또는 iOS 기기와 에뮬레이터에서 모바일 앱 흐름 자동화
빠른 시작
- 1
npm에서 Web SDK 패키지를 설치합니다
- 2
Midscene Test 프로젝트를 생성합니다(정확한 설정 명령은 가이드 참조)
- 3
모델과 Web 런타임을 구성한 다음 YAML 테스트 케이스를 작성하고 실행합니다
사용 전 알아둘 점
- 비전 기능을 갖춘 AI 모델에 대한 액세스가 필요하며, 모델을 직접 구성하고 비용을 지불해야 합니다.
- 보고된 벤치마크 결과는 특정 모델과 실행 구성에 따라 달라집니다.
토픽
자주 묻는 질문
- midscene은(는) 무엇인가요?
- Midscene.js는 웹, 모바일, 데스크톱 앱의 UI 테스트 단계와 검증문을 자연어로 작성할 수 있는 비전 기반 E2E 테스트 프레임워크입니다. Midscene.js는 AI 비전을 엔드투엔드 테스트에 적용합니다. 테스트에서 UI 단계와 기대 결과를 일상적인 언어로 설명하면, 시각적 GUI 에이전트가 스크린샷에서 요소를 찾아 클릭하고, 텍스트를 입력하고, 스크롤하며, 화면에 보이는 내용을 확인합니다. 덕분에 CSS나 XPath 셀렉터를 관리하지 않고도 아이콘만 있는 버튼, 커스텀 컨트롤, 캔버스 콘텐츠, cross-origin iframe을 대상으로 테스트할 수 있습니다.
- midscene은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
- midscene은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
- midscene은(는) 아직 유지보수되고 있나요?
- 활발히 유지보수 중. midscene의 마지막 커밋은 2026년 10월 20일입니다.
- midscene은(는) 어디에 사용할 수 있나요?
- 셀렉터가 불안정하거나 사용할 수 없는 웹 앱의 엔드투엔드 테스트 작성 DOM 검증으로 확인할 수 없는 캔버스 기반 또는 시각적으로 렌더링되는 인터페이스 테스트 기존 Playwright 또는 Puppeteer 테스트 스위트에 시각적 검증 추가 Android 또는 iOS 기기와 에뮬레이터에서 모바일 앱 흐름 자동화
- midscene는 어떻게 설치하나요?
- npm에서 Web SDK 패키지를 설치합니다 Midscene Test 프로젝트를 생성합니다(정확한 설정 명령은 가이드 참조) 모델과 Web 런타임을 구성한 다음 YAML 테스트 케이스를 작성하고 실행합니다
- midscene은(는) 어디서 받을 수 있나요?
- 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/web-infra-dev/midscene
요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.
관련 프로젝트
실제 브라우저를 제어하는 AI 에이전트를 만들고, 선택적으로 Browser Use Cloud의 스텔스 브라우저와 호스팅 에이전트 API를 사용할 수 있는 오픈소스 Python 라이브러리입니다.
코딩 에이전트가 테스트와 여러 단계의 웹 작업을 위한 Playwright 자동화 스크립트를 작성하고 실행하게 해주는 Agent Skill입니다.
ByteDance의 오픈소스 멀티모달 AI 에이전트 스택으로, CLI/Web UI(Agent TARS)와 데스크톱 GUI 에이전트 앱(UI-TARS Desktop)을 제공합니다.
구조화된 접근성 스냅샷을 통해 LLM 클라이언트가 Playwright로 실제 브라우저를 제어하도록 하는 Model Context Protocol 서버입니다.
자연어 act, observe, extract 호출과 Playwright 스타일 API로 Chrome을 제어하는 브라우저 에이전트용 TypeScript, Python, Go SDK입니다.