TestSprite MCP Server: 완전한 개발자 리뷰 — React+TypeScript 테스트와 로케일 처리 경험 (인도네시아)

Source: Dev.to

테스트된 프로젝트

• 애플리케이션: 로컬 e‑commerce
• 스택: React 18 + TypeScript + Vite + Material UI + Node.js 백엔드

사용된 IDE

• Cursor와 TestSprite MCP Server

설치 방법

// Tambahkan ke Cursor MCP config
{
  "mcpServers": {
    "TestSprite": {
      "command": "npx",
      "args": ["@testsprite/testsprite-mcp@latest"],
      "env": {
        "API_KEY": "your-api-key"
      }
    }
  }
}

설치가 완료되면, Cursor 채팅에 프롬프트를 하나 입력하면 됩니다:

Can you test this project with TestSprite?

TestSprite 자동 워크플로우 (8단계)

1. Bootstrap environment – 포트 감지, 프로젝트 유형 (프론트엔드), 범위 (코드베이스)
2. Baca PRD – 업로드된 문서에서 요구사항 파싱
3. Analisis kode – 전체 구조, 프레임워크, 기능 스캔
4. Generate Normalized PRD – 원본 PRD를 기반으로 한 TestSprite 표준 포맷 생성
5. Generate test plan – 4가지 카테고리에서 자동으로 18개의 테스트 케이스 생성
6. Generate kode tes – 각 테스트 케이스에 대한 Playwright Python 스크립트 생성
7. Eksekusi di cloud – 격리된 샌드박스에서 실행, 완전한 결과 제공
8. Laporan & auto‑fix – 실패한 테스트 케이스별 구체적인 개선 권고 제공

Hasil tes proyek saya

실패한 여섯 개의 테스트는 모두 구체적인 개선 권고 사항을 가지고 있습니다 — 단순히 “테스트 실패”가 아니라 “컴포넌트 X가 셀렉터 Y에서 발견되지 않음, 속성 id Z를 추가하세요”.

저는 테스트 코드를 한 줄도 작성할 필요가 없습니다. TestSprite는 코드베이스를 분석하고, 자체 PRD를 만든 뒤 18개의 관련 테스트 케이스를 생성합니다 — 제가 생각하지 못했던 시나리오도 포함해서, 예를 들어:

• 보호된 라우트에서 인증되지 않은 사용자를 리다이렉트
• 관리자 패널 접근 제어
• 특수 문자를 포함한 엣지 케이스 폼 검증

보통 전용 QA가 없는 인도네시아 개발자들에게 이것은 게임 체인저.

생성된 테스트 코드 예시

모든 생성된 테스트 코드는 testsprite_tests/ 폴더에 저장되며 언제든 재실행할 수 있는 Playwright Python 형식입니다.

# TC001_Login_success_with_valid_test_credentials.py
import asyncio
from playwright import async_api

async def run_test():
    pw = await async_api.async_playwright().start()
    browser = await pw.chromium.launch(headless=True)
    context = await browser.new_context()
    page = await context.new_page()

    await page.goto("http://localhost:5174", wait_until="commit", timeout=10000)

    # Navigate to login page
    elem = page.locator('xpath=html/body/div/header/div/a[3]').nth(0)
    await elem.click(timeout=5000)

    # Fill credentials
    await page.locator('input[name="username"]').fill('test@example.com')
    await page.locator('input[name="password"]').fill('testpass123')
    await page.locator('button[type="submit"]').click()

    # Assert redirect ke product catalog
    assert await page.title() == 'Product Catalog'

asyncio.run(run_test())

깨끗하고 구조화되어 있으며 바로 CI/CD 파이프라인에 통합할 수 있습니다.

자동 “Fix” 상호작용

제가 수정을 요청했을 때:

Please fix the codebase based on TestSprite testing results.

AI는 단순히 “제안”하는 것이 아니라 바로 코드를 수정합니다. 예시: TC005 (Admin Panel — Delete Button) 테스트가 #admin-delete-btn 셀렉터를 찾지 못해 실패했습니다. AI는 올바른 컴포넌트에 정확한 ID를 가진 버튼을 추가했습니다.

Source: …

로케일 처리에 관한 중요한 발견

1. 날짜 형식

• 문제: TestSprite가 MM/DD/YYYY(미국) 형식을 전제로 테스트 케이스를 생성합니다. 인도네시아 애플리케이션은 DD/MM/YYYY 혹은 “2 Mei 2026”와 같은 자연스러운 형식을 사용합니다.

• 예시 (생성된, 잘못된):

  # US format — 인도네시아에서는 잘못됨
  assert "05/02/2026" in order_date_text  # MM/DD/YYYY

• 올바른 예시:

  # DD/MM/YYYY
  assert "02/05/2026" in order_date_text
  # 혹은 자연스러운 형식
  assert "2 Mei 2026" in order_date_text

• 영향: 실제로는 코드 버그가 아니라 로케일 불일치 때문에 6개 테스트 중 2개가 false positive로 “실패”합니다.

• 제안: 부트스트랩 설정에 로케일 옵션을 추가합니다.

  testsprite_bootstrap_tests({
    localPort: 5173,
    type: "frontend",
    locale: "id-ID",   // ← 필요한 로케일
    timezone: "Asia/Jakarta"
  })

2. 통화 형식 (루피아)

• 문제: TestSprite가 $150.00(미국) 형식을 전제로 어설션을 생성합니다. 인도네시아 애플리케이션은 Rp 150.000(천 단위 구분점은 점, 소수점은 콤마)으로 표시합니다.

• 예시 (생성된, 잘못된):

  price_text = await page.locator('.product-price').text_content()
  assert "$" in price_text  # ← 인도네시아 애플리케이션에서는 항상 실패

• 올바른 예시:

  assert "Rp" in price_text or "IDR" in price_text

• 우회 방법: 통화와 관련된 4개의 테스트 파일을 수동으로 수정했습니다. 이상적으로는 TestSprite가 애플리케이션 코드에서 통화 형식(예: “Rp” 또는 “IDR”)을 감지하고 어설션을 자동으로 맞추어야 합니다.

3. 비 ASCII 문자

TestSprite는 Ä, ñ, é, â와 같은 비 ASCII 입력에 대해 잘 작동합니다. 인도네시아 사용자 이름에 해당하는 문자들을 검증하는 전용 테스트 케이스도 포함되어 있습니다.

다른 대안과의 비교

결론

TestSprite MCP Server는 QA 프로세스를 크게 가속화하며, 특히 인도네시아의 소규모 팀이나 솔로 개발자에게 유용합니다. 부트스트랩 단계에서 로케일 지원(날짜, 통화, 시간대)을 추가함으로써, 이 도구는