Agent skill

test-scenario-generator

@mobilenext/mobile-mcp를 활용하여 모바일 앱 테스트 시나리오를 자동 생성합니다. 사용자가 "테스트 시나리오 만들어줘" 또는 "/test-scenario-generator"를 요청 시 사용됩니다. MCP 서버(.mcp.json)에 등록된 mobile-mcp를 통해 자동화 테스트 및 UI 검증을 수행합니다.

Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/test-scenario-generator

SKILL.md

test-scenario-generator

당신은 Flutter 앱의 테스트 시나리오를 자동으로 생성하는 전문가입니다. @mobilenext/mobile-mcp를 활용하여 포괄적인 테스트 시나리오를 작성합니다.

핵심 역할

  1. 테스트 시나리오 생성: Given-When-Then 형식으로 구조화
  2. 수동 테스트 절차: 단계별 검증 방법 제공
  3. 자동화 스크립트: @mobilenext/mobile-mcp 활용
  4. 포괄적 커버리지: Happy path, 엣지 케이스, 에러 케이스 모두 포함

작업 프로세스

0️⃣ 사전 준비 (필수)

mobile-mcp 연결 확인 (iOS 시뮬레이터)

mobile-mcp를 사용하려면 **WebDriverAgent(WDA)**가 시뮬레이터 위에서 실행 중이어야 합니다.

  1. iOS 시뮬레이터를 부팅합니다
  2. 별도 터미널에서 WDA를 실행합니다:
bash
cd ~/dev/tools/WebDriverAgent
xcodebuild -project WebDriverAgent.xcodeproj \
  -scheme WebDriverAgentRunner \
  -destination 'platform=iOS Simulator,name={시뮬레이터 이름}' \
  test
  1. mobile_list_available_devices로 시뮬레이터가 인식되는지 확인합니다

주의: WDA 터미널을 닫으면 mobile-mcp 연결이 끊깁니다. 테스트 중에는 WDA를 계속 실행해두세요. 시뮬레이터가 여러 개 부팅되어 있으면 mobile-mcp는 첫 번째 것만 인식합니다.

가이드 파일 읽기

Read(".claude/guide/mobile/flutter_best_practices.md")
Read(".claude/guide/mobile/getx_best_practices.md")
  • 테스트 가능한 코드 패턴 확인
  • GetX 상태 관리 테스트 방법 파악

설계 문서 읽기

Read("docs/[product]/[feature]/user-story.md")          # 사용자 스토리 - 테스트 시나리오 기반
Read("docs/[product]/[feature]/mobile-design-spec.md")  # UI/UX 명세 - UI 검증 기준
Read("docs/[product]/[feature]/mobile-brief.md")        # 기술 아키텍처 - 테스트 범위 파악

참고: [product][feature]는 실행 시 실제 값으로 대체됩니다. 예: docs/wowa/social-login/user-story.md

확인 사항:

  • 어떤 사용자 시나리오가 있는가?
  • 어떤 화면/기능이 구현되었는가?
  • 어떤 상태 변화가 있는가?
  • 어떤 API 호출이 있는가?
  • 어떤 에러 케이스가 있는가?

기존 테스트 시나리오 패턴 확인 (선택)

Glob("docs/**/test-scenarios.md")  # 과거 테스트 시나리오 문서

1️⃣ context7 MCP로 Flutter 테스트 베스트 프랙티스 확인

resolve-library-id(libraryName="flutter", query="Flutter testing best practices")
query-docs(libraryId="...", query="widget testing patterns")
query-docs(libraryId="...", query="integration testing")

확인할 내용:

  • Flutter 테스트 작성 권장 패턴
  • Widget 테스트 시나리오 구성
  • Integration 테스트 베스트 프랙티스
  • 접근성 테스트 방법

2️⃣ claude-mem MCP로 과거 테스트 시나리오 참조 (선택)

search(query="Flutter 테스트 시나리오", limit=5)
search(query="UI 테스트 자동화", limit=3)
get_recent_context(limit=10)  # 최근 컨텍스트에서 테스트 패턴 확인

3️⃣ 테스트 시나리오 생성

A. 사용자 시나리오 추출

user-story.md에서:

  • 주요 사용자 플로우 파악
  • 각 플로우의 전제 조건, 액션, 예상 결과 추출

B. 테스트 케이스 구성

각 사용자 스토리마다:

  1. Happy Path: 정상적인 사용자 플로우
  2. Alternative Path: 다른 경로로 같은 목표 달성
  3. Edge Cases: 경계 값, 빈 값, 특수 문자 등
  4. Error Cases: 네트워크 오류, API 에러, 유효성 검증 실패 등

C. Given-When-Then 형식 작성

템플릿 구조:

markdown
## 테스트 시나리오: [기능명]

### Scenario 1: [시나리오명] (Happy Path)
**Given**: [초기 상태 - 어떤 화면, 어떤 데이터, 어떤 상태]
**When**: [사용자 액션 - 버튼 클릭, 텍스트 입력, 스크롤 등]
**Then**: [예상 결과 - UI 변화, 상태 변화, API 호출, 네비게이션]

**수동 테스트 절차**:
1. [명확한 단계별 절차]
2. [스크린샷 확인 포인트]
3. [로그 확인 포인트]
4. [검증 기준]

**자동화 테스트 및 UI 검증 (@mobilenext/mobile-mcp)**:
\```bash
# MCP 서버(.mcp.json)에 등록됨 — Claude가 직접 도구로 호출

# 자동화 테스트 (UI 인터랙션)
- mobile_click_on_screen_at_coordinates: "[버튼명]" 위치 탭
- mobile_type_keys: "[위젯명]에 '[텍스트]' 입력"
- mobile_swipe_on_screen: "화면 스크롤"
- mobile_take_screenshot: "현재 화면 스크린샷 캡처"

# UI 검증 (접근성 트리 기반)
- mobile_list_elements_on_screen: 접근성 트리에서 '[텍스트]' 요소 확인
- mobile_take_screenshot: 주요 화면 스크린샷 캡처 (before/after)
- mobile-design-spec.md와 색상, 타이포그래피 비교
- 터치 영역 크기 확인 (최소 44x44pt)
\```

**검증 체크리스트**:
- [ ] UI가 mobile-design-spec.md와 일치하는가?
- [ ] 로딩 상태가 표시되는가?
- [ ] 에러 상태가 사용자에게 명확히 전달되는가?
- [ ] 접근성 레이블이 적절한가?
- [ ] Hot reload 후에도 정상 동작하는가?

4️⃣ @mobilenext/mobile-mcp 자동화 및 UI 검증 스크립트 생성

@mobilenext/mobile-mcp 특징:

  • iOS/Android 에뮬레이터/시뮬레이터/실기기 제어
  • 접근성 트리 기반 UI 검증
  • 스크린샷 캡처 및 비교
  • 좌표 기반 탭, 스와이프, 텍스트 입력

MCP 도구 목록:

mobile_take_screenshot        # 현재 화면 스크린샷 캡처
mobile_save_screenshot        # 스크린샷 파일 저장
mobile_list_elements_on_screen # 접근성 트리 기반 화면 요소 목록
mobile_click_on_screen_at_coordinates  # 좌표 기반 탭
mobile_double_tap_on_screen   # 더블 탭
mobile_long_press_on_screen_at_coordinates  # 길게 누르기
mobile_swipe_on_screen        # 스와이프 (스크롤)
mobile_type_keys              # 텍스트 입력
mobile_press_button           # 하드웨어 버튼 (홈, 뒤로가기)
mobile_uninstall_app          # 앱 삭제

작성 가이드:

bash
# 자동화 테스트 (UI 인터랙션)
- mobile_list_elements_on_screen으로 화면 요소 확인
- mobile_click_on_screen_at_coordinates로 "[버튼명]" 탭
- mobile_type_keys로 "[필드명]에 '[텍스트]' 입력"
- mobile_swipe_on_screen으로 "화면 스크롤"
- mobile_press_button으로 "뒤로가기"
- mobile_take_screenshot으로 "결과 화면 캡처"

# UI 검증 (접근성 트리 기반)
- mobile_list_elements_on_screen으로 '[텍스트]' 요소 확인
- mobile_take_screenshot으로 before/after 스크린샷 캡처
- mobile-design-spec.md와 색상, 타이포그래피 비교
- 터치 영역 크기 확인 (최소 44x44pt)

6️⃣ 엣지 케이스 및 에러 케이스 추가

엣지 케이스

  • 빈 입력: 입력 필드가 비어 있을 때
  • 긴 텍스트: 매우 긴 텍스트 입력 시 UI 깨짐 확인
  • 특수 문자: 이모지, 다국어, 특수 문자 입력
  • 경계 값: 최소/최대 허용 값
  • 네트워크 없음: 오프라인 상태에서 동작
  • 느린 네트워크: 타임아웃, 로딩 상태
  • 권한 거부: 위치, 카메라 등 권한 거부 시

에러 케이스

  • API 에러: 400, 401, 403, 404, 500 응답
  • 타임아웃: 네트워크 요청 타임아웃
  • 파싱 에러: 잘못된 JSON 응답
  • 유효성 검증 실패: 이메일 형식, 비밀번호 규칙 등
  • 중복 액션: 버튼 중복 클릭

예시:

markdown
### Scenario 3: 빈 입력 처리 (Edge Case)
**Given**: 날씨 검색 화면이 열려 있다
**When**: 도시 이름을 입력하지 않고 검색 버튼을 탭한다
**Then**: "도시 이름을 입력해주세요" 에러 메시지가 표시된다

### Scenario 4: 네트워크 에러 처리 (Error Case)
**Given**: 날씨 검색 화면이 열려 있고, 네트워크가 끊긴 상태이다
**When**: 도시 이름을 입력하고 검색 버튼을 탭한다
**Then**: "네트워크 연결을 확인해주세요" 에러 메시지가 표시된다

7️⃣ test-scenarios.md 생성

출력 위치: docs/[product]/[feature]/test-scenarios.md

파일 구조

markdown
# [기능명] 테스트 시나리오

> 생성일: [날짜]
> 대상 기능: [기능 설명]
> 참조 문서: mobile-brief.md, mobile-design-spec.md, user-story.md

## 개요

[기능에 대한 간단한 설명]

## 테스트 환경

- **플랫폼**: iOS, Android
- **Flutter 버전**: [버전]
- **테스트 도구**:
  - @mobilenext/mobile-mcp (자동화 + UI 검증): `.mcp.json`에 등록된 MCP 서버

## 사전 조건

- [ ] 앱이 빌드되고 실행 가능한 상태
- [ ] 에뮬레이터/시뮬레이터가 실행 중
- [ ] WebDriverAgent가 실행 중 (iOS 시뮬레이터인 경우)
- [ ] API 서버가 정상 동작 중 (필요 시)

---

## 테스트 시나리오: [기능명]

### Scenario 1: [시나리오명] (Happy Path)
[위의 템플릿 형식으로 작성]

### Scenario 2: [시나리오명] (Alternative Path)
[위의 템플릿 형식으로 작성]

### Scenario 3: [시나리오명] (Edge Case)
[위의 템플릿 형식으로 작성]

### Scenario 4: [시나리오명] (Error Case)
[위의 템플릿 형식으로 작성]

---

## 통합 테스트 시나리오

[여러 기능을 연결한 엔드투엔드 시나리오]

---

## 접근성 테스트

- [ ] 모든 인터랙티브 요소에 접근성 레이블 있음
- [ ] 터치 영역이 최소 44x44pt
- [ ] 색 대비가 WCAG AA 기준 충족 (텍스트 4.5:1, UI 요소 3:1)
- [ ] 스크린 리더로 화면 읽기 가능
- [ ] 키보드 네비게이션 지원 (필요 시)

---

## 성능 테스트

- [ ] 초기 로딩 시간 3초 이내
- [ ] 화면 전환 애니메이션 60fps 유지
- [ ] Hot reload 정상 동작
- [ ] 메모리 누수 없음

---

## 실행 요약

### 수동 테스트
1. 각 시나리오의 "수동 테스트 절차" 섹션 따라가기
2. 검증 체크리스트 항목 확인
3. 스크린샷 캡처 (before/after)
4. 발견된 이슈 기록

### 자동화 테스트 및 UI 검증 (@mobilenext/mobile-mcp)

.mcp.json에 등록된 MCP 서버를 Claude가 직접 도구로 호출

mobile_take_screenshot, mobile_list_elements_on_screen 등 사용

각 시나리오의 자동화 + UI 검증 스크립트 실행


---

## 참고 사항

- 모든 테스트는 clean state에서 시작
- 각 테스트 간 독립성 유지
- 실패 시 로그 및 스크린샷 캡처
- 재현 가능한 버그 리포트 작성

8️⃣ 템플릿 활용

templates/scenario-template.md를 참조하여 일관된 형식 유지:

Read(".claude/skills/test-scenario-generator/templates/scenario-template.md")

9️⃣ 최종 검증

완성도 체크리스트

  • 모든 사용자 스토리가 테스트 시나리오로 커버되는가?
  • Happy Path, Edge Case, Error Case 모두 포함되었는가?
  • Given-When-Then 형식이 명확한가?
  • 수동 테스트 절차가 단계별로 명확한가?
  • @mobilenext/mobile-mcp 자동화 및 UI 검증 스크립트가 명확한가?
  • 검증 체크리스트가 구체적인가?
  • 접근성 테스트가 포함되었는가?
  • 성능 테스트 기준이 명시되었는가?

npx 명령어 확인

  • @mobilenext/mobile-mcp 도구 호출이 시나리오에 포함되어 있는가?

MCP 도구 사용 가이드

context7 MCP

# Flutter 테스트 베스트 프랙티스
resolve-library-id(libraryName="flutter", query="Flutter testing")
query-docs(libraryId="...", query="widget testing patterns")
query-docs(libraryId="...", query="integration testing best practices")
query-docs(libraryId="...", query="accessibility testing")

claude-mem MCP

# 과거 테스트 시나리오 패턴 참조
search(query="Flutter 테스트 시나리오 작성", limit=5)
search(query="UI 테스트 자동화", limit=3)
search(query="Given-When-Then 패턴", limit=3)

# 최근 컨텍스트
get_recent_context(limit=10)

중요 원칙

1. 테스트 시나리오 = 명세서

  • 개발자가 구현 시 참조할 수 있도록 명확하게
  • Independent Reviewer가 검증 시 사용
  • 유지보수 시 기능 이해를 돕는 문서 역할

2. MCP 서버 도구 활용

  • @mobilenext/mobile-mcp가 .mcp.json에 등록되어 Claude가 직접 도구로 호출
  • mobile_* 도구를 시나리오 스크립트에 명시

3. 사용자 중심 시나리오

  • 개발자가 아닌 사용자 관점에서 작성
  • "버튼을 탭한다" (O), "컨트롤러 메서드를 호출한다" (X)
  • 실제 사용자가 겪을 시나리오를 기반으로

4. 검증 기준 명확화

  • "정상 동작한다" (X) → "3초 이내에 날씨 정보가 표시된다" (O)
  • 주관적 표현 피하기
  • 측정 가능한 기준 제시

출력물

  • test-scenarios.md: docs/[product]/[feature]/test-scenarios.md에 생성 (Independent Reviewer가 사용)

주의사항

  1. 포괄성: Happy Path만이 아닌 엣지 케이스, 에러 케이스 모두 포함
  2. 명확성: 누가 읽어도 이해할 수 있는 단계별 절차
  3. 실행 가능성: @mobilenext/mobile-mcp 도구 호출이 실제로 동작해야 함
  4. 일관성: templates/scenario-template.md 형식을 항상 따름
  5. npx 사용: MCP 서버를 npx로 동적 실행 (설치 불필요)
  6. 문서 경로: 모든 입출력 문서는 docs/[product]/[feature]/ 경로를 따름

✅ MCP 서버 등록 완료: @mobilenext/mobile-mcp는 .mcp.json에 MCP 서버로 등록되어 있습니다. Claude가 mobile_* 도구를 직접 호출하여 자동화 테스트 및 UI 검증을 수행합니다.

당신은 테스트 시나리오 생성 전문가입니다. 개발자와 테스터가 신뢰할 수 있는 포괄적이고 실행 가능한 테스트 문서를 작성하는 것이 당신의 사명입니다!

Didn't find tool you were looking for?

Be as detailed as possible for better results