playwright

Browser Run: 에이전트에게 브라우저를 제공하세요 (새 탭에서 열림)

Cloudflare는 기존의 'Browser Rendering' 서비스를 'Browser Run'으로 재브랜딩하며 AI 에이전트가 웹과 상호작용하는 데 최적화된 강력한 브라우징 인프라를 공개했습니다. 이 서비스는 Cloudflare의 글로벌 네트워크에서 전체 브라우저 세션을 실행하고, 에이전트가 사이트 탐색, 데이터 추출, 폼 작성 등을 대규모로 수행할 수 있도록 지원합니다. 결과적으로 개발자는 인프라 관리 부담 없이 AI 에이전트에게 실시간 모니터링, 인간 개입, 세밀한 제어 기능을 갖춘 브라우저를 제공할 수 있게 되었습니다. **에이전트 중심의 확장된 브라우저 인프라** * **온디맨드 인스턴스 실행:** Cloudflare 글로벌 네트워크를 통해 헤드리스 크롬(Chrome) 인스턴스를 즉시 생성하며, 버전 관리나 서버 유지보수 없이 저지연 환경에서 브라우징 세션을 운영할 수 있습니다. * **대규모 동시성 지원:** 동시 실행 가능한 브라우저 한도를 기존 30개에서 120개로 대폭 늘려, 대량의 작업을 동시에 처리해야 하는 에이전트의 요구사항을 충족합니다. * **에이전트 SDK 결합:** Agents SDK와 연동하여 웹을 탐색하고 정보를 기억하며 자율적으로 행동하는 장기 실행(Long-running) 에이전트 구축이 가능합니다. **CDP 엔드포인트를 통한 정밀한 제어** * **직접적인 프로토콜 노출:** Chrome DevTools Protocol(CDP) 엔드포인트를 직접 노출하여 에이전트가 브라우저에 대해 최대 수준의 제어권을 가질 수 있게 합니다. * **효율적인 모델 통신:** Puppeteer나 Playwright 같은 고수준 라이브러리를 거치지 않고 원시 CDP 메시지를 모델에 직접 전달할 수 있어, 토큰 효율적인 브라우저 제어가 가능합니다. * **간편한 이관:** 기존에 자체 호스팅 크롬에서 실행하던 CDP 기반 자동화 스크립트를 코드 한 줄의 설정 변경(WebSocket URL 교체)만으로 Browser Run에서 실행할 수 있습니다. **실시간 모니터링과 인간 협업 기능** * **Live View:** 에이전트가 현재 무엇을 보고 어떤 동작을 하는지 실시간으로 확인하며, 작업 실패 시 원인을 즉각 파악할 수 있습니다. * **Human in the Loop:** 로그인이나 예상치 못한 예외 상황 발생 시 에이전트가 작업을 중단하는 대신 인간에게 제어권을 넘기고, 문제가 해결되면 다시 제어권을 받아 작업을 이어가는 워크플로우를 지원합니다. * **세션 녹화(Session Recordings):** DOM 변경, 사용자 상호작용, 페이지 탐색을 포함한 모든 세션을 녹화하여 사후 디버깅 및 분석에 활용할 수 있습니다. **생태계 확장 및 차세대 웹 표준 지원** * **MCP(Model Context Protocol) 지원:** Claude Desktop, Cursor, OpenCode와 같은 AI 코딩 에이전트들이 Browser Run을 원격 브라우저로 사용할 수 있도록 지원합니다. * **WebMCP 도입:** 웹사이트가 에이전트가 수행 가능한 액션을 직접 선언하게 함으로써, 인간 중심의 웹 구조에서 발생하던 에이전트의 탐색 오류를 줄이고 신뢰성을 높입니다. Cloudflare Browser Run은 단순한 브라우저 자동화 도구를 넘어 AI 에이전트의 '눈'과 '손' 역할을 하는 필수 인프라로 자리 잡고 있습니다. 특히 복잡한 로그인 처리나 실시간 디버깅이 필요한 에이전트 환경을 구축하려는 개발자에게 CDP 직접 노출과 Human-in-the-loop 기능은 매우 강력한 이점을 제공할 것입니다.

세금 환급 자동화 : AI-driven UI 테스트 자동화 일지 (새 탭에서 열림)

토스인컴의 복잡한 세금 환급 서비스 QA를 위해 1명의 매니저가 AI를 팀원으로 활용하여 4~5명 규모의 자동화 성과를 낸 과정을 다룹니다. AI 에이전트에게 코드 작성과 설계를 맡기고 사람은 문제 정의와 검증에 집중함으로써, 5개월 만에 35개의 고난도 E2E 테스트 시나리오를 성공적으로 구축하고 운영화했습니다. 이 실험은 기술적 난도가 높은 환경에서도 AI와의 협업을 통해 자동화 효율을 극대화할 수 있음을 입증했습니다. **AI 자동화 도입 배경과 도구 구성** * 복잡한 환급 플로우(15~20단계)와 빈번한 UI/정책 변경, 외부 연동 시스템의 불안정성 때문에 전통적인 수동 자동화 방식으로는 대응이 불가능했습니다. * 메인 개발자인 Claude Sonnet 4.5를 비롯해 Cursor(IDE 페어 프로그래밍), Codex(코드 분석) 등 각기 다른 강점을 가진 AI 도구들을 조합하여 사용했습니다. * AI를 SDET 에이전트(설계), 문서화 전문가(기록), Git 마스터(형상 관리)라는 세 가지 페르소나로 분리하여 역할 분담을 명확히 했습니다. **기술적 문제 해결과 아키텍처 고도화** * **Page Object Model(POM) 도입:** 중복 셀렉터 문제를 해결하고 유지보수성을 높이기 위해 AI와 협업하여 모든 페이지 요소를 객체화하는 POM 구조를 설계했습니다. * **React 타이밍 이슈 해결:** 요소가 화면에는 보이지만 이벤트 핸들러가 바인딩되지 않아 발생하는 클릭 실패를 해결하기 위해, UI 안정화와 상호작용 준비 상태를 분리해 감지하는 'Interaction Readiness' 전략을 구현했습니다. * **Fallback 클릭 로직:** 표준 클릭 실패 시 키보드 엔터 입력, 자바스크립트 직접 클릭 순으로 시도하는 안전한 클릭 함수를 만들어 테스트의 견고함을 높였습니다. * **동적 약관 처리:** 서비스별로 상이하고 복잡한 약관 동의 플로우를 AI가 자동으로 감지하고 처리하도록 설계하여, 약관이 변경되어도 테스트가 중단되지 않는 구조를 만들었습니다. **운영 효율화를 위한 협업 시스템 구축** * **문서화 및 일지 자동 생성:** 매일 커밋 기록을 기반으로 AI가 회고 일지와 가이드 문서를 작성하게 하여, 수십 분이 걸리던 기록 업무를 1~2분 내외의 검토 수준으로 단축했습니다. * **메신저 기반 리포팅 루프:** 테스트 결과, 실패 지점 스크린샷, 오류 로그(EventID 등)를 사내 메신저에 자동으로 연동하여 개발팀과의 빠른 논의가 가능하도록 환경을 조성했습니다. * **테스트 격리 및 리팩토링:** 수천 줄의 단일 파일을 분리하고 테스트 데이터(userNo) 충돌 방지 로직을 도입하여 자동화 품질을 관리 가능한 수준으로 끌어올렸습니다. 단순히 AI에게 코드를 짜게 하는 수준을 넘어, 아키텍처 설계와 운영 프로세스 전반을 AI와 함께 고민하는 'AI-First' 접근 방식은 리소스가 제한된 환경에서 QA 품질을 혁신적으로 높일 수 있는 실질적인 해법이 됩니다. 6개월간의 여정은 AI를 도구가 아닌 실제 팀원으로 대우할 때 자동화의 본질인 '안정적인 반복 실행'을 달성할 수 있음을 보여줍니다.

토스인컴 세금 환급 서비스 : 빠른 속도에서 품질을 지키기 위한 E2E 자동화 여정 (새 탭에서 열림)

토스인컴은 빠른 배포 속도에 대응하기 위해 기존의 수동 검증과 복잡한 클래스 기반 POM(Page Object Model)에서 벗어나, 함수형 POM 중심의 자동화 시스템을 구축했습니다. 이를 통해 4시간 이상 소요되던 검증 시간을 20분(병렬 실행 시)으로 단축하고 테스트 성공률 100%를 달성하며, QA가 제품의 품질을 초기부터 설계하고 실행 속도를 높이는 핵심 동력으로 자리 잡았습니다. ### 클래스 기반 POM에서 함수형 POM으로의 전환 * **무상태(Stateless) 함수 설계**: 상태를 갖는 클래스 대신 `page` 객체를 입력받아 동작을 수행하고 다시 `page`를 반환하는 단순한 함수 구조를 채택했습니다. * **가독성 및 유지보수성 향상**: 테스트 코드를 '사람이 읽는 시나리오'처럼 작성할 수 있게 되었으며, 버튼 문구 등 UI 변경 시 수십 개의 파일 대신 POM 함수 한 곳만 수정하면 되도록 캡슐화했습니다. * **명확한 네이밍 컨벤션**: `goto`, `click`, `enter`, `verify` 등 동작 중심의 접두사를 사용하여 코드만 보고도 어떤 테스트 단계인지 직관적으로 이해할 수 있게 했습니다. ### 여정 중심의 단계 분리와 레고식 조립 * **사용자 여정 기반 설계**: 단순히 화면 단위로 나누지 않고, '로그인/약관', '공제 확인', '결제', '신고' 등 세금 환급의 4가지 핵심 단계로 파일을 분리해 관리합니다. * **독립적 모듈화**: 의료비, 신용카드, 인적공제 등 각 공제 항목을 독립된 함수로 만들어, 새로운 테스트 시나리오가 필요할 때 필요한 기능만 레고 블록처럼 조립해 빠르게 생성할 수 있습니다. ### 테스트 안정성을 높이는 기술적 전략 * **4단계 클릭 폴백(Robust Click)**: React 렌더링 타이밍 문제로 발생하는 클릭 실패를 방지하기 위해 'Enter 키 입력 → 일반 클릭 → Force 클릭 → JS 직접 실행' 순의 단계별 재시도 전략을 유틸리티화했습니다. * **최신 페이지 자동 감지**: 리다이렉트나 새 창 열림이 빈번한 환경에서 `getLatestNonScrapePage` 유틸을 통해 항상 유효한 최신 탭을 추적하고 `currentPage`를 갱신하여 페이지 닫힘 에러를 방지했습니다. * **네트워크 대기 최적화**: Playwright의 기본 `networkidle` 방식 대신, 타임아웃이 발생해도 테스트를 중단하지 않고 UI 앵커(텍스트, role 등)로 화면 준비를 판단하는 `waitForNetworkIdleSafely`를 구현했습니다. ### 자동화 도입이 가져온 성과 * **정량적 지표 개선**: 검증 시간 77% 감소, 테스트 커버리지 600% 증가, 코드 중복률 76% 감소 등 모든 지표에서 비약적인 발전을 이루었습니다. * **업무 문화의 변화**: 24시간 자동 검증 시스템을 통해 개발 완료 즉시 기능을 점검하고 결과를 슬랙으로 공유하며, QA는 단순 반복 검증이 아닌 세금 엔진의 금액 정합성 검증 및 성능 지표 분석 등 고부가가치 업무에 집중하게 되었습니다. **실전 팁** 가장 빈번하게 오류가 발생하는 구간(예: 로그인)부터 자동화를 시작하고, 추상화에 너무 매몰되기보다 누구나 읽고 고칠 수 있는 명료한 함수 구조를 유지하는 것이 중요합니다. 특히 페이지 전환이 일어날 때마다 최신 페이지 객체를 새로 할당하는 원칙만으로도 상당수의 자동화 실패를 예방할 수 있습니다.