webapp-test-code-generator

A Claude Code skill that converts test documents from webapp-test-docs-writer into executable Playwright/Jest test code.

Overview

┌─────────────────────────┐      ┌──────────────────────────┐      ┌─────────────────────┐
│  webapp-test-docs-writer │  →  │ webapp-test-code-generator │  →  │  Executable Test    │
│  (Write test documents)  │      │   (Generate test code)    │      │  Code Files         │
└─────────────────────────┘      └──────────────────────────┘      └─────────────────────┘

Installation

# Create symbolic link (skip if already done)
ln -sf "$(pwd)/webapp-test-code-generator" ~/.claude/skills/webapp-test-code-generator

# Verify
ls -la ~/.claude/skills/webapp-test-code-generator

Usage

Basic Usage

Generate test code from tests/docs/login-test-cases.md

implement tests from tests/docs/api-test-cases.md

Trigger Keywords

English	Korean
test code	테스트 코드 생성
implement tests	테스트 구현
generate tests	TC-* 구현

Supported Test Types

Test ID	Type	Framework	Output File
TC-E2E-*	E2E	Playwright	*.spec.ts
TC-API-*	API	Playwright	*.api.spec.ts
TC-UNIT-*	Unit	Jest/Vitest	*.test.ts
TC-INT-*	Integration	Jest/Vitest	*.integration.test.ts
TC-SEC-*	Security	Playwright	*.security.spec.ts

Input Format

Standard format generated by 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": "test@example.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 |

Output Examples

API Test (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: 'test@example.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 Test (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"]', 'test@example.com');
    await page.fill('[name="password"]', 'Pass123!');
    await page.click('button[type="submit"]');
    await expect(page).toHaveURL('/main');
  });
});

Unit Test (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('test@example.com')).toBe(true);
  });

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

Framework Auto-Detection

The skill automatically detects the framework from project configuration files:

Config File	Framework
playwright.config.ts	Playwright
jest.config.js/ts	Jest
vitest.config.ts	Vitest

File Structure

project/
├── tests/
│   ├── docs/                    # Test documents (input)
│   │   └── login-test-cases.md
│   ├── e2e/                     # E2E tests
│   │   └── login.spec.ts
│   ├── api/                     # API tests
│   │   └── auth.api.spec.ts
│   ├── unit/                    # Unit tests
│   │   └── validators.test.ts
│   └── integration/             # Integration tests
│       └── auth.integration.test.ts
└── playwright.config.ts

Run Commands

# Playwright
npx playwright test tests/e2e/login.spec.ts

# Jest
npm test -- tests/unit/validators.test.ts

# Vitest
npx vitest run tests/unit/validators.test.ts

Workflow Example

# 1. Write test documents
"Write test cases for login feature"
# → webapp-test-docs-writer activates
# → tests/docs/login-test-cases.md created

# 2. Generate test code
"Generate test code from the test document"
# → webapp-test-code-generator activates
# → tests/e2e/login.spec.ts created

# 3. Run tests
npx playwright test tests/e2e/login.spec.ts

Related Skills

Skill	Role
webapp-test-docs-writer	Write test scenarios/cases documents
webapp-test-code-generator	Generate test code (this skill)
smart-test-runner	Run tests with failure retry
webapp-testing	Playwright-based webapp testing

Tips

1. Test Document Quality: Include clear preconditions, specific test data (JSON), and step-by-step expected results
2. Customization: Add auth helpers, common fixtures, and environment-specific settings to generated code
3. Sequential Use: Use webapp-test-docs-writer → webapp-test-code-generator in sequence