Vibetest MCP 서버 사용: AI 기반 QA 테스트

Vibetest-use MCP를 사용하여 성가신 웹사이트 버그를 잡을 준비가 되셨나요? Browser-Use 기반의 이 오픈 소스 보석을 사용하면 AI 에이전트를 활용하여 사이트를 크롤링하고 404 오류, 작동하지 않는 버튼, UI 결함을 1분 안에 찾아낼 수 있습니다. 저는 GitHub에서 이것을 발견했는데, 자동화된 테스트에 있어서 완전히 판도를 바꾸는 것입니다. 단 하나의 명령으로 여러 에이전트를 실행하여 로컬 또는 라이브 사이트에 부하 테스트를 수행할 수 있습니다. 이 튜토리얼에서는 Vibetest-use MCP를 설정하고, 로컬 또는 라이브 사이트에서 테스트를 실행하며, QA(품질 보증) 프로세스를 아주 쉽게 만드는 방법을 보여드리겠습니다. 버그를 박멸해 봅시다!

💡

API를 사용하거나 프로젝트를 문서화하고 계신가요? Vibetest-use MCP 워크플로우에 완벽한 APIdog를 사용하여 API 문서를 손쉽게 설계, 테스트 및 공유하세요!

button

Vibetest-use MCP가 QA 슈퍼히어로인 이유

Vibetest-use MCP는 Browser-Use 기반 도구로, AI 에이전트를 배포하여 웹사이트를 크롤링하고 깨진 링크, 응답하지 않는 버튼 또는 UI 오류와 같은 문제를 표시함으로써 QA 테스트를 자동화합니다. MCP(Model Context Protocol)를 기반으로 구축되었으며, Browser-Use와 통합되어 Playwright를 통해 브라우저(Chrome, Firefox 등)를 제어하여 철저한 테스트를 보장합니다. GitHub 저장소는 https://example.com과 같은 라이브 사이트 또는 localhost:3000과 같은 로컬 설정 등 모든 URL을 테스트할 수 있는 기능을 강조하며, 더 깊은 스캔을 위해 구성 가능한 에이전트 수(예: 3, 5, 10)를 지원합니다. 개발 사이트 테스트부터 프로덕션 애플리케이션 테스트까지, Vibetest-use MCP는 QA를 식은 죽 먹기로 만듭니다.

Vibetest-use MCP 설정하기

Vibetest-use MCP를 실행해 봅시다. 초보자도 쉽게 따라할 수 있으며, 명확하게 설명해 드리겠습니다!

1. 저장소 복제 및 가상 환경 설정:

저장소를 복제하고 Python 환경을 준비합니다:

git clone https://github.com/browser-use/vibetest-use.git
cd vibetest-use
uv venv
source .venv/bin/activate  # macOS/Linux
.venv\Scripts\activate     # Windows
uv pip install -e .

이것은 종속성을 설치하고 MCP 서버 환경을 설정합니다.

2. 환경 변수 구성:

Vibetest-use MCP는 일부 기능을 위해 Google API 키가 필요합니다. 이를 내보내거나 .env에 추가합니다:

export GOOGLE_API_KEY="your_google_api_key_here"

또는 .env 파일을 생성합니다:

GOOGLE_API_KEY=your_google_api_key_here

console.cloud.google.com에서 키를 얻을 수 있습니다.

3. MCP 서버 실행:

서버를 시작합니다:

.venv/bin/vibetest-mcp

이것은 테스트 명령을 받을 준비가 된 MCP 서버를 실행합니다.

저는 이것을 10분 만에 설정했습니다. 빠르고 간단했습니다!

Vibetest-use MCP의 사용 사례 예시

Vibetest-use MCP로 테스트할 준비가 되셨나요? 버그를 빠르게 잡는 세 가지 방법이 여기 있습니다!

1. 여러 에이전트로 라이브 웹사이트 테스트:

https://example.com과 같은 라이브 사이트를 6개의 에이전트로 테스트합니다:

vibetest my website with 6 agents: https://example.com

5개의 Browser-Code 에이전트가 동시에 크롤링하여 깨진 링크, UI 버그 또는 접근성 문제를 확인합니다. "404 at /page-not-found, unresponsive button at /submit"와 같은 출력을 예상할 수 있습니다.

2. 로컬호스트 개발 사이트 테스트:

로컬 개발 서버(예: localhost:3000)를 테스트합니다:

run vibetest on localhost:3000

이것은 테스트 사이트에서 제가 발견한 잘못 정렬된 div와 같은 문제를 초기에 잡습니다!

3. 사용자 정의 에이전트 수로 헤드리스 테스트:

CI/CD를 위해 10개의 에이전트로 헤드리스 모드를 실행합니다:

run a headless vibetest on localhost:8080 with 10 agents

헤드리스 모드는 브라우저가 보이지 않는 상태로 실행되며 결과를 로깅합니다(예: --output results.json). 자동화된 파이프라인에 완벽합니다.

이 테스트들은 각각 60초 미만이 걸렸습니다. Vibetest-use MCP는 속도광입니다!

Vibetest-use MCP를 Claude Code Desktop과 통합하기

Claude Code Desktop에서 Vibetest-use MCP 테스트를 실행하고 싶으신가요? 통합하는 방법은 다음과 같습니다.

1. Claude Desktop에 Vibetest MCP 서버 추가:

Claude CLI를 사용합니다:

claude mcp add vibetest /full/path/to/vibetop-use/.venv/bin/vibetest-mcp -e GOOGLE_API_KEY="your_google_api_key"

이것은 Claude Desktop에 서버를 등록하고 Google API 키를 전달합니다.

2. 연결 확인:

Claude Desktop을 열고 다음을 입력합니다:

/mcp

vibetest 서버가 연결됨으로 표시되는지 확인합니다.

3. Vibetop 명령 실행:

Claude Desktop에서 다음을 입력합니다:

Vibetest my website with 5 agents: https://example.com
Run vibetop on localhost:3000

Claude는 명령을 MCP 서버로 전달하고 테스트 결과를 반환합니다.

저는 Claude Desktop을 통해 사이트를 테스트했는데, 즉시 양식 버그를 표시했습니다. 정말 멋집니다!

Vibetest-use MCP를 Cursor와 함께 사용하기

Cursor의 세련된 인터페이스를 선호하시나요? 테스트를 위해 Vibetest-use MCP를 설정하는 방법은 다음과 같습니다.

1. Cursor 설정 UI를 통해 MCP 서버 추가:

Cursor 설정 > MCP (왼쪽 사이드바)를 엽니다.
서버 추가 또는 "+" 버튼을 클릭합니다.
이 구성을 추가합니다 (경로 및 키 조정):

{
  "mcpServers": {
    "vibetest": {
      "command": "/full/path/to/vibetop-use/.venv/bin/vibetest-mcp",
      "env": {
        "GOOGLE_API_KEY": "your_google_api_key"
      }
    }
  }
}

필요한 경우 저장하고 Cursor를 다시 시작합니다.

2. Cursor에서 Vibetest 명령 사용:

Cursor의 채팅 또는 명령 인터페이스에서 다음을 시도해 보세요:

Vibetest my website with 5 agents: https://example.com
Run vibetest on localhost:3000
Run a headless vibetest on localhost:8080 with 10 agents

Cursor는 MCP 서버와 통신하여 결과를 인라인으로 표시합니다.

저는 Cursor에서 헤드리스 테스트를 실행했는데, JSON 출력이 아주 명확했습니다. QA의 천국이었습니다!

필요에 맞게 Vibetest-use MCP 사용자 정의하기

Vibetest-use MCP를 수정하고 싶으신가요? 나만의 것으로 만드는 방법은 다음과 같습니다.

1. 에이전트 수 조정:

빠른 스캔을 위해 --agents 2를 사용하거나 심층 테스트를 위해 --agents 10을 사용합니다. 에이전트가 많을수록 커버리지가 좋지만 메모리 사용량이 증가합니다.

2. 특정 기능 타겟팅:

특정 흐름(예: 결제 프로세스)을 테스트하기 위해 prompts.py를 편집합니다:

prompt = "Vibetest with 3 the checkout flow on {website}. Verify cart updates and payment buttons."

실행합니다:

uv run vibetest --url https://shop.com --prompt "Test checkout flow"

3. CI/CD와 통합 (Ubuntu):

GitHub Actions에 추가합니다:

name: QA with Vibetest-use
on: [push]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: |
          curl -LsSf https://astral.sh/uv/install.sh | sh
          uv venv
          source .venv/bin/activate
          uv pip install -e .
          uv pip install playwright
          uv run playwright install chromium
          uv run vibetest --url http://localhost:3000 --agents 5 --output results.json
      env:
        GOOGLE_API_KEY: ${{ secrets.GOOGLE_API_KEY }}

4. DeepSeek을 사용하여 스마트하게:

DeepSeek과 페어링합니다:

uv run vibetest --url https://example.com --llm deepseek-chat

복잡한 테스트에 대한 추론 능력을 향상시킵니다.

Vibetest-use MCP 기능 살펴보기

Vibetest-use MCP는 QA에 유용한 기능이 가득합니다. 다음을 확인해 보세요:

병렬 테스트: X에서 홍보된 것처럼 60초 미만의 스캔을 위해 10개 이상의 에이전트를 실행합니다.

2. 크로스 브라우저 테스트: playwright.config.ts를 통해 Firefox/Safari를 테스트합니다:

{ browserName: 'firefox' }

3. 심층 연구 모드: UX 분석을 위해 mcp-browser-cli --deep-research를 사용하여 Markdown 보고서를 저장합니다.

4. 커뮤니티: Browser-Code의 Discord 또는 GitHub(별 38개)에 참여하여 아이디어를 공유합니다.

저는 테스트에서 Firefox에서만 발생하는 결함을 잡았습니다. Vibetest-use MCP는 QA 챔피언입니다!

마무리: Vibetest-use MCP 마스터하기

이제 Vibetest-use MCP를 사용하여 프로처럼 QA(품질 보증)를 자동화했습니다! 설정부터 라이브 사이트, 로컬 서버 테스트, Claude Desktop 또는 Cursor와의 통합까지, 앱을 버그 없이 유지할 준비가 되었습니다. 더 많은 에이전트, DeepSeek 또는 CI/CD를 실험해보고, APIdog로 API 문서를 꼭 작성하세요. X 또는 GitHub에서 Vibetest-use MCP 성공 사례를 공유해 주세요. 여러분의 QA 실력이 급상승하는 것을 보게 되어 기쁩니다! 🚀

button