Playwright 셀렉터를 작성하는 대신 AI가 해결하도록 맡겼습니다

셀렉터 기반 테스트의 문제점

Playwright 또는 Cypress 테스트 스위트(test suite)를 몇 달 이상 유지 관리해 보셨다면, 어떤 상황인지 잘 아실 겁니다. 디자이너가 클래스(class) 이름을 변경하거나, 개발자가 폼(form) 구조를 재구성하면 갑자기 30개의 테스트가 깨집니다. 기능이 고장 나서가 아니라, .submit-btn이 [data-action="submit"]으로 바뀌었기 때문입니다.

결국 다음과 같은 루프에 빠지게 됩니다: 셀렉터 수정, 배포, 셀렉터 깨짐, 다시 셀렉터 수정. 아무도 테스트를 신뢰하지 않게 되면서 테스트는 더 이상 유용하지 않게 됩니다.

우리가 만든 것

우리는 Confidence Gate를 구축했습니다. 이는 AI 기반의 테스트 실행 엔진(test execution engine)으로, 사용자가 일반적인 영어(plain English)로 테스트 단계를 설명하면 시스템이 나머지를 알아서 처리합니다.

다음과 같은 방식 대신:

await page.locator('[data-testid="email-input"]').fill('user@example.com');

await page.locator('button[type="submit"]').click();

await expect(page).toHaveURL('/dashboard');

이렇게 작성합니다:

{ "action": "테스트 데이터의 이메일을 이메일 필드에 입력하세요", "expected": "이메일 필드에 입력된 주소가 포함되어 있어야 함" }
{ "action": "...", "expected": "대시보드가 표시되고 로그인 폼이 사라져야 함" }

엔진은 각 단계를 타입이 지정된 의도(typed intent)로 변환하고, 접근성 트리(accessibility tree)에서 대상 요소(target element)를 찾아내며, 실제 Playwright 브라우저에서 실행하고, 스크린샷을 찍은 뒤, 시각적으로 결과를 검증합니다.

실행 엔진의 작동 방식

각 단계는 네 가지 단계를 거칩니다:

1. 의도 생성 (Intent generation) — 자연어 동작이 구조화된 JSON({ action: "click", target: { label: "Sign In", role: "button" }, value: null })으로 변환됩니다. 이를 통해 의도(intent)와 구현(implementation)을 분리합니다.

2. 요소 식별 (Element resolution) — 다계층 리졸버(multi-tier resolver)가 요소를 찾습니다: 첫째로 접근성 트리(accessibility tree)를 확인하며(빠르고 신뢰할 수 있음), 둘째로 CSS 휴리스틱(heuristics)을 사용하고, 세 번째로 AI 보조 폴백(AI-assisted fallback)을 사용합니다.

3. 실행 + 동작 감지 (Execution + behavior detection) — Playwright가 동작을 실행합니다. 뮤테이션 옵저버(mutation observer)가 DOM 변경, URL 변경, 값 변경을 감시하여 실제로 무언가가 일어났는지 확인합니다.

4. 검증 (Verification) — 비전 모델 (vision model)이 작업 후의 스크린샷을 보고 이를 예상 결과와 대조하여 확인합니다. 만약 동작은 감지되었으나 검증에 실패할 경우, 엔진은 잘못된 요소(element)를 클릭했다고 가정하고 블랙리스트에 등록된 셀렉터 (selector)를 사용하여 재시도합니다.

셀프 힐링 셀렉터 (Self-healing selectors)

배포 사이에 셀렉터가 작동을 멈추면 복구 루프 (repair loop)가 작동합니다. 접근성 트리 (accessibility tree)를 다시 쿼리하고, 원래의 대상 설명과 후보 요소들을 비교하여 점수를 매긴 뒤, 가장 적합한 일치 항목을 선택합니다. 새로운 셀렉터는 캐싱되어 다음 실행 시 빠르게 작동합니다.

신뢰도 점수 (The confidence score)

실행이 완료되면, 모든 단계의 결과는 다음 항목들로 구성된 점수(0–100)로 반영됩니다:

• 통과 (Pass) / 실패 (fail) / 불확실 (inconclusive) 비율
• 플래키니스 (Flakiness) 이력 (실행 시마다 결과가 바뀌는 테스트)
• 셀렉터 안정성 (Selector stability, 복구가 얼마나 자주 실행되었는지)
• PRD(제품 요구 사항 문서)에 대한 AI 리스크 분석 (선택 사항)

이 점수는 배포 결정 단계(gate decision)인 배포 (ship), 주의 (caution), 또는 차단 (block)으로 매핑됩니다. CI에서 API를 호출하여 점수가 설정한 임계값 미만으로 떨어지면 배포를 실패 처리할 수 있습니다.

스택 및 설정 (Stack and setup)

• 백엔드 (Backend): Python 3.11 · FastAPI · Celery · MongoDB · Redis · MinIO · Playwright
• 프론트엔드 (Frontend): Next.js 15 · React 19 · TypeScript · Tailwind CSS v4
• AI: 플러그인 방식 — OpenAI, Anthropic Claude, 또는 로컬 모델을 위한 Ollama
• 인증 (Auth): Firebase 또는 로컬 JWT (개발 시 Firebase 계정 불필요)

git clone https://github.com/OaktreeInnovations/confidence-gate.git
cd confidence-gate

cp .env.example .env

make up

http://localhost:3001을 열면 실행 중인 것을 확인할 수 있습니다.

다음 단계 (What's next)

현재 다음 네 가지 사항을 순차적으로 작업 중입니다:

1. 실행 안정화 (불확실한 단계 감소, 엣지 케이스 (edge cases) 처리 개선)
2. 더 나은 PRD 커버리지 분석 (단순한 점수가 아닌 요구 사항 수준의 추적성)
3. 브라우저 녹화 (Browser recording, 동작 녹화 → 테스트 케이스 자동 생성)
4. PRD로부터 테스트 생성 (사양서 업로드 → 전체 테스트 스위트 획득)

이 저장소(repo)는 MIT 라이선스이며 기여에 열려 있습니다. 만약 이 내용 중 흥미로운 부분이 있다면 — 특히 브라우저 녹화(browser recording)나 AI 실행 엔진(AI execution engine)에 대해 — GitHub에서 인사해 주세요.

https://github.com/OaktreeInnovations/confidence-gate