컨텐츠로 건너뛰기
레시피 생태계 소스 코드 문서

Playwright로 브라우저 자동화하기

Playwright MCP 서버는 OpenCode를 브라우저 조작자로 만듭니다. 여러분의 감독 하에 탐색, 클릭, 폼 입력, DOM 읽기, 시각적 상태 확인이 가능합니다.

이 레시피를 사용하는 경우

  • UI 흐름을 종단간 검증해야 할 때 (로그인, 결제, 설정 저장)
  • 공개 API가 없는 페이지에서 구조화된 데이터를 스크래핑하고 싶을 때
  • 실제 브라우저에서만 재현되는 버그를 디버깅할 때

사전 준비

  • 설치된 OpenCode
  • 사용 가능한 Playwright MCP 서버 (OpenCode 권장 MCP에 포함)
  • 명확한 대상 URL과 수행할 단계 목록

단계

  1. Playwright MCP 서버 추가

    OpenCode 설정에 등록하세요.

    {
  "mcp": {
    "playwright": {
      "type": "local",
      "command": ["npx", "@playwright/mcp@latest"]
    }
  }
}

  2. 도구가 로드되었는지 확인

    OpenCode를 시작하고 사용 가능한 브라우저 도구를 나열해 달라고 요청하세요. browser_navigate, browser_click, browser_snapshot 등이 보일 것입니다.

  3. 명확한 목표로 작업 명시

    OpenCode에게 URL, 사용자 자격 증명(있는 경우), 원하는 정확한 assertion을 제공하세요.

    https://staging.example.com을 열고, 테스트 계정으로 로그인한 다음, Settings로 이동하여 새로운 “Export data” 토글이 보이는지 알려주세요. 보인다면 토글의 기본 상태도 알려주세요.

  4. 각 도구 호출을 감독

    도구 호출을 지켜보세요. 탐색, 클릭, 폼 입력을 승인하세요. 운영 데이터베이스에 쓸 수 있는 모든 작업은 거부하세요 — 스테이징 환경을 사용하세요.

  5. 증거 요청

    흐름이 끝나면 OpenCode에게 관련 DOM을 덤프하거나 스냅샷을 찍어달라고 요청하세요. 이것이 회귀 아티팩트가 됩니다.

    최종 페이지 DOM과 Settings 페이지의 스크린샷을 각각 ./artifacts/settings-snapshot.html와 ./artifacts/settings.png에 저장하세요.

  6. 흐름을 테스트로 변환

    OpenCode에게 감독된 단계를 CI에서 실행할 수 있는 Playwright 테스트로 변환해 달라고 요청하세요.

    방금 수행한 흐름을 tests/e2e/settings-export.spec.ts의 Playwright 테스트로 바꾸세요. page-object 패턴을 사용하고 토글 가시성과 기본 상태를 assertion하세요.

핵심 프롬프트

Playwright MCP 서버를 사용하여 [URL]을 열고, [user/pass] 자격 증명으로 로그인한 다음, [page]로 이동하여 [specific condition]을 검증하세요. 마지막에 페이지의 DOM 스냅샷과 스크린샷을 ./artifacts/에 저장하세요. 각 단계에서 관찰한 내용을 보고하세요.

검증

  • DOM 스냅샷에 예상 요소가 포함되어 있음
  • 스크린샷이 assertion된 상태를 시각적으로 보여줌
  • 생성된 Playwright 테스트가 로컬과 CI에서 모두 통과

흔한 실수

  • 운영 환경에서 실행: 항상 스테이징 환경을 사용하세요. 브라우저 자동화는 상태를 변경할 수 있습니다.
  • 취약한 셀렉터: UI 마크업은 변합니다. CSS 클래스가 아닌 안정적인 속성(data-testid, role)으로 assertion하세요.
  • 긴 도구 체인: “A, B, C, D 모두 수행하라”는 단일 프롬프트는 C 단계에서 실패해 페이지를 이상한 상태로 둘 수 있습니다. 흐름을 감독되는 단계들로 분리하세요.

관련 문서

  • MCP 서버 — Model Context Protocol 서버 구성 및 사용 방법
  • 도구 — 에이전트가 호출할 수 있는 내장 및 커스텀 도구

관련 레시피

관련 문서

다음 단계