테스트 문서를 테스트 코드로 작성하기 – webapp-test-code-generator 스킬 소개

테스트 문서는 열심히 작성했는데, 매번 테스트 코드로 변환하는 게 귀찮으셨나요? 이제 AI가 대신 해드립니다.

이 글에서는 webapp-test-docs-writer로 작성한 테스트 문서를 Playwright/Jest 테스트 코드로 자동 변환하는 Claude Code 스킬 webapp-test-code-generator를 소개합니다.

---

TL;DR

• 테스트 문서(TC-*)를 실행 가능한 테스트 코드로 자동 변환
• Playwright (E2E/API) 및 Jest/Vitest (Unit/Integration) 지원
• 프레임워크 자동 감지로 적절한 템플릿 적용
• GitHub 저장소: greeun/webapp-test-code-generator

---

왜 이 스킬이 필요한가?

테스트 문서와 테스트 코드 사이의 간극

QA 프로세스에서 테스트 문서 작성과 테스트 코드 구현은 별개의 작업입니다. 보통 다음과 같은 흐름을 거칩니다:

문제점

문제	설명	영향
반복 작업	같은 내용을 문서와 코드에 두 번 작성	시간 낭비
불일치 위험	문서와 코드가 달라지는 경우 발생	품질 저하
생산성 저하	단순 변환 작업에 시간 소모	개발 지연
일관성 부족	개발자마다 다른 테스트 스타일	유지보수 어려움

해결책: 자동화된 테스트 코드 생성

---

스킬 구조

워크플로우

지원 테스트 유형

테스트 ID	유형	프레임워크	출력 파일
TC-E2E-*	E2E 테스트	Playwright	*.spec.ts
TC-API-*	API 테스트	Playwright	*.api.spec.ts
TC-UNIT-*	단위 테스트	Jest / Vitest	*.test.ts
TC-INT-*	통합 테스트	Jest / Vitest	*.integration.test.ts
TC-SEC-*	보안 테스트	Playwright	*.security.spec.ts

프레임워크 자동 감지

스킬은 프로젝트 설정 파일을 분석하여 적절한 테스트 프레임워크를 자동으로 선택합니다:

---

입력 형식

webapp-test-docs-writer가 생성하는 표준 테스트 문서 형식을 입력으로 받습니다:

## TC-API-001: User login with valid credentials

| Item | Content |
|------|---------|
| **Priority** | Critical |
| **Preconditions** | - User exists in DB<br>- API server running |
| **Test Data** | `{"email": "te**@*****le.com", "password": "Pass123!"}` |

### Test Steps

| # | Step | Expected Result |
|---|------|-----------------|
| 1 | POST /api/auth/login with credentials | 200 OK |
| 2 | Check response body | Contains accessToken |
| 3 | Verify token validity | Token is valid JWT |

입력 요소 매핑

문서 요소	코드 변환	예시
TC-* ID	test() 함수명	test('TC-API-001: ...')
Preconditions	beforeEach() 훅	beforeEach(async () => {...})
Test Steps	순차 실행 코드	// Step 1: POST...
Expected Results	expect() 단언	expect(status).toBe(200)
Test Data	테스트 픽스처	const data = {...}

---

출력 예시

API 테스트 (Playwright)

import { test, expect } from '@playwright/test';

test.describe('Login - Normal Login', () => {
  test('TC-API-001: User login with valid credentials', async ({ request }) => {
    const credentials = {
      email: 'te**@*****le.com',
      password: 'Pass123!'
    };

    // Step 1: POST /api/auth/login
    const response = await request.post('/api/auth/login', {
      data: credentials
    });
    expect(response.status()).toBe(200);

    // Step 2: Check response body
    const body = await response.json();
    expect(body).toHaveProperty('accessToken');

    // Step 3: Verify token validity
    expect(body.accessToken.split('.').length).toBe(3);
  });
});

E2E 테스트 (Playwright)

import { test, expect } from '@playwright/test';

test.describe('Login Page - E2E', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/login');
  });

  test('TC-E2E-001: Redirect to main page after successful login', async ({ page }) => {
    await page.fill('[name="email"]', 'te**@*****le.com');
    await page.fill('[name="password"]', 'Pass123!');
    await page.click('button[type="submit"]');
    await expect(page).toHaveURL('/main');
  });
});

Unit 테스트 (Jest)

import { describe, test, expect } from '@jest/globals';
import { validateEmail } from '../utils/validators';

describe('Email Validator', () => {
  test('TC-UNIT-001: Validate correct email format', () => {
    expect(validateEmail('te**@*****le.com')).toBe(true);
  });

  test('TC-UNIT-002: Validate incorrect email format', () => {
    expect(validateEmail('invalid-email')).toBe(false);
  });
});

---

생성되는 파일 구조

project/
├── tests/
│   ├── docs/                     # 테스트 문서 (입력)
│   │   └── login-test-cases.md
│   │
│   ├── e2e/                      # E2E 테스트
│   │   └── login.spec.ts
│   │
│   ├── api/                      # API 테스트
│   │   └── auth.api.spec.ts
│   │
│   ├── unit/                     # 단위 테스트
│   │   └── validators.test.ts
│   │
│   └── integration/              # 통합 테스트
│       └── auth.integration.test.ts
│
└── playwright.config.ts          # 프레임워크 설정

---

사용법

설치

# 저장소 클론
git clone https://github.com/greeun/webapp-test-code-generator.git

# 심볼릭 링크 생성
ln -sf "$(pwd)/webapp-test-code-generator" ~/.claude/skills/webapp-test-code-generator

트리거 키워드

다음 키워드로 스킬을 활성화할 수 있습니다:

언어	키워드
English	test code, implement tests, generate tests
한글	테스트 코드 생성, 테스트 구현, TC-* 구현

실제 사용 예시

---

관련 스킬

스킬	역할	연계
webapp-test-docs-writer	테스트 시나리오/케이스 문서 작성	입력 제공
webapp-test-code-generator	테스트 코드 생성 (현재 스킬)	변환
smart-test-runner	테스트 실행 및 실패 재시도	실행
webapp-testing	Playwright 기반 웹앱 테스트	도구

---

팁

---

효과

지표	Before	After	개선
테스트 코드 작성 시간	30분/케이스	5분/케이스	83% 감소
문서-코드 일관성	수동 검증	자동 보장	100% 보장
코드 스타일 통일	개발자별 상이	템플릿 기반	표준화

---

링크

• GitHub 저장소: greeun/webapp-test-code-generator
• 영문 문서: README.md
• 한글 문서: README.ko.md

---

마치며

webapp-test-code-generator는 테스트 문서 작성과 테스트 코드 구현 사이의 반복적인 변환 작업을 자동화합니다. webapp-test-docs-writer와 함께 사용하면 테스트 워크플로우 전체를 AI로 가속화할 수 있습니다.

테스트 자동화의 첫 걸음, 지금 시작해보세요!