kjaylee/playwright-testing

Playwright Testing (MiniPC)

MiniPC에 설치된 Playwright를 활용한 웹앱/게임 테스트.

환경

• 실행 위치: MiniPC (nodes.run 또는 browser.proxy)
• 브라우저: Chromium headless
• 용도: 게임 QA, 웹앱 기능 테스트, 스크린샷, 콘솔 로그 캡처

판단 트리

테스트 대상 → 정적 HTML인가?
├─ Yes → 파일 내용 직접 읽어 셀렉터 파악
│        → Playwright 스크립트로 자동화
└─ No (동적 웹앱) → 서버 실행 중인가?
    ├─ No → 서버 먼저 실행 (MiniPC에서)
    └─ Yes → 정찰-행동 패턴:
        1. 페이지 이동 + networkidle 대기
        2. 스크린샷 또는 DOM 검사
        3. 셀렉터 파악
        4. 동작 실행

핵심 패턴

정찰-행동 (Reconnaissance-Then-Action)

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page()
    page.goto('http://localhost:PORT')
    page.wait_for_load_state('networkidle')  # 필수!

    # 1. 정찰: DOM 상태 파악
    page.screenshot(path='/tmp/inspect.png', full_page=True)

    # 2. 셀렉터 탐색
    buttons = page.locator('button').all()

    # 3. 행동: 파악된 셀렉터로 조작
    page.click('text=Start Game')

    browser.close()

게임 QA 테스트

# 게임 로드 확인
page.goto('http://localhost:9877/game.html')
page.wait_for_load_state('networkidle')

# 캔버스 렌더링 확인
canvas = page.locator('canvas')
assert canvas.is_visible()

# 게임 상호작용 테스트
page.click('canvas', position={'x': 400, 'y': 300})
page.wait_for_timeout(1000)

# 스코어/상태 변화 확인
score = page.locator('#score').inner_text()
page.screenshot(path='/tmp/game-test.png')

# 콘솔 에러 캡처
errors = []
page.on('console', lambda msg: errors.append(msg.text) if msg.type == 'error' else None)

⚠️ 핵심 주의사항

• networkidle 먼저! 동적 앱은 반드시 JS 실행 완료 후 DOM 검사
• headless=True 필수 (MiniPC에 모니터 없음)
• MiniPC에서 실행 — 맥 스튜디오에서 직접 브라우저 금지
• 코드 리뷰만으로 QA 불충분 — 실제 플레이 테스트 필수
• browser.proxy 또는 nodes.run 활용

Clawdbot에서 실행 방법

# 방법 1: browser tool (proxy)
browser action=navigate target=node node=MiniPC targetUrl="http://localhost:9877/game.html"
browser action=screenshot target=node node=MiniPC

# 방법 2: nodes.run으로 Python 스크립트 실행
nodes.run node=MiniPC command=["python3", "test_script.py"]