Back to Details

e2e-verify

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

E2E 피처 검증

E2E功能验证

개발 + 
/verify
완료 후, 구현한 피처가 실제 브라우저에서 동작하는지 E2E 테스트로 검증합니다.
开发 + 
/verify
完成后，通过E2E测试验证实现的功能在实际浏览器中是否正常运行。

전제 조건

前提条件

  • /verify
    통과 완료 (typecheck, lint, test, build)
  • 앱이 로컬에서 실행 가능한 상태
  • /verify
    已通过（typecheck、lint、test、build）
  • 应用处于可本地运行状态

워크플로우

工作流程

1단계: 피처 분석

1阶段：功能分析

구현한 피처의 사용자 플로우를 파악합니다.
- 어떤 페이지에서 시작하는가?
- 어떤 인터랙션이 필요한가? (클릭, 입력, 네비게이션)
- 성공 조건은 무엇인가? (URL 변경, 텍스트 표시, 상태 변화)
- 엣지 케이스는? (빈 입력, 에러 응답)
明确实现的功能的用户流程。
- 어떤 페이지에서 시작하는가?
- 어떤 인터랙션이 필요한가? (클릭, 입력, 네비게이션)
- 성공 조건은 무엇인가? (URL 변경, 텍스트 표시, 상태 변화)
- 엣지 케이스는? (빈 입력, 에러 응답)

2단계: 앱 실행

2阶段：运行应用

bash
undefined
bash
undefined

package.json에서 dev/start 스크립트 확인

package.json에서 dev/start 스크립트 확인

cat package.json | grep -A 5 '"scripts"'
cat package.json | grep -A 5 '"scripts"'

앱 실행 (백그라운드)

앱 실행 (백그라운드)

npm run dev & sleep 5 # 앱 준비 대기
undefined
npm run dev & sleep 5 # 앱 준비 대기
undefined

3단계: E2E 테스트 작성

3阶段：编写E2E测试

e2e/
디렉토리에 테스트 파일 생성합니다.
bash
undefined
e2e/
目录下创建测试文件。
bash
undefined

프로젝트에 기존 E2E 설정 확인

프로젝트에 기존 E2E 설정 확인

ls e2e/ 2>/dev/null || ls tests/e2e/ 2>/dev/null || ls tests/e2e/ 2>/dev/null
ls e2e/ 2>/dev/null || ls tests/e2e/ 2>/dev/null || ls tests/e2e/ 2>/dev/null

기존 E2E 프레임워크 확인 (Playwright, Cypress, agent-browser)

기존 E2E 프레임워크 확인 (Playwright, Cypress, agent-browser)

cat package.json | grep -E "playwright|cypress|agent-browser"
undefined
cat package.json | grep -E "playwright|cypress|agent-browser"
undefined

프레임워크별 테스트 작성

按框架编写测试

agent-browser 사용 시:
bash
#!/bin/bash
set -e
cleanup() { agent-browser close 2>/dev/null || true; }
trap cleanup EXIT

agent-browser open http://localhost:3000
使用agent-browser时：
bash
#!/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 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 사용 시:**
```typescript
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 사용 시:
typescript
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 fill @email-input "test@example.com" agent-browser click @submit-btn agent-browser wait text "Success"
echo "PASS: Feature E2E test"

**使用Playwright时：**
```typescript
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时：
typescript
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단계: 테스트 실행

4阶段：执行测试

bash
undefined
bash
undefined

agent-browser

agent-browser

bash e2e/test_feature.sh
bash e2e/test_feature.sh

Playwright

Playwright

npx playwright test e2e/feature.spec.ts
npx playwright test e2e/feature.spec.ts

Cypress

Cypress

npx cypress run --spec "cypress/e2e/feature.cy.ts"
undefined
npx cypress run --spec "cypress/e2e/feature.cy.ts"
undefined

5단계: 실패 시 디버깅

5阶段：失败时调试

bash
undefined
bash
undefined

스크린샷 캡처

스크린샷 캡처

agent-browser screenshot ./e2e/debug.png
agent-browser screenshot ./e2e/debug.png

headed 모드로 재실행

headed 모드로 재실행

agent-browser open http://localhost:3000 --headed
agent-browser open http://localhost:3000 --headed

콘솔 에러 확인

콘솔 에러 확인

agent-browser console --error
undefined
agent-browser console --error
undefined

테스트 체크리스트

测试检查清单

  • 해피 패스 (정상 플로우) 통과
  • 에러 케이스 (잘못된 입력, 네트워크 에러) 처리 확인
  • 페이지 이동/라우팅 정상 동작
  • UI 상태 변화 (로딩, 성공, 실패) 표시 확인
  • 모바일 뷰포트에서도 동작 (해당 시)
  • 正常流程（Happy Path）通过
  • 错误案例（无效输入、网络错误）处理验证
  • 页面跳转/路由正常运行
  • UI状态变化（加载、成功、失败）显示验证
  • 在移动端视口中也能正常运行（如有需要）

검증 루프

验证循环

각 테스트에서 실패 시:
  1. 스크린샷/로그로 원인 파악
  2. 코드 수정
  3. /verify
    다시 실행 (회귀 방지)
  4. E2E 테스트 재실행
  5. 모두 통과할 때까지 반복
当测试失败时：
  1. 通过截图/日志确定原因
  2. 修改代码
  3. 重新运行
    /verify
    （防止回归）
  4. 重新执行E2E测试
  5. 重复直到全部通过