Playwright (Automation + MCP + Scraper)

• JS 렌더링 페이지 — JavaScript 실행 후에만 필요한 콘텐츠가 존재하는 경우 (SPA, 동적 테이블, 지연 로드 데이터).
• 멀티스텝 브라우저 워크플로우 — 실제 브라우저 이벤트와 DOM 상태에 의존하는 양식, 로그인 흐름, 파일 업로드/다운로드, 또는 탐색 시퀀스.
• 스크린샷, PDF 및 시각적 증거 캡처 — 원시 HTML이 아닌 렌더링된 페이지에서 픽셀 단위로 정확한 출력이 필요한 경우.
• Playwright 테스트 작성 및 디버깅 — @playwright/test 스위트 작성, 실행 또는 수정, CI 불안정 문제 추적, 또는 헤디드 모드에서 UI 버그 재현.
• MCP 기반 브라우저 제어 — 에이전트가 이미 루프 내에 browser_* 도구를 보유하고 있으며, 새로운 자동화 코드 작성 없이 탐색-클릭-입력-스크린샷 워크플로우를 원하는 경우.

• 정적 HTML 또는 단순 HTTP 응답으로 충분한 경우 — 페이지에 JavaScript 렌더링이 필요하지 않다면, 일반 fetch 또는 HTTP 스킬이 더 빠르고, 비용이 적게 들며, 오류 가능성도 낮습니다.
• 순수 API 작업 — 대상 서비스에 문서화된 API가 있다면, 브라우저를 구동하는 것보다 직접 호출하는 것이 더 안정적입니다.
• 추출만이 목적이고 브라우저가 아닌 방법이 가능한 경우 — 브라우저 전체를 실행하여 스크래핑하기 전에 문서화된 API 또는 일반 HTTP를 우선적으로 사용하십시오.

npx @playwright/mcp --headless를 실행하여 browser_navigate, browser_click, browser_type, browser_snapshot 등을 일급 도구 액션으로 노출하세요. 이 방식은 새로운 자동화 코드가 필요하지 않으며, 에이전트가 MCP 도구 호출을 통해 브라우저를 직접 제어합니다.

직접 Playwright 스크립트(chromium.launch, page.goto, page.screenshot) 또는 npx playwright test를 사용한 완전한 @playwright/test 스위트를 작성하고 실행합니다. headed 실행, 트레이스 캡처, 재시도, 병렬 워커를 기본으로 지원합니다.

npx playwright codegen <url>을 사용하여 상호작용을 녹화하고 안정적인 로케이터를 생성하세요. 소스에서 선택자를 추측하는 과정을 없애주며, 사소한 DOM 변경에도 유지되는 역할(role)·레이블(label)·텍스트 기반 로케이터를 생성합니다.

전체 페이지 스크린샷 캡처, PDF 생성, 실행 추적 기록, 파일 다운로드 — 모두 MCP 도구 액션 또는 직접 Playwright (Automation + MCP + Scraper) API 호출을 통해 수행할 수 있습니다. 아티팩트는 워크스페이스 또는 시스템 임시 디렉터리에 로컬로 저장됩니다.

이 스킬은 취약한 CSS/XPath 대신 역할(role), 레이블(label), 텍스트(text), 테스트 ID(test-ID) 선택자를 사용하도록 강제하며, 원시 명령 확인 대신 웹 우선(web-first) 어설션을 적용합니다. 액션 가능성(actionability) 대기에 대한 내장 안내 기능을 통해 불안정한 sleep 기반의 타이밍 핵(hack)을 방지합니다.

숨겨진 파일, 영구 세션 또는 미선언 네트워크 호출이 없습니다. 인증 상태는 명시적으로 재사용하지 않는 한 임시로 유지됩니다. 중요한 프로덕션 흐름은 진행하기 전에 명시적인 사용자 확인이 필요합니다.

로컬 또는 스테이징 앱에 대해 기존 @playwright/test 스위트를 실행하고 확장합니다. npx playwright test --trace on을 사용하여 CI 실패에 대한 아티팩트를 캡처한 다음, 트레이스 뷰어와 헤디드 재실행을 통해 불안정한 테스트를 진단하세요.

에이전트가 사이트를 탐색하고, 여러 단계의 양식을 작성하며, 스크린샷을 캡처하도록 설정하세요 — browser_navigate, browser_type, browser_click, browser_snapshot MCP 액션을 통해 — Playwright (Automation + MCP + Scraper) 스크립트 한 줄도 작성하지 않고 모든 작업을 수행할 수 있습니다.

JS로 렌더링된 페이지로 이동하여 DOM이 안정될 때까지 기다린 후, browser_evaluate 또는 직접 Playwright 스크립트를 사용하여 구조화된 데이터를 추출합니다. 대상에 API가 없고 콘텐츠가 JavaScript 실행 후에만 나타나는 경우에 이상적입니다.

npx playwright test --headed 명령어를 사용하여 헤디드 모드에서 보고된 UI 회귀 문제를 재현하고, --trace on 옵션으로 트레이스를 캡처한 후, 네트워크, 콘솔 및 DOM 스냅샷을 검사하여 수정 사항을 작성하기 전에 근본 원인을 파악합니다.