ReddRadar
Agent skill
e2e
Run e2e and unit tests for Claude Inspector. Use after code changes to verify regressions.
Install this agent skill to your Project
npx add-skill https://github.com/kangraemin/claude-inspector/tree/main/.claude/skills/e2e
SKILL.md
Claude Inspector 테스트 실행
Unit tests (파싱 로직)
npm run test:unit
parseClaudeMdSections— CLAUDE.md system-reminder 섹션 파싱parseUserText— 사용자 메시지 내 injected block 감지detectMechanisms— 5가지 메커니즘 감지 로직
E2E tests (Electron UI)
npm run test:e2e
# headed 모드 (브라우저 보이게)
npm run test:e2e -- --headed
# 특정 테스트만
npm run test:e2e -- --grep "탭 클릭"
# 디버그 모드 (step-by-step)
npm run test:e2e -- --debug
- 앱이 실행 중이면 먼저 종료:
pkill -x "Electron"
전체 실행
npm test
현재 상태
- 브랜치: !
git branch --show-current - 변경 파일: !
git diff --name-only HEAD 2>/dev/null | head -10
Playwright 핵심 패턴
셀렉터 우선순위
// ✅ 권장: role, label, data-testid 순
page.getByRole('button', { name: '프록시 시작' })
page.getByLabel('API Key')
page.locator('[data-testid="proxy-toggle"]')
page.locator('[data-m="claude-md"]') // 이 프로젝트 convention
// ❌ 금지: CSS 클래스, nth-child
page.locator('.btn.active')
page.locator('div > span:nth-child(2)')
대기 전략
// ❌ 금지: 고정 타임아웃
await page.waitForTimeout(3000);
// ✅ 권장: 상태/요소 기반
await page.waitForLoadState('domcontentloaded');
await expect(page.locator('[data-m="claude-md"]')).toHaveClass(/active/);
await expect(page.getByText('Copied!')).toBeVisible();
Page Object Model (복잡한 테스트에서 활용)
// tests/e2e/pages/MechanismPage.ts
export class MechanismPage {
constructor(private page: Page) {}
tab(name: string) {
return this.page.locator(`[data-m="${name}"]`);
}
async switchTo(name: string) {
await this.tab(name).click();
await expect(this.tab(name)).toHaveClass(/active/);
}
}
네트워크/IPC 모킹 (프록시 테스트)
// Anthropic API 응답 모킹
await page.route('**/api.anthropic.com/**', route => {
route.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify({ id: 'msg_test', content: [{ type: 'text', text: 'ok' }] }),
});
});
실패 시 트레이스 수집
// playwright.config.ts에 추가
use: {
trace: 'on-first-retry',
screenshot: 'only-on-failure',
video: 'retain-on-failure',
}
테스트 실패 대처
| 원인 | 해결 |
|---|---|
| 앱 실행 중 충돌 | pkill -x "Electron" |
| 포트 충돌 | lsof -ti:9090 | xargs kill |
| 셀렉터 못 찾음 | --headed 모드로 실행해 직접 확인 |
| 타임아웃 | waitForTimeout → waitForLoadState 변경 |
| Unit test 불일치 | public/index.html 함수와 tests/unit/parse.test.mjs 기대값 동기화 확인 |
테스트 피라미드
/E2E\ ← 앱 실행·탭 전환·프록시 제어
/──────\
/Unit \ ← parseClaudeMdSections, detectMechanisms
/──────────\
E2E는 핵심 워크플로우만. 파싱 로직 엣지케이스는 unit test로.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
kangraemin/claude-inspector
deploy
Claude Inspector macOS 배포 스킬. 빌드(코드사이닝+공증) → GitHub Release → Homebrew cask 업데이트 전체 플로우. '배포', 'deploy', '릴리즈', 'release', '배포해', '출시' 등 배포 관련 요청 시 반드시 이 스킬을 사용한다.
kangraemin/claude-inspector
build
Build and package Claude Inspector as a distributable Electron app (.dmg / .exe)
davila7/claude-code-templates
verl-rl-training
Provides guidance for training LLMs with reinforcement learning using verl (Volcano Engine RL). Use when implementing RLHF, GRPO, PPO, or other RL algorithms for LLM post-training at scale with flexible infrastructure backends.
davila7/claude-code-templates
openrlhf-training
High-performance RLHF framework with Ray+vLLM acceleration. Use for PPO, GRPO, RLOO, DPO training of large models (7B-70B+). Built on Ray, vLLM, ZeRO-3. 2× faster than DeepSpeedChat with distributed architecture and GPU resource sharing.
davila7/claude-code-templates
gguf-quantization
GGUF format and llama.cpp quantization for efficient CPU/GPU inference. Use when deploying models on consumer hardware, Apple Silicon, or when needing flexible quantization from 2-8 bit without GPU requirements.
davila7/claude-code-templates
Claude Code Guide
Master guide for using Claude Code effectively. Includes configuration templates, prompting strategies "Thinking" keywords, debugging techniques, and best practices for interacting with the agent.
Didn't find tool you were looking for?