터미널에서 브라우저를 직접 조종하다: AI 에이전트 'playwright' 브라우저 자동화 스킬

1. 매번 마우스 잡고 테스트하기 번거로웠다면

웹 개발을 하다 보면 반복적인 수동 조작에 시간을 뺏기기 일쑤입니다.

• 로그인 화면에서 아이디와 비밀번호를 치고 버튼 누르기

• 회원가입 폼에 더미 데이터를 일일이 채워 넣기

• 특정 모달 창이 제대로 뜨는지 반응형 해상도별로 캡처 뜨기

단순한 기능 점검을 위해 무거운 E2E 테스트 스위트(.spec.ts)를 처음부터 작성하기엔 배보다 배꼽이 더 큽니다. playwright 스킬은 스크립트 작성 부담 없이, 터미널 명령어를 통해 실제 브라우저(크로미움, 파이어폭스, 웹킷)를 실시간으로 지휘할 수 있는 에이전트 CLI 자동화 스킬입니다.

2. playwright CLI 스킬이란?

• 스킬 이름: playwright

• 방식: CLI 기반 브라우저 제어 (playwright-cli)

• 호환 환경: Claude Code, Codex, Gemini CLI / Antigravity, 로컬 터미널

• 목적: 웹 탐색, 양식 자동 제출, 스크린샷 캡처, DOM 상태 스냅샷, UI 디버깅

이 스킬의 핵심은 즉시성(Ad-hoc execution)입니다. 별도의 테스트 프레임워크를 세팅하지 않아도 에이전트가 터미널에서 브라우저를 띄워 직접 버튼을 클릭하고 결과를 스크린샷으로 확인합니다.

sequenceDiagram participant User as 개발자 / 에이전트 participant CLI as Playwright CLI participant Browser as 실제 브라우저 (Chromium) User->>CLI: open https://example.com CLI->>Browser: 브라우저 창 실행 및 페이지 로드 User->>CLI: type "test_user" & click #submit CLI->>Browser: 키 입력 및 제출 버튼 클릭 User->>CLI: screenshot CLI-->>User: 결과 이미지 캡처 파일 전달

3. 핵심 워크플로우: 열기, 조작, 캡처

기본적인 조작 흐름은 매우 직관적입니다:

# 1. 대상 사이트 열기 (화면을 보며 테스트하려면 --headed) playwright-cli open https://myapp.local:3000 --headed # 2. 현재 화면의 접근성 트리 및 요소 스냅샷 확인 playwright-cli snapshot # 3. 폼 필드 입력 및 엔터 playwright-cli click "#username" playwright-cli type "admin@company.com" playwright-cli click "#password" playwright-cli type "secret1234" playwright-cli press Enter # 4. 결과 화면 스크린샷 저장 playwright-cli screenshot --path ./login-result.png

에이전트는 이 명령을 연속적으로 수행하며 UI 플로우가 정상적으로 작동하는지 스스로 검증합니다.

4. 윈도우 및 PowerShell 환경 실행 팁

윈도우 환경에서는 셸 경로와 권한 문제가 발생할 수 있습니다. playwright 스킬은 이를 고려한 네이티브 구문을 제공합니다:

# npx를 통한 글로벌 설치 없는 즉시 실행 npx.cmd --yes --package @playwright/cli playwright-cli <명령어>

별도의 복잡한 환경 변수 세팅 없이 Node.js(npm)만 설치되어 있다면 즉시 브라우저를 구동할 수 있습니다.

5. 개발자가 환호하는 3가지 실전 시나리오

1. 에이전트의 시각적 자가 검증 (Self-Visual Check)

   프론트엔드 코드를 수정한 뒤 에이전트가 스스로 브라우저를 띄워 스크린샷을 찍고, 레이아웃이 깨지지 않았는지 눈으로 확인합니다.

1. 동적 웹 크롤링 및 데이터 추출

   자바스크립트로 렌더링되는 SPA 사이트에서 특정 데이터가 로드된 후의 DOM 트리를 손쉽게 덤프합니다.

1. 인증 플로우 디버깅

   소셜 로그인이나 토큰 갱신 과정에서 쿠키와 세션이 올바르게 저장되는지 네트워크 단계를 추적합니다.

6. 다양한 AI 에이전트 도구에서의 활용성

이 스킬은 특정 CLI에 종속되지 않는 범용 오픈 에이전트 스킬입니다:

• Claude Code: 대화 중 웹 페이지 검증 필요 시 브라우저 헤드리스 실행 및 캡처

• Codex: 터미널 커맨드 러너를 통해 백그라운드 웹 상호작용 수행

• Gemini CLI / Antigravity: 슬래시 커맨드나 스킬 호출로 실시간 웹 테스팅 연계

에이전트에게 "방금 바꾼 결제 완료 화면 브라우저 띄워서 스크린샷 찍어줘"라고 지시하면 즉시 결과를 받아볼 수 있습니다.

7. 마무리: 에이전트에게 두 눈과 손을 달아주자

AI 코딩 어시스턴트가 텍스트 에디터 안에만 갇혀 있던 시대는 지났습니다. 브라우저를 직접 띄우고, 마우스를 클릭하며, 눈으로 렌더링 결과를 확인할 수 있을 때 에이전트의 문제 해결력은 한 차원 높아집니다.

반복적인 웹 브라우징 테스트를 자동화하고 싶다면, 즐겨 쓰는 AI 어시스턴트에 playwright 스킬을 연결해 보세요.