kogiQA MCP Web Browser
공식이것은 Claude Code와 같은 코딩 에이전트가 사용자를 대신해 웹사이트를 방문하여 버그를 식별하거나 UI 테스트 케이스를 생성하는 데 도움을 주는 웹 브라우저입니다.
Kogi QA Web Browser MCP(으)로 무엇을 할 수 있나요?
- 디버그 스타일 문제 — 에이전트에게 특정 뷰포트 너비에서 페이지를 검사하고, 레이아웃 문제를 식별하며, CSS 수정을 제안하도록 요청하세요.
- 콘솔 오류 자동 수정 — 에이전트가 메뉴에서 연결된 모든 페이지를 탐색하고, 콘솔 오류를 수집하며, 소스 코드에 수정 사항을 적용하도록 하세요.
- 웹 앱 기능 매핑 및 문서화 — 에이전트에게 설정된 깊이까지 내부 링크를 크롤링하고, 각 페이지와 그 기능을 설명하는 Markdown 문서를 생성하도록 지시하세요.
- 엔드 투 엔드 테스트 생성 — 사용자 흐름(예: 회원가입)을 설명하고 에이전트에게 이를 따라가며 정상 경로와 유효성 검사 오류를 포함하는 Cypress 테스트를 출력하도록 요청하세요.
- 탐색적 테스트 수행 — 모든 양식에 대해 엣지 케이스 입력을 사용한 시간 제한 탐색적 테스트를 요청하고, 손상되거나 일관되지 않은 부분에 대한 보고서를 받으세요.
문서
kogiQA MCP 웹 브라우저
kogiQA를 사용하여 브라우저 자동화 기능을 제공하는 모델 컨텍스트 프로토콜(MCP) 서버입니다. 이 서버는 LLM이 스크린샷이나 시각적으로 조정된 모델 없이도 자연어를 통해 웹 페이지와 상호 작용할 수 있도록 합니다.
사용 용도:
- 페이지의 스타일 문제 디버그
- 콘솔 오류 자동 수정
- 웹 앱의 기능 매핑 및 문서화
- 엔드투엔드 테스트 자동 작성
- 애플리케이션의 탐색적 테스트 자동화
예시 프롬프트 사용 예시 참조
kogiQA MCP vs Playwright MCP
kogiQA MCP 서버는 kogiQA 브라우저 제어 알고리즘의 기능을 통합한 브라우저를 제공합니다. 이를 통해 에이전트가 선택자 없이 페이지와 상호 작용할 수 있어 시간과 토큰을 절약할 수 있습니다.
설치
자동 설치:
npx kogiqa-mcp@latest
Claude Code
claude mcp add kogiqa-browser npx kogiqa-mcp@latest
VS Code
아래 버튼 중 하나를 클릭하여 VS Code에 직접 설치하세요:
또는 VS Code CLI를 통해 설치하세요:
code --add-mcp '{"name":"kogiqa-browser","command":"npx","args":["kogiqa-mcp@latest"]}'
Cursor
또는 Cursor Settings → MCP → Add new MCP Server로 이동하여 명령어npx kogiqa-mcp@latest를 입력하세요.
표준 구성
다른 MCP 클라이언트의 경우 MCP 구성에 다음을 추가하세요:
{ "mcpServers": { "kogiqa-browser": { "command": "npx", "args": [ "kogiqa-mcp@latest" ] } } }
사용 예시
서버가 구성되면 자연어로 에이전트에게 말하기만 하면 됩니다. kogiQA는 선택자가 필요 없기 때문에 요소를 찾는 방법이 아니라 원하는 작업을 설명하면 됩니다.
사용자 흐름 스모크 테스트
Open http://localhost:3000, log in with the demo credentials, add the first product to the cart, and verify that the cart badge shows "1".
스타일 문제 디버그
Go to https://myapp.example.com/pricing and check why the "Pro" plan card overflows its container on a 1280px-wide viewport. Suggest a CSS fix.
콘솔 오류 수정
Navigate to http://localhost:5173, open every page linked from the main menu, collect all console errors, and fix them in the source code.
앱 매핑 및 문서화
Explore https://staging.example.com, follow all internal links up to two levels deep, and produce a Markdown document describing each page and its main features.
엔드투엔드 테스트 생성
Walk through the sign-up flow at http://localhost:3000/signup and write Cypress end-to-end tests covering the happy path and validation errors.
탐색적 테스트
Do 10 minutes of exploratory testing on http://localhost:8080: try edge-case inputs in every form you find and report anything that looks broken or inconsistent.
요구 사항
- Node.js 20 이상
- VS Code, Cursor, Windsurf, Claude Desktop, Goose, Junie 또는 기타 MCP 클라이언트