Projects
진행 중

Purple Test

구 E2E. No-Code 웹 UI, 자연어 AI, 그리고 데스크톱 에이전트로 시나리오를 만들고, 자동으로 돌리고, 실패하면 원인까지 짚어주는 E2E 테스트 자동화 플랫폼.

웹 UI·AI 자연어·MCP·로컬 데스크톱 에이전트 네 가지 진입점으로 시나리오를 만들고 실행하여, QA를 개발 워크플로우에 그대로 녹이는 접근

PlaywrightNext.jsElectronNo-CodeAIMCP
김

김경중

Owner

박찬호

Contributors

풀고 있는 문제

여러 브랜드 사이트를 운영하면 E2E 테스트가 필수지만, 현실적인 장벽이 많습니다.

  1. QA 리소스 부족 — 다수의 사이트를 하나하나 수동으로 검증하기엔 인력이 부족합니다
  2. 코드 의존 — 기존 테스트 봇은 시나리오가 코드로 고정되어 있어, 케이스 추가마다 개발자가 필요합니다
  3. 스케줄링 부재 — 정기 자동 실행이 불가능하고 결과 추적도 어렵습니다
  4. 실패 원인 파악 어려움 — 테스트가 실패해도 스크린샷·영상·에러 분석 없이 슬랙 한 줄로만 확인해야 합니다
  5. 로컬 디버깅 어려움 — 서버 headless 환경에서만 돌면, 사용자 PC에서 보이는 실제 동작을 직접 눈으로 보며 고치기 어렵습니다

접근 방식

“코드 없이 만들고, AI에게 시켜 만들고, 자동으로 돌고, 내 PC에서도 돌리고, 실패하면 원인을 짚어준다”

No-Code 시나리오 작성

시나리오 작성은 보통 MCP 도구나 AI 시나리오 채팅으로 시작합니다. 23가지 액션(이동·클릭·입력·대기·팝업·iframe·assertion·스크롤 등)이 조합된 TestStep 배열이 자동으로 만들어져 시나리오 편집기에 그대로 등록되고, 사용자는 No-Code UI에서 셀렉터·입력값·assertion을 검수하고 미세 조정만 합니다.

직접 손으로 한 액션씩 쌓는 것도 가능하지만, 그건 검수·수정용으로만 쓰는 게 빠릅니다. 대신 시나리오 복제 워크플로우, role 셀렉터 우선순위(link(남성), button(장바구니)), {{변수}} 치환, 광고·트래킹 차단 URL 패턴 같은 편집 환경의 디테일은 사람이 다듬을 때 필요한 만큼 모두 갖췄습니다.

AI로 시나리오 자동 생성

자연어로 “메인에서 남성 카테고리 들어가서 첫 상품 장바구니 담는 플로우 만들어줘”라고 입력하면, Claude Agent SDK가 실제 사이트를 직접 탐색하면서 TestStep 배열을 만들어냅니다. role 셀렉터 우선순위·호버 메뉴 3단계 처리·assertion 추가 같은 내부 컨벤션을 그대로 따르도록 학습돼 있어, 사람이 손으로 짜던 것과 거의 같은 형태로 결과가 나옵니다.

생성 후엔 시나리오 편집기에 그대로 적용되고, 사용자는 No-Code UI에서 셀렉터 한두 개만 다듬어 등록합니다. 결과적으로 **비개발자도 “원하는 동작을 한국어로 말한 뒤, UI에서 검수만 한다”**는 워크플로우가 가능해지고, 개발자는 보일러플레이트성 케이스 작성에서 해방됩니다. 시나리오 출처(web/mcp:claude/codex/gemini)도 자동 기록돼 어떤 경로로 만들어졌는지 추적할 수 있습니다.

다중 환경 · 다중 프로필

동일한 시나리오를 Dev/Staging/Production에서 실행합니다. 환경별 baseUrl 자동 치환으로 시나리오를 복사할 필요가 없습니다. 팀별 독립 프로필로 알림 채널과 시나리오를 분리 운영합니다.

자동 스케줄링 + Slack 알림 + 일일 리포트

Cron 기반(KST) 자동 반복 실행. 실행 결과는 실시간으로 Slack에 전달되고, 평일마다 일일 리포트(최근 24시간 결과 + 채택 현황)가 자동 발송됩니다.

내 PC에서 실행 (Electron 에이전트)

데스크톱 앱을 설치하면, 시나리오 실행을 내 PC의 실제 브라우저에서 돌릴 수 있습니다. 진짜 창이 떠서 좌상단에 진행 중인 스텝(Step 3/12: 카테고리 클릭)이 오버레이로 표시되고, 사내망 접근 권한이 필요한 환경도 사용자 PC에서 자연스럽게 처리됩니다. 시나리오 작성 검증·디버깅에 특히 유용합니다.

AI 실패 진단 + 비디오 녹화 + 비주얼 리그레션

매 실행마다 .webm 영상이 자동 녹화되고, 실패 스텝에는 스크린샷이 첨부됩니다. 2분할 UI에서 영상·스텝 결과·스크린샷을 동시에 봅니다. 그 위에 AI(Claude/Codex/Gemini 선택)가 셀렉터 오류·타임아웃·네트워크 문제·UI 변경 중 무엇인지 자동 분류하고 해결 방안을 제시합니다. 기준 스크린샷과 픽셀 단위로 비교해 의도치 않은 UI 변경도 자동 감지합니다.

MCP 연동

Claude Code 같은 MCP 클라이언트에서 14개 도구(시나리오 CRUD, 실행, 결과 조회, 스케줄 관리)로 플랫폼을 직접 다룹니다. Authorization Code + PKCE 인증으로 발급된 JWT를 사용해 안전하게 연결됩니다. CLI 한 줄 대화로 “코오롱스포츠 남성 양말 검색 플로우 만들어줘”라고 하면, 사이트를 탐색하며 시나리오를 만들어 등록까지 한 번에 처리합니다.

기대 효과

  • 누구나 작성 가능 — No-Code UI + AI 자동 생성으로 개발자 외에도 QA·기획자가 직접 케이스 추가
  • 수동 테스트 최소화 — 자동 스케줄링으로 다수 브랜드를 24시간 커버
  • 빠른 문제 감지 — 실시간 Slack 알림 + 영상 + AI 진단으로 디버깅 시간 단축
  • 워크플로우에 자연스럽게 녹음 — MCP로 IDE/CLI에서 바로, 데스크톱 에이전트로 로컬에서 바로
  • 결과의 신뢰 — 영상·스크린샷·비주얼 diff·AI 분석이 한 번 실행에 모두 첨부