[추천 스킬 #2] 자율형 브라우저 오토메이션 스킬: Playwright 기반 클릭·캡처 자동화

단순한 HTTP 요청만으로는 자바스크립트(JS) 기반 단일 페이지 애플리케이션(SPA)이나 로그인 인증이 필요한 대시보드 데이터를 가져올 수 없습니다. **에이전트 추천 스킬 2호**인 **'브라우저 오토메이션 스킬(Browser Automation Skill)'**은 헤드리스 브라우저(Headless Browser)를 직접 띄워 사람처럼 클릭하고 폼을 입력하는 강력한 능력을 부여합니다.

1. 브라우저 오토메이션 스킬의 3대 핵심 기능

에이전트가 브라우저 서브에이전트(`browser_subagent`)나 Playwright 스크립트를 동적으로 구동하여 수행하는 작업입니다.

• 동적 렌더링 캡처: 자바스크립트로 그려지는 React/Vue 대시보드의 실시간 차트 스크린샷 획득.
• 사용자 행위 에뮬레이션: ID/PW 폼 채우기, 드롭다운 선택, 무한 스크롤 및 [제출] 버튼 시뮬레이션 클릭.
• 웹 UI 시각적 회귀 테스트: 웹 앱 업데이트 후 레이아웃 깨짐이나 스타일 에러를 자율 검수.

2. 자율 브라우저 스킬 연동 예시

# Playwright 기반 스크립트 실행 스킬 예시
name: browser_automation
description: 로그인 기반 웹 서비스나 동적 SPA 웹 사이트를 조작하고 화면을 캡처할 때 호출합니다.

steps:
  - 1. 타겟 페이지 URL로 이동합니다.
  - 2. DOM 요소 selector(#login-btn, input[name="user"])를 검색해 상호작용합니다.
  - 3. 완료 후 스크린샷을 지정된 artifacts 디렉토리에 저장합니다.

"브라우저 조작 능력을 갖춘 에이전트는 사람이 매일 반복하는 단순 웹 업무를 100% 자율화하는 일등 공신입니다."

3. 대표적 사용 사례: 웹 서비스 자동 E2E 테스트 및 데이터 수집

새로 만든 웹 어플리케이션이 모바일 및 데스크톱 환경에서 정상 작동하는지 에이전트가 직접 클릭해 보며 결과를 캡처 리포트로 렌더링해 주는 자동 테스트 파이프라인 구축이 가능해집니다.

4. 요약: 마우스와 키보드를 에이전트에게 넘겨라

브라우저 오토메이션 스킬을 이식하여 상상만 했던 웹 조작 업무를 완전 자동화해 보세요.