Show HN: Frontend-VisualQA — 코딩 에이전트의 눈, UI 작업 검증

Yutori Navigator 를 통해 프론트엔드 작업에 시각적 QA 와 검증을 제공합니다.

• 실행 중인 로컬HOST 프론트엔드와 명시적인 시각적 주장을 검증합니다.
• 빠른 시각적 점검을 위해 스크린샷을 캡처합니다.
• 다단계 디버깅을 위해 MCP 도구 호출 간에 브라우저 세션을 재사용합니다.
• CLI(frontend-visualqa verify), MCP 서버(frontend-visualqa serve), 또는 에이전트 스킬(/frontend-visualqa)로 작동합니다.

개발 서버를 시작하지 않습니다. URL 이 도달 불가능하면 주장은 not_testable 을 반환합니다.

Playwright MCP 는 DOM 에 대해 클릭, 입력 및 단언(assert)할 수 있지만 페이지를 보지는 것은 불가능합니다. 잘못된 페이지에서 깔끔하게 실행될 수 있으며, 화면 밖으로 렌더링된 모달에 대해 modal.isVisible() 를 단언하거나 모바일에서 깨진 레이아웃을 놓칠 수 있습니다.

Navigator 는 컴퓨터 사용 모델 (n1.5) 에 의해 구동되는 AI 에이전트로, 스크린샷을 통해 웹 페이지를 인지하고 브라우저 내에서의 행동을 예측합니다. 여기서는 두 가지 기능이 중요합니다:

• 자기 교정형 탐색(Self-correcting navigation) — 특정 제품 페이지 대신 제품 카탈로그에 에이전트를 지시하면 Navigator 는 잘못된 페이지를 인식하고 올바른 페이지로 클릭하여 이동하며 trace.wrong_page_recovered: true 를 보고합니다. Playwright MCP 는 잘못된 페이지에서 단언을 실행하여 침묵적으로 통과하게 되며, 이는 '쓰레기 입력, 쓰레기 출력'입니다.
  • Navigator 가 제품 카탈로그에 착륙 → 올바른 제품 페이지로 탐색
• 풍부한 시각적 평가(Rich visual evaluation) — 장바구니 페이지에서는 두 항목 모두 할인 가격 ($149.99 와 $79.99) 을 표시하지만, 소계 $279.98 가 원래 가격을 사용한다는 것을 Navigator 가 포착했습니다. 할인이 적용되지 않았습니다. API 대시보드에서는 쿼터 라벨이 "100%" 로 읽히지만 진행 바는 눈에 띄게 3 분의 2 만 채워져 있습니다. Playwright MCP 는 두 가지 모두 통과합니다. DOM 텍스트가 일관되고 진행 바 너비는 단순히 CSS 값이기 때문입니다.
  • Navigator 가 할인 적용되지 않은 버그를 포착
  • 라벨은 100% 라고 하지만 진행 바는 약 3 분의 2 만 채워져 있음

알려진 제한 사항

• 네이티브(Native) — 네이티브 HTML <select> 드롭다운은 여전히 신뢰할 수 없을 수 있습니다. 브라우저 뷰포트 외부에 OS 레벨 위젯으로 렌더링되기 때문입니다. 페이지가 네이티브 섹트를 사용하는 경우 시각적 테스트를 위해 커스텀 인브라우저 드롭다운 컴포넌트를 선호하거나 URL 파라미터를 통해 선택을 미리 채우세요.

uv 가 이미 설치되어 있지 않은 경우 설치하세요:

curl -LsSf https://astral.sh/uv/install.sh | sh

• CLI 설치:

  복사

  uv tool install frontend-visualqa \
    --with-executables-from yutori \
    --with-executables-from playwright playwright install chromium
  

  1

  2

  3

  4

  이 명령어는 frontend-visualqa, yutori, 및 playwright CLI 를 설치하고 크롬 브라우저 바이너리를 다운로드합니다.

• Yutori API 로그인:

  복사

  yutori auth login
  

  1

  2

  이 명령어는 브라우저를 열어 Yutori API 키를 ~/.yutori/config.json 에 저장합니다.

• add-mcp 를 사용하여 MCP 서버 등록 (모든 클라이언트와 작동):

  복사

  npx add-mcp -g -n frontend-visualqa "frontend-visualqa serve"
  

  1

  2

  구성하려는 클라이언트를 선택하세요.

• 설치