From ccpp
Writes and runs feature-based E2E tests for user flows in browser after /verify. Supports Playwright, Cypress, agent-browser; runs dev server and validates interactions.
npx claudepluginhub jh941213/my-cc-harness --plugin ccppThis skill is limited to using the following tools:
개발 + `/verify` 완료 후, 구현한 피처가 실제 브라우저에서 동작하는지 E2E 테스트로 검증합니다.
Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.
Designs and optimizes AI agent action spaces, tool definitions, observation formats, error recovery, and context for higher task completion rates.
Designs, implements, and audits WCAG 2.2 AA accessible UIs for Web (ARIA/HTML5), iOS (SwiftUI traits), and Android (Compose semantics). Audits code for compliance gaps.
개발 + /verify 완료 후, 구현한 피처가 실제 브라우저에서 동작하는지 E2E 테스트로 검증합니다.
/verify 통과 완료 (typecheck, lint, test, build)구현한 피처의 사용자 플로우를 파악합니다.
- 어떤 페이지에서 시작하는가?
- 어떤 인터랙션이 필요한가? (클릭, 입력, 네비게이션)
- 성공 조건은 무엇인가? (URL 변경, 텍스트 표시, 상태 변화)
- 엣지 케이스는? (빈 입력, 에러 응답)
# package.json에서 dev/start 스크립트 확인
cat package.json | grep -A 5 '"scripts"'
# 앱 실행 (백그라운드)
npm run dev &
sleep 5 # 앱 준비 대기
e2e/ 디렉토리에 테스트 파일 생성합니다.
# 프로젝트에 기존 E2E 설정 확인
ls e2e/ 2>/dev/null || ls tests/e2e/ 2>/dev/null || ls __tests__/e2e/ 2>/dev/null
# 기존 E2E 프레임워크 확인 (Playwright, Cypress, agent-browser)
cat package.json | grep -E "playwright|cypress|agent-browser"
agent-browser 사용 시:
#!/bin/bash
set -e
cleanup() { agent-browser close 2>/dev/null || true; }
trap cleanup EXIT
agent-browser open http://localhost:3000
# 스냅샷으로 요소 확인
agent-browser snapshot -i
# 피처 플로우 실행
agent-browser fill @email-input "test@example.com"
agent-browser click @submit-btn
agent-browser wait text "Success"
echo "PASS: Feature E2E test"
Playwright 사용 시:
import { test, expect } from '@playwright/test';
test('피처명: 사용자 플로우', async ({ page }) => {
await page.goto('/');
await page.fill('[data-testid="email"]', 'test@example.com');
await page.click('[data-testid="submit"]');
await expect(page.locator('.success')).toBeVisible();
});
Cypress 사용 시:
describe('피처명', () => {
it('사용자 플로우를 완료한다', () => {
cy.visit('/');
cy.get('[data-testid="email"]').type('test@example.com');
cy.get('[data-testid="submit"]').click();
cy.contains('Success').should('be.visible');
});
});
# agent-browser
bash e2e/test_feature.sh
# Playwright
npx playwright test e2e/feature.spec.ts
# Cypress
npx cypress run --spec "cypress/e2e/feature.cy.ts"
# 스크린샷 캡처
agent-browser screenshot ./e2e/debug.png
# headed 모드로 재실행
agent-browser open http://localhost:3000 --headed
# 콘솔 에러 확인
agent-browser console --error
각 테스트에서 실패 시:
/verify 다시 실행 (회귀 방지)