playwright-testing

Playwright Testing (MiniPC)

Web app/game testing using Playwright installed on MiniPC.

Environment

• Execution location: MiniPC (nodes.run or browser.proxy)
• Browser: Chromium headless
• Purpose: Game QA, web app functional testing, screenshots, console log capture

Decision Tree

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

Core Patterns

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()

Game QA Testing

# 게임 로드 확인
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)

⚠️ Key Precautions

• networkidle first! Dynamic apps must have DOM inspected after JS execution completes
• headless=True required (MiniPC has no monitor)
• Run on MiniPC — Do not use a browser directly from the Mac Studio
• Code review alone is insufficient for QA — Actual play testing is required
• Use browser.proxy or nodes.run

How to Run in 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"]