원클릭으로 Manus에서 모든 스킬 실행

e2e-verify

스타122

포크35

업데이트2026년 3월 26일 01:56

개발 완료 후 피처 기반 E2E 테스트 작성 및 실행. /verify 이후 실제 사용자 플로우를 검증합니다. Triggers on: e2e 검증, e2e-verify, E2E 테스트, 브라우저 테스트 실행. NOT for: 유닛 테스트, 타입체크, 빌드 검증.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

jh941213

jh941213/my-cc-harness

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

E2E 피처 검증

개발 + /verify 완료 후, 구현한 피처가 실제 브라우저에서 동작하는지 E2E 테스트로 검증합니다.

전제 조건

/verify 통과 완료 (typecheck, lint, test, build)
앱이 로컬에서 실행 가능한 상태

워크플로우

1단계: 피처 분석

구현한 피처의 사용자 플로우를 파악합니다.

- 어떤 페이지에서 시작하는가?
- 어떤 인터랙션이 필요한가? (클릭, 입력, 네비게이션)
- 성공 조건은 무엇인가? (URL 변경, 텍스트 표시, 상태 변화)
- 엣지 케이스는? (빈 입력, 에러 응답)

2단계: 앱 실행

# package.json에서 dev/start 스크립트 확인
cat package.json | grep -A 5 '"scripts"'

# 앱 실행 (백그라운드)
npm run dev &
sleep 5  # 앱 준비 대기

3단계: E2E 테스트 작성

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');
  });
});

4단계: 테스트 실행

# 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"

5단계: 실패 시 디버깅

# 스크린샷 캡처
agent-browser screenshot ./e2e/debug.png

# headed 모드로 재실행
agent-browser open http://localhost:3000 --headed

# 콘솔 에러 확인
agent-browser console --error

테스트 체크리스트

해피 패스 (정상 플로우) 통과
에러 케이스 (잘못된 입력, 네트워크 에러) 처리 확인
페이지 이동/라우팅 정상 동작
UI 상태 변화 (로딩, 성공, 실패) 표시 확인
모바일 뷰포트에서도 동작 (해당 시)

검증 루프

각 테스트에서 실패 시:

스크린샷/로그로 원인 파악
코드 수정
/verify 다시 실행 (회귀 방지)
E2E 테스트 재실행
모두 통과할 때까지 반복

이 저장소의 다른 Skills

같은 저장소

review

jh941213/my-cc-harness

현재 브랜치의 변경사항 코드 리뷰. Codex + Claude 듀얼 리뷰. 트리거: "리뷰", "review", "검토", "코드 리뷰", "PR 리뷰", "변경사항 확인" 안티-트리거: "구현", "코드 작성", "빌드"

2026-04-06122

simplify

jh941213/my-cc-harness

코드 단순화 및 리팩토링 — 변경된 코드를 리뷰하고 불필요한 추상화, 중복, 복잡성을 제거합니다. Triggers on: 단순화, simplify, 리팩토링, 코드 정리, 코드 개선. NOT for: 새 기능 추가, 버그 수정.

2026-04-06122

verify

jh941213/my-cc-harness

작업 완료 후 코드 검증 (타입체크, 린트, 테스트, 빌드). Triggers on: 검증, verify, 테스트 돌려, 빌드 확인, 타입체크. NOT for: E2E 테스트, 코드 작성, 구현.

2026-04-06122

autodev-parallel

jh941213/my-cc-harness

Ralph Loop 병렬 버전. 여러 에이전트가 worktree에서 동시에 PRD 항목을 처리한다. 트리거: "병렬 실험", "autodev parallel", "동시에 실험", "워크트리 실험", "병렬 랄프" 안티-트리거: "순차 실험", "하나씩"

2026-03-26122

autodev

jh941213/my-cc-harness

Ralph Loop 기반 자율 개발 루프. Stop Hook이 세션 종료를 가로채어 PRD 항목을 하나씩 완료하며 자동 커밋한다. 트리거: "autodev", "자율 개발", "밤새 돌려", "랄프 루프", "ralph loop", "자동 개발" 안티-트리거: "직접 구현해", "한번만 해", "수동"

2026-03-26122

commit-push-pr

jh941213/my-cc-harness

변경사항 커밋, 푸시, PR 생성을 한 번에 수행하는 워크플로우. 트리거: "커밋", "PR 만들어", "푸시해", "PR 생성", "commit and push", "커밋하고 푸시", "PR 올려" 안티-트리거: "코드 리뷰", "git log 확인", "diff 보여줘", "브랜치 목록"

2026-03-26122

name	e2e-verify
description	개발 완료 후 피처 기반 E2E 테스트 작성 및 실행. /verify 이후 실제 사용자 플로우를 검증합니다. Triggers on: e2e 검증, e2e-verify, E2E 테스트, 브라우저 테스트 실행. NOT for: 유닛 테스트, 타입체크, 빌드 검증.
user-invocable	true
disable-model-invocation	false
allowed-tools	Read, Write, Edit, Bash, Grep, Glob

E2E 피처 검증

개발 + /verify 완료 후, 구현한 피처가 실제 브라우저에서 동작하는지 E2E 테스트로 검증합니다.

전제 조건

/verify 통과 완료 (typecheck, lint, test, build)
앱이 로컬에서 실행 가능한 상태

워크플로우

1단계: 피처 분석

구현한 피처의 사용자 플로우를 파악합니다.

- 어떤 페이지에서 시작하는가?
- 어떤 인터랙션이 필요한가? (클릭, 입력, 네비게이션)
- 성공 조건은 무엇인가? (URL 변경, 텍스트 표시, 상태 변화)
- 엣지 케이스는? (빈 입력, 에러 응답)

2단계: 앱 실행

# package.json에서 dev/start 스크립트 확인
cat package.json | grep -A 5 '"scripts"'

# 앱 실행 (백그라운드)
npm run dev &
sleep 5  # 앱 준비 대기

3단계: E2E 테스트 작성

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');
  });
});

4단계: 테스트 실행

# 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"

5단계: 실패 시 디버깅

# 스크린샷 캡처
agent-browser screenshot ./e2e/debug.png

# headed 모드로 재실행
agent-browser open http://localhost:3000 --headed

# 콘솔 에러 확인
agent-browser console --error

테스트 체크리스트

해피 패스 (정상 플로우) 통과
에러 케이스 (잘못된 입력, 네트워크 에러) 처리 확인
페이지 이동/라우팅 정상 동작
UI 상태 변화 (로딩, 성공, 실패) 표시 확인
모바일 뷰포트에서도 동작 (해당 시)

검증 루프

각 테스트에서 실패 시:

스크린샷/로그로 원인 파악
코드 수정
/verify 다시 실행 (회귀 방지)
E2E 테스트 재실행
모두 통과할 때까지 반복