I built a Claude browser agent that automates Playwright tasks — here's the starter kit

개요

기술 블로그는 Claude의 vision API를 활용하여 Playwright 작업을 자동화하는 브라우저 에이전트 구축 방법을 소개하며, 기존의 DOM 구조 기반 자동화 방식이 가진 유지보수 문제를 해결하기 위한 새로운 접근 방식을 제시한다.

주요 내용

* 기존 브라우저 자동화의 유지보수 문제: CSS 선택자나 XPath는 DOM 구조를 기반으로 하므로, 웹사이트의 잦은 디자인 변경이나 A/B 테스트로 인해 쉽게 무효화되어 유지보수가 어렵다. 특히 React, Angular, Vue 등에서 동적으로 생성되는 클래스 이름은 안정적인 식별자를 제공하지 못한다.
* 비전 기반 자동화 접근 방식: DOM 구조 대신 사용자가 "보는 것"을 기반으로 상호작용한다. 화면을 캡처하여 Claude의 vision API에 보내면, 자연어 설명을 통해 엘리먼트를 찾고 상호작용할 수 있다. 이는 시각적 구조가 DOM 구조보다 안정적이라는 점을 활용한다.
* Claude Vision API 활용 예시: vision_browser 라이브러리를 사용하여 페이지 상태를 이해하고, smart_fill_field 및 smart_click 함수를 통해 엘리먼트를 설명 기반으로 조작한다. 이 과정에서 Selector, XPath, DOM 검사가 필요 없다.
* 에이전트 레이어: 실패 기록을 활용하여 에이전트의 실행을 최적화한다. 과거 실패 사례를 학습하여 동일한 실수를 반복하지 않도록 프롬프트에 포함시킨다.
* CAPTCHA 처리: 비전 기반 자동화는 CAPTCHA 처리에도 이점을 제공한다. Claude가 페이지 상태를 분석하여 CAPTCHA 유형을 식별하고, 텍스트 CAPTCHA는 직접 읽고 해결하며, press-and-hold CAPTCHA는 타이밍 알고리즘으로 해결할 수 있다. 복잡한 CAPTCHA의 경우 유료 API를 활용한다.
* 메모리 레이어 (Persistence): 모든 시도 기록을 데이터베이스에 저장하여 이전 실행 결과를 바탕으로 다음에 수행할 전략을 제안받거나, 실패한 경로를 피하는 등 에이전트의 학습 및 개선을 지원한다.
* 스타터 키트 제공: 위에서 설명한 비전 기반 브라우저 에이전트 구축에 필요한 코드(vision_browser.py, captcha_brain.py, browser_memory.py 등)와 실행 예제를 포함하는 스타터 키트를 유료로 제공한다.

시사점

이 기술은 웹 자동화의 견고성과 유지보수성을 크게 향상시킬 수 있으며, 개발자들이 DOM 구조 변경에 대한 부담 없이 안정적으로 자동화 스크립트를 개발할 수 있도록 지원한다.