Openclaw용 Playwright 컨트롤러

AI 에이전트가 Playwright를 통해 스크린샷과 텍스트를 캡처할 수 있도록 지원하는 고성능 웹 브라우징 및 데이터 추출 기술입니다.

mrchenkuan

v1.0.0

Mar 1, 2026

설치

정보

Skill.md

설치 및 다운로드

1. ClawHub CLI

레지스트리에서 스킬을 바로 설치하는 가장 빠른 방법입니다.


                  npx clawhub@latest install playwright-controller

2. 수동 설치

스킬 폴더를 다음 위치 중 하나로 복사하세요

글로벌

~/.openclaw/skills/

워크스페이스

<project>/skills/

우선순위: 워크스페이스 > 로컬 > 번들

3. 프롬프트 설치

이 프롬프트를 OpenClaw에 복사하면 자동으로 설치됩니다.


                  Clawhub를 사용해서 playwright-controller 설치를 도와줘. Clawhub가 설치되어 있지 않다면 먼저 설치해 줘 (npm i -g clawhub).

다운로드를 원하시나요?

ZIP 아카이브 형태의 원본 스킬 파일을 받으세요.

Playwright 컨트롤러란 무엇인가요?

Playwright 컨트롤러는 Openclaw Skills 생태계를 위해 설계된 전문가급 브라우저 자동화 도구입니다. 개발자와 AI 에이전트가 Chromium을 사용하여 프로그래밍 방식으로 웹을 탐색할 수 있게 하며, 전체 페이지 렌더링, 모바일 기기 에뮬레이션, 동적 콘텐츠에 대한 지능형 대기 등의 기능을 제공합니다. 단순한 스크래퍼와 달리 이 기술은 iPhone 뷰포트 및 특정 User-Agent 문자열을 포함한 실제 사용자 환경을 시뮬레이션하여 JavaScript가 많은 사이트를 처리합니다.

이 기술을 통합함으로써 에이전트는 웹 레이아웃을 시각적으로 확인하고 추가 처리를 위해 깨끗하고 구조화된 텍스트를 추출하는 능력을 얻게 됩니다. 속도를 위한 헤드리스(headless) 모드와 복잡한 로그인 또는 CAPTCHA 해결과 같이 수동 개입이 필요한 시나리오를 위한 헤드풀(headful) 모드를 모두 지원하여 모든 자동화 워크플로우에 다재다능하게 활용할 수 있습니다.

Playwright 컨트롤러 활용 사례

시각적 문서화를 위한 전체 페이지 또는 특정 요소의 스크린샷 생성.
스크립트와 광고를 제거하여 현대적인 웹 애플리케이션에서 깨끗한 텍스트 콘텐츠 추출.
모바일 뷰포트 및 User-Agent 시뮬레이션을 통한 웹사이트 반응성 테스트.
JS 콘텐츠 렌더링을 위해 전체 브라우저 환경이 필요한 사이트로부터 데이터 수집 자동화.
AI 주도 환경 내에서 헤드풀 브라우저 모드를 사용하여 웹 상호작용 디버깅.

Playwright 컨트롤러 작동 원리

에이전트가 fetch 또는 fetch-element와 같은 특정 명령을 사용하여 기술을 트리거합니다.
미리 구성된 모바일 컨텍스트 설정(iPhone 시뮬레이션)으로 Chromium 브라우저 인스턴스가 시작됩니다.
컨트롤러가 대상 URL로 이동하고 networkidle 상태를 사용하여 지능형 대기를 구현합니다.
모든 비동기 에셋과 글꼴이 완전히 로드되도록 추가 렌더링 지연이 적용됩니다.
기술이 고해상도 PNG 스크린샷을 캡처하고 페이지의 내부 텍스트를 추출합니다.
텍스트 추출 단계에서 스크립트 및 광고와 같은 불필요한 요소가 필터링됩니다.
파일은 체계적인 저장을 위해 고유한 타임스탬프와 URL 기반 해시가 포함된 지정된 디렉토리에 저장됩니다.

Playwright 컨트롤러 설정 가이드

Playwright 컨트롤러는 Openclaw Skills 라이브러리의 일부이며 필요한 모든 종속성이 미리 구성되어 제공됩니다. Node.js(v16+)가 설치되어 있는지 확인하십시오.

# 웹페이지를 가져오고 즉시 스크린샷 생성
playwright:fetch https://example.com

# 페이지의 특정 요소 캡처
playwright:fetch-element --selector=".main-content" https://example.com

Playwright 컨트롤러 데이터 스키마 및 분류 체계

이 기술은 일반적으로 ./screenshots 폴더 아래의 구조화된 디렉토리 형식으로 출력을 구성합니다. 파일은 타임스탬프와 정리된 URL 해시의 조합을 사용하여 이름이 지정됩니다.

파일 유형	명명 규칙	설명
전체 스크린샷	`<timestamp>_<url_hash>.png`	고충실도 전체 페이지 PNG 캡처.
추출된 텍스트	`<timestamp>_<url_hash>_content.txt`	전체 페이지의 정제된 텍스트 콘텐츠.
요소 시각화	`<timestamp>_<url_hash>_element.png`	특정 CSS 선택기의 타겟팅된 스크린샷.
오류 캡처	`<timestamp>_<url_hash>_error.png`	실행 실패 시 캡처된 시각적 상태.

Playwright 컨트롤러 고급 기능

모바일 에뮬레이션: iPhone 17.0 User-Agent 및 375x800 해상도 시뮬레이션 기본 지원.
지능형 대기: 네트워크 유휴 상태 자동 감지 및 사용자 정의 렌더링 버퍼.
헤드풀 모드: 디버깅 및 수동 사용자 상호작용을 위한 선택적 가시 브라우저 창.
리소스 차단: 시각적 정확성을 유지하면서 불필요한 에셋을 건너뛰어 성능을 최적화하는 기능.
유연한 API: 사용자 정의 스크립트 통합을 위한 fetchWithPlaywright 및 fetchElementAndScreenshot 함수 직접 액세스.
강력한 오류 처리: 디버깅을 용이하게 하기 위해 페이지 로드가 실패하더라도 자동 스크린샷 생성.