Claude Code Skills 테스팅 활용법

UI를 리팩토링할 때마다 망가지거나 로컬에서는 통과하지만 CI에서는 실패하는 불안정한 E2E 테스트에 지쳤다면, Claude Code Skills가 더 나은 방법을 제시합니다. 이러한 AI 기반 워크플로우는 단순히 테스트를 작성하는 것을 넘어, 테스트를 실행하고, 실패를 디버그하며, 깨진 선택자를 업데이트하고, 앱이 진화함에 따라 지속적으로 적응합니다.

💡

테스트 때문에 속도가 느려지시나요? Claude Code와 Apidog를 결합하여 풀스택 자동화 AI 기반 프런트엔드 테스트 + 시각적 API 디버깅을 경험해보세요. 두 가지 모두 무료로 사용해보세요: claude.ai 및 apidog.com. AI로 더 빠르게 빌드하세요.

웹 앱 테스트에는 단위 테스트, 통합 테스트, 컴포넌트 테스트, E2E 흐름 및 API 계약을 조정하는 작업이 포함됩니다. Claude Code Skills는 이 모든 것을 자동화합니다. 사용자가 무엇을 하는지 설명하면 Claude가 포괄적인 테스트 스위트를 생성하고, 실행하고, 실패를 수정하고, 결과를 보고합니다. 깨지기 쉬운 스크립트도, 수동 유지보수도 필요 없습니다. 그저 작동하는 테스트뿐입니다.

테스트를 위해 Claude Code Skills를 강력하게 만드는 요소:

자율적 실행: 명령어를 다시 입력할 필요 없이 테스트를 작성, 실행, 디버그, 수정합니다.
프레임워크 독립적: Jest, Vitest, Playwright, Cypress, Puppeteer와 완벽하게 작동합니다.
지능형 디버깅: 테스트 실패를 분석하고, 근본 원인을 제안하며, 수정 사항을 적용합니다.
UI 인식: DOM 변경을 감지하고, 깨진 로케이터를 업데이트하며, 선택자 취약성을 방지합니다.
풀스택: 한 세션에서 단위 테스트, 모의, E2E 흐름 및 API 유효성 검사를 처리합니다.

확장 가능한 테스트를 위해 Claude Code Skills를 활용하는 방법을 살펴보겠습니다.

테스트를 위한 Claude Code Skills 이해하기

테스팅 스킬이란 무엇인가요?

Claude Code Skills는 Claude Code의 테스트 기능을 확장하는 사용자 정의 가능한 재사용 가능한 AI 워크플로우입니다. 이를 지능적인 테스트 러너로 생각할 수 있습니다:

복잡한 다단계 테스트 시나리오를 자율적으로 실행합니다.
재시도 로직 및 타임아웃에 대한 상황 인식 결정을 내립니다.
파일에 접근하고, 명령을 실행하고, 테스트 출력을 분석하는 등의 작업을 수행합니다.
테스트 세션 전반에 걸쳐 상태를 유지합니다.
기존 테스트 프레임워크 및 CI/CD 도구와 통합됩니다.

엄격한 로직을 따르는 전통적인 테스트 스크립트와 달리, 스킬은 Claude의 추론 기능을 활용하여 엣지 케이스를 처리하고, 개선 사항을 제안하며, 변화하는 조건에 적응합니다.

스킬은 어떻게 작동하나요?

스킬은 여러 주요 메커니즘을 통해 작동합니다:

1. 사용자 호출 가능 명령어

# 슬래시 명령어로 스킬 실행
/run-unit-tests --coverage
/run-e2e-tests --env production
/fix-flaky-tests --retry 3

2. 허용된 도구

스킬은 사용할 수 있는 도구를 지정합니다:

Bash: 테스트 명령 실행
Read, Write, Edit: 테스트 파일 관리
Glob, Grep: 테스트 패턴 검색
WebFetch: 테스트 데이터 검색
Task: 복잡한 테스트 시나리오를 위한 하위 에이전트 생성

3. 라이프사이클 훅

스킬은 특정 시점에 작업을 트리거할 수 있습니다:

SessionStart: 스킬이 시작될 때
PreToolUse: 테스트를 실행하기 전
PostToolUse: 테스트 완료 후
Stop: 스킬이 종료될 때

4. 계획 파일

스킬은 마크다운 파일을 사용하여 테스트 진행 상황, 실패 및 개선 사항을 추적하며 상태를 유지합니다.

스킬이 웹 테스트에 뛰어난 이유

예상치 못한 조건에 직면하면 전통적인 테스트 스크립트는 쉽게 망가집니다. 스킬은 테스트에 지능을 부여합니다:

맥락적 이해: 테스트 출력을 읽고, 실패를 이해하고, 수정 사항을 제안할 수 있습니다.
적응적 행동: 다양한 프레임워크, 브라우저 및 환경에 적응합니다.
자기 문서화: 자연어 지침으로 테스트 워크플로우를 투명하게 만듭니다.
오류 복구: 불안정성을 진단하고 탄력적인 패턴을 제안할 수 있습니다.
지속적인 개선: 배포 패턴을 기반으로 테스트 커버리지를 개선합니다.

핵심 테스트 기능

1. 동적 테스트 생성

프롬프트: "사용자 결제 흐름에 대한 E2E 테스트를 작성하세요: 항목 추가, 할인 적용, 결제, 주문 확인."

Claude가 생성합니다:

// 실제 어설션이 포함된 완전한 Playwright 사양
// 크로스 브라우저 테스트 설정
// 실패 시 스크린샷 캡처
// 성능 어설션

프로덕션 준비 코드를 스캐폴딩하지 않습니다.

2. 실행 및 반복

# Claude Code 세션에서
> 결제 테스트를 실행하고 모든 실패를 수정합니다.

# Claude가 수행하는 작업:
npm test -- checkout.spec.js
# 결제 단계에서 테스트 실패
# Claude가 실패를 분석
# 모의(mock) 엔드포인트 업데이트
# 명시적 대기(explicit waits) 추가
# 테스트 재실행
# 모두 초록불 ✓

3. 프레임워크 지능

React + Jest? Claude는 `fireEvent`, `waitFor`, 화면 쿼리가 포함된 React Testing Library 테스트를 생성합니다.

Vue + Vitest? `mount`, 라이프사이클 훅, Vue 특정 패턴을 사용합니다.

Playwright? 탄력적인 선택자로 크로스 브라우저 사양을 생성합니다.

Claude는 프로젝트에서 사용하는 모든 프레임워크에 적응합니다.

4. 선택자 탄력성

HTML을 리팩토링할 때 Claude는 다음을 알고 있습니다:

// ❌ 취약함
getByXPath("//button[2]/span[1]")

// ✓ 탄력적
getByRole('button', { name: /checkout/i })
getByTestId('checkout-button')

탄력적인 패턴을 자동으로 제안하고 적용합니다.

5. 모의(Mock) 및 API 통합

Claude는 다음을 원활하게 결합합니다:

고립된 단위/통합 테스트를 위한 프런트엔드 모의(MSW)
계약 유효성 검사를 위한 API 테스트(Apidog)
스테이징 E2E 테스트를 위한 실제 백엔드

단일 프롬프트: "로그인 흐름을 테스트합니다. 인증 API를 모의(mock)합니다. 응답이 OpenAPI 스키마와 일치하는지 확인합니다."

테스트 스킬 구성

디렉토리 구조

테스트 스킬은 다음과 같은 레이아웃으로 .claude/skills/에 위치합니다:

.claude/
├── skills/
│   ├── unit-tests/
│   │   ├── SKILL.md              # 스킬 매니페스트
│   │   ├── planning.md           # 테스트 진행 상황 추적
│   │   └── patterns/             # 테스트 패턴
│   ├── e2e-tests/
│   │   ├── SKILL.md
│   │   └── scenarios/            # E2E 시나리오
│   └── api-tests/
│       └── SKILL.md
└── skills.md                     # 모든 스킬의 인덱스

SKILL.md 매니페스트

모든 스킬은 YAML 프런트매터로 시작하며, 그 뒤에 마크다운 지침이 따릅니다:

---
name: e2e-testing
version: "1.0.0"
description: 웹 애플리케이션을 위한 E2E 테스트
user-invocable: true
allowed-tools:
  - Bash
  - Read
  - Write
  - Grep
  - Glob
hooks:
  SessionStart:
    - matcher: command
      command: "echo '[E2E 테스트] 브라우저 자동화 테스트 시작 중...'"
  Stop:
    - matcher: command
      command: "echo '[E2E 테스트] 테스트 스위트 완료. 위 결과를 검토하세요.'"
---

# E2E 테스팅 스킬

Playwright를 사용한 웹 애플리케이션을 위한 포괄적인 End-to-End 테스트.

## 사용법

```bash
/e2e-tests                    # 모든 E2E 테스트 실행
/e2e-tests --headed          # 브라우저가 보이는 상태로 실행
/e2e-tests --project chrome  # 특정 브라우저 실행
/e2e-tests --grep login      # 특정 테스트 실행

이 스킬이 하는 일

테스트 실행

Playwright 초기화
브라우저 실행 (Chrome, Firefox, Safari)
테스트 사양 실행
실패 시 스크린샷 캡처
HTML 보고서 생성

실패 분석

오류 메시지 파싱
선택자 문제 식별
타임아웃 문제 감지
불안정한 테스트를 위한 수정 제안

보고서 생성

테스트 결과 요약
실패한 시나리오 목록
수정 단계 제공
test-reports/{timestamp}.md에 저장

Claude를 위한 지침

호출 시:

playwright.config.js 및 테스트 사양 확인
필터에 대한 명령줄 인수 파싱
적절한 옵션으로 Playwright 실행
실시간으로 테스트 실행 모니터링
발생 시 실패 분석
수정 사항 제안 (예: 선택자 업데이트, 대기 추가)
수정 사항으로 실패한 테스트 재실행
포괄적인 보고서 생성
상태 코드와 함께 종료 (0 = 통과, 1 = 실패)


---

## 첫 번째 테스팅 스킬 빌드하기

일반적인 브라우저 자동화 시나리오를 처리하는 E2E 테스트 러너라는 실용적인 스킬을 빌드해 봅시다.

### 1단계: 스킬 디렉토리 생성

```bash
mkdir -p .claude/skills/e2e-testing

2단계: 스킬 매니페스트 작성

.claude/skills/e2e-testing/SKILL.md 생성:

---
name: e2e-testing
version: "1.0.0"
description: E2E 브라우저 자동화 테스트
user-invocable: true
allowed-tools:
  - Bash
  - Read
  - Write
  - Grep
  - Glob
hooks:
  SessionStart:
    - matcher: command
      command: "echo '[E2E] Playwright 테스트 초기화 중...'"
  Stop:
    - matcher: command
      command: "echo '[E2E] 테스트 실행 완료'"
---

# E2E 테스팅 스킬

웹 애플리케이션을 위한 브라우저 자동화 테스트.

## 테스트 패턴

이 스킬은 다음 테스트 패턴을 지원합니다:

**내비게이션 테스트**
* 페이지 로드 및 리디렉션 확인
* 페이지 제목 및 URL 확인
* 브레드크럼 경로 유효성 검사

**폼 상호작용 테스트**
* 입력 필드 채우기
* 폼 제출
* 오류 메시지 유효성 검사
* 필드 유효성 검사 확인

**사용자 흐름 테스트**
* 완전한 사용자 여정 (로그인 → 대시보드 → 로그아웃)
* 다단계 워크플로우
* 상태 지속성

**크로스 브라우저 테스트**
* Chrome, Firefox, Safari
* 반응형 디자인
* 모바일 뷰포트

## 오류 처리 규칙

테스트 실패 시:

1. 선택자 문제인지 확인 → 선택자 업데이트
2. 타이밍 문제인지 확인 → 명시적 대기(explicit wait) 추가
3. 모의(mock) 문제인지 확인 → MSW 핸들러 확인
4. 환경 문제인지 확인 → 환경 변수 확인
5. 해결되지 않은 경우 → 상세 오류 로그 및 중지

## 지침

호출 시:

1. **구성 감지**
   * `playwright.config.js` 확인
   * 테스트 디렉토리 구조 식별
   * 명령줄 인수 파싱

2. **환경 준비**
   * 필요한 경우 브라우저 바이너리 설치
   * 환경 변수 로드
   * 모의(mock) 사용 시 MSW 초기화

3. **테스트 실행**
   * Playwright 테스트 명령 실행
   * 터미널로 출력 스트리밍
   * 실시간으로 실패 모니터링

4. **실패 분석**
   * 테스트 출력 및 오류 로그 읽기
   * 실패 유형 식별 (선택자, 타임아웃, 어설션)
   * 특정 수정 사항 제안

5. **수정 사항 적용**
   * 깨진 선택자 업데이트
   * 필요한 곳에 암시적 대기(implicit waits) 추가
   * 모의(mock) 응답 수정
   * 실패한 테스트 재실행

6. **보고서 생성**
   * 총 테스트 수, 통과, 실패 요약
   * 해결책과 함께 모든 실패 목록
   * HTML 보고서 생성
   * 터미널에 표시

7. **적절한 상태로 종료**
   * 모두 통과하면 0으로 종료
   * 하나라도 실패하면 1로 종료

3단계: 스킬 등록

.claude/skills.md에 추가:

# 사용 가능한 테스팅 스킬

## E2E 테스팅

### /e2e-tests
웹 애플리케이션을 위한 브라우저 자동화 테스트.
- **버전**: 1.0.0
- **사용법**: `/e2e-tests [--headed] [--project browser]`
- **언제 사용**: 배포 전, UI 변경 후
- **실행 시간**: 테스트 수에 따라 5-15분

4단계: 스킬 테스트

# Claude Code에서
/e2e-tests --headed

이제 Claude는 E2E 테스트를 실행하고, 브라우저를 관리하며, 실패를 분석합니다.

고급 테스트 패턴

패턴 1: 다중 프레임워크 테스트

Claude Code는 프레임워크에 따라 테스트 생성을 조정합니다:

## 자동 감지 및 프레임워크별 테스트

`package.json`에 다음이 포함된 경우:
- **React + Jest** → `fireEvent`, `waitFor`, 화면 쿼리를 사용하는 React Testing Library
- **Vue + Vitest** → `mount`, 라이프사이클 훅, 스토어 구독을 사용하는 Vue Test Utils
- **Playwright** → 탄력적인 선택자를 사용하는 크로스 브라우저 E2E
- **Cypress** → `cy.*` API를 사용하는 명령어 기반 자동화

Claude는 프레임워크를 자동으로 감지하고 적절한 테스트를 생성합니다.

예시: 동일한 프롬프트, 다른 출력:

# 프롬프트: "로그인 폼을 테스트하세요"

# React 출력:
# 사용: fireEvent.change(), screen.getByLabelText(), waitFor()

# Vue 출력:
# 사용: mount(), wrapper.vm, store.commit()

# Playwright 출력:
# 사용: page.getByLabel(), page.getByRole(), page.waitForURL()

패턴 2: 불안정한 테스트를 위한 스마트 재시도 로직

Claude Code는 불안정한 테스트를 지능적으로 진단하고 수정합니다:

## 지능적인 불안정성 처리

테스트가 간헐적으로 실패할 때:

1. **실패 분석** → 오류 로그 읽기
2. **근본 원인 진단**:
   - 선택자 기반인 경우 → 탄력적인 선택자로 업데이트
   - 타이밍 기반인 경우 → 명시적 대기 추가
   - 비동기 기반인 경우 → 타임아웃 증가
   - 모의(mock) 기반인 경우 → 모의 응답 확인
3. **수정 사항 적용** → 테스트 코드 수정
4. **재실행** → 테스트 3회 실행
5. **확인** → 수정 사항이 불안정성을 해결하는지 확인
6. **보고** → 향후 참조를 위해 패턴 문서화

예시 출력:

❌ 테스트 실패: "요소를 찾을 수 없음: #payment-button"
📊 분석: 선택자가 너무 구체적입니다 (리팩토링 시 ID 변경됨)
🔧 수정: #payment-button → button[name="pay-now"]로 변경
✅ 재실행: 3/3회 통과
✓ 불안정성 해결됨

CI/CD를 통한 자동화

E2E 테스트 파이프라인

GitHub Actions에서 포괄적인 E2E 테스트를 설정하세요:

# .github/workflows/e2e-tests.yml
name: E2E Tests

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]
  schedule:
    - cron: '0 2 * * *'  # 야간 테스트

jobs:
  e2e:
    name: E2E Tests - ${{ matrix.browser }}
    runs-on: ubuntu-latest
    strategy:
      matrix:
        browser: [chromium, firefox, webkit]
    
    steps:
      - uses: actions/checkout@v4
      
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      
      - name: 의존성 설치
        run: npm ci
      
      - name: Playwright 브라우저 설치
        run: npx playwright install --with-deps ${{ matrix.browser }}
      
      - name: 애플리케이션 빌드
        run: npm run build
      
      - name: E2E 테스트 실행
        run: npx playwright test --project=${{ matrix.browser }}
      
      - name: 테스트 보고서 업로드
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: playwright-report-${{ matrix.browser }}
          path: playwright-report/
          retention-days: 30
      
      - name: 테스트 결과 게시
        if: always()
        uses: EnricoMi/publish-unit-test-result-action@v2
        with:
          files: 'test-results/*.xml'
          check_name: E2E Tests (${{ matrix.browser }})

Pre-Commit 테스트 훅

깨진 테스트가 리포지토리에 들어가는 것을 방지합니다:

# .husky/pre-commit
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

echo "프리-커밋 단위 테스트 실행 중..."
npm test -- --bail --findRelatedTests

if [ $? -ne 0 ]; then
  echo "❌ 테스트 실패. 커밋이 차단되었습니다."
  exit 1
fi

echo "✓ 모든 테스트 통과"

Pre-Push 유효성 검사

원격으로 푸시하기 전에 유효성을 검사합니다:

# .git/hooks/pre-push
#!/bin/bash

BRANCH=$(git rev-parse --abbrev-ref HEAD)

if [ "$BRANCH" = "main" ]; then
  echo "main으로 푸시하기 전에 전체 테스트 스위트 실행 중..."
  npm test -- --coverage
  npx playwright test
elif [ "$BRANCH" = "develop" ]; then
  echo "develop으로 푸시하기 전에 E2E 테스트 실행 중..."
  npx playwright test
fi

if [ $? -ne 0 ]; then
  echo "❌ 유효성 검사 실패. 푸시가 차단되었습니다."
  exit 1
fi

echo "✓ 모든 유효성 검사 통과"

Apidog와 결합하기

💡 전문가 팁: Claude Code는 프런트엔드 테스트를 처리하고, Apidog는 API 테스트를 처리합니다. 함께 사용하여 엔드투엔드 안정성을 보장합니다.

Claude에 대한 프롬프트: "E2E 테스트를 실행하기 전에 Apidog에서 모든 API가 통과하는지 확인합니다. API 테스트가 실패하면 E2E를 건너뛰고 어떤 엔드포인트가 깨졌는지 보고합니다."

// e2e/pre-test-checks.js
import { execSync } from 'child_process';

async function runPreTestChecks() {
  console.log('🔍 API 유효성 검사 중...');
  
  try {
    // Apidog CLI 테스트 먼저 실행
    execSync('apidog run --collection ./tests/api-collection.json --env ci', {
      stdio: 'inherit'
    });
    console.log('✓ API 테스트 통과 - E2E 진행 중');
  } catch (error) {
    console.error('✗ API 테스트 실패 - E2E 건너뛰기');
    process.exit(1);
  }

  console.log('🎭 E2E 테스트 실행 중...');
  execSync('npx playwright test', { stdio: 'inherit' });
}

runPreTestChecks();

이는 안전 게이트를 만듭니다: API가 깨져 있으면 E2E 테스트가 자동으로 건너뛰어집니다.

모범 사례 및 문제 해결

선택자 탄력성

문제: 로컬에서는 테스트가 통과하지만 CI에서는 DOM이 약간 변경되어 실패합니다.

해결책: 탄력적인 선택자를 사용하세요.

// ❌ 취약함
const button = page.locator('button:nth-child(3)');

// ✓ 탄력적
const button = page.getByRole('button', { name: /submit/i });
const button = page.getByTestId('submit-button');

비동기 경쟁 조건

문제: 테스트가 버튼을 클릭했지만 페이지가 아직 로드되지 않았습니다.

해결책: 명시적 대기(explicit waits)를 사용하세요.

// ❌ 경쟁적
await page.click('#submit');
await expect(page).toHaveURL(/dashboard/);

// ✓ 안전
await page.click('#submit');
await page.waitForURL(/dashboard/);

환경 변수

문제: API 키를 사용할 수 없어서 테스트가 실패합니다.

해결책: .env.test를 사용하세요.

// tests/setup.js
import dotenv from 'dotenv';
dotenv.config({ path: '.env.test' });

결론

Claude Code Skills는 테스트를 귀찮은 일에서 초능력으로 바꿉니다. 사용자 여정을 설명하면 Claude가 포괄적인 테스트 스위트를 생성하고, 실행하며, 실패를 디버그하고, 문제를 자율적으로 해결합니다.

API 테스트를 위한 Apidog와 결합하여 풀스택 커버리지를 달성합니다:

계층	도구	커버리지
프런트엔드	Claude Code	사용자 상호작용, 컴포넌트, UI
API	Apidog	스키마 유효성 검사, 계약, 응답
통합	둘 다	프런트엔드-API 정렬, 모의 동기화

오늘 시작하세요:

Claude Code 설치: npm install -g @anthropic-ai/claude-code
프로젝트로 이동: cd your-app
실행: claude

4. 테스트할 내용을 설명합니다: "결제 흐름에 대한 E2E 테스트를 생성하세요"

5. Claude가 생성, 실행 및 반복하는 것을 지켜보세요.

AI 기반 테스트 생성과 지능형 디버깅의 조합은 불안정한 테스트를 줄이고, CI 파이프라인을 가속화하며, 모든 배포에 대한 신뢰를 높입니다. 깨지기 쉬운 테스트 스크립트를 유지 관리하는 것을 멈추고 Claude Code Skills가 어려운 작업을 처리하는 동안 기능 구축에 집중하세요.

불안정한 테스트를 없앨 준비가 되셨나요? Claude Code를 설치하고 API 테스트를 위해 Apidog를 무료로 사용해 보세요. 더 스마트하게 코딩하세요. 더 빠르게 테스트하세요. 자신 있게 배포하세요.

button