القائمة
Run e2e and unit tests for Claude Inspector. Use after code changes to verify regressions.
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/kangraemin/claude-inspector --skill e2eيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
코드를 고치거나 새로 짜는 작업을 단계별 워크플로우로 진행한다. 버그 수정, 기능 구현, 리팩터링, 설정·의존성 변경, "이거 고쳐줘" / "이 기능 추가해줘" / "왜 안 되는지 보고 고쳐봐" 같은 요청에 파일을 건드리기 전 반드시 먼저 호출할 것. 계획 승인·검증 통과·커밋을 엔진이 강제하는데, 이 스킬로 작업을 시작해야만 그 강제가 걸린다 — 스킬 없이 바로 Edit/Write하면 아무 규칙도 적용되지 않은 채 진행된다. 질문·설명·코드 읽기만 하는 요청에는 쓰지 않는다.
Claude Inspector macOS 배포 스킬. 빌드(코드사이닝+공증) → GitHub Release → Homebrew cask 업데이트 전체 플로우. '배포', 'deploy', '릴리즈', 'release', '배포해', '출시' 등 배포 관련 요청 시 반드시 이 스킬을 사용한다.
Build and package Claude Inspector as a distributable Electron app (.dmg / .exe)
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | e2e |
| description | Run e2e and unit tests for Claude Inspector. Use after code changes to verify regressions. |
| user-invocable | true |
npm run test:unit
parseClaudeMdSections — CLAUDE.md system-reminder 섹션 파싱parseUserText — 사용자 메시지 내 injected block 감지detectMechanisms — 5가지 메커니즘 감지 로직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-currentgit diff --name-only HEAD 2>/dev/null | head -10// ✅ 권장: 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();
// 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/);
}
}
// 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로.