AI 에이전트 시대에 코딩 속도가 빨라졌음에도 불구하고, 에이전트가 생성한 코드의 검증은 병목 현상으로 작용합니다. 기존 단위 테스트(Unit Test)만으로는 컴포넌트 경계에서 발생하는 오류나 실제 실행 환경에서의 문제를 감지하기 어렵습니다. 이는 Kent C. Dodds의 Testing Trophy에서 최상단에 위치하며 가장 높은 확신을 제공하는 End-to-End (E2E) 테스트의 필요성을 부각시킵니다. 본 발표에서는 Playwright를 활용하여 AI 에이전트의 작업을 검증하고, 나아가 에이전트가 스스로 테스트를 작성하고 수정하며 개선하는 자가 개선 루프(Self-Improvement Loop)를 구축하는 방법에 대해 다룹니다.

1. Playwright E2E 테스트의 장점

• 실제 사용자 경험 검증 (Real User Experience Validation): Playwright는 Node.js나 JSDom 환경이 아닌 실제 브라우저 환경에서 사용자의 클릭, 화면 전환 등을 검증하여 함수 단위가 아닌 사용자 경험 관점에서 오류를 찾아냅니다.
• 테스트 코드의 명세(Specification) 역할: "페이지 이동", "버튼 클릭"과 같이 브라우저를 사용하는 것과 유사한 코드는 그 자체로 사용자 명세(User Specification) 역할을 수행합니다. 코드가 변경되면 명세도 함께 업데이트되므로, 별도의 문서 관리 없이 최신 상태를 유지할 수 있습니다.
• 에이전트를 위한 풍부한 리포트 (Rich Reports for Agents): Playwright는 테스트 실행 후 HTML 리포트, 스크린샷, 실행 비디오, DOM 스냅샷, 네트워크 로그, 콘솔 로그 등 구조화된 데이터를 제공합니다. 이 양질의 데이터는 에이전트가 테스트 실패의 원인을 분석하고 수정안을 도출하는 데 필요한 중요한 정보원이 됩니다.

2. E2E 테스트 구축 및 운영 전략

• 테스트 대상 선정 (Critical User Flows): 모든 기능을 테스트하는 것은 비현실적이므로, 매출에 직접적인 영향, 데이터 손실, 사용자 신뢰도 하락 등 제품의 핵심 가치와 직결되는 '크리티컬 유저 플로우(Critical User Flows)'를 우선적으로 선정하여 테스트를 구축합니다.
• 테스트 코드 작성 자동화 (Agent-Assisted Test Creation):
  • Playwright Codegen: 초기 테스트 코드 작성을 위해 Playwright의 공식 codegen 도구를 활용하여 사용자의 브라우저 인터랙션을 코드로 자동 생성합니다.
  • Playwright New Agent System: Playwright는 테스트 작성 및 유지보수를 위한 세 가지 에이전트 시스템을 제공합니다.
    • Planner Agent: 코드베이스와 앱을 탐색하여 마크다운 형태의 테스트 계획서(Test Plan)를 작성합니다. 이는 사람이 테스트 시나리오를 검토하는 데 활용됩니다.
    • Generator Agent: Planner가 만든 계획서를 바탕으로 실제 Playwright 테스트 코드를 생성합니다. 각 단계를 브라우저에서 실행하며 코드를 생성하고 정상 동작 여부를 확인합니다. 이는 계획과 구현을 분리하여 에이전트의 작업 완성도를 높이는 목적을 가집니다.
    • Healer Agent: 실패한 테스트를 자동으로 진단하고 수정합니다. Playwright의 트레이스 파일(Trace File)을 분석하여 실패 원인을 파악하고, 테스트를 통과할 때까지 수정과 재실행을 반복합니다.
• 에이전트 Harness 구축: 에이전트가 효율적으로 작업하도록 돕기 위한 맥락과 환경을 제공하는 '하네스(Harness)' 구축이 필수적입니다.
  • agent.md: 서비스 개요, 핵심 플로우, 인증/접근 제어 등 코드베이스에 대한 전반적인 안내 문서를 제공합니다.
  • E2E 테스트 가이드 문서: 테스트 운영 및 작성 규칙, 실행 환경, 인증 시나리오, 테스트 범위 등을 명시합니다.
  • Utility/Helper functions: 인증, 상태 초기화, 데이터 세팅 등 반복되는 작업을 위한 유틸리티 함수들을 구성합니다.
  • MCP Server: 기획서, 디자인, 이슈, PR 등 사내 논의된 컨텍스트에 에이전트가 접근할 수 있도록 연동합니다.
• E2E 테스트 설계 최적화:
  • 상태 준비(State Preparation): 각 테스트는 독립적으로 시작할 수 있도록, 테스트용 API 호출 등을 통해 약관 동의나 휴대폰 인증과 같은 공통 시작점 이후의 상태를 미리 설정하고 테스트를 시작합니다.
  • 외부 의존성 Mocking: 네이버 인증서, 홈택스 연동 등 외부 서비스에 대한 의존성은 Playwright의 page.route()를 통한 응답 Mocking 또는 환경 변수를 이용한 고정 응답 반환 등으로 처리하여 테스트의 안정성과 속도를 확보합니다.
  • 플레이키(Flaky) 테스트 방지:
    • 하드 대기(e.g., waitForTimeout) 대신 조건 기반 대기(Conditional Wait)를 사용합니다.
    • CSS 클래스명보다 role이나 name 같은 시맨틱 셀렉터(Semantic Selector)를 사용하여 UI 변경에 강건하게 만듭니다.
    • 테스트 작성 직후 repeat 플래그를 사용하여 여러 번 반복 실행(burn-in)하여 플래키 여부를 즉시 확인합니다.

3. 자가 개선 루프(Self-Improvement Loop)

AI 에이전트가 스스로 코드를 작성하고 테스트로 검증하는 사이클을 '자가 개선 루프'라고 합니다. 에이전트는 CI/CD 파이프라인에서 E2E 테스트가 실패하면, PR 머지가 차단되고 실패 코멘트를 받습니다. 이때 에이전트는 playwright trace 파일을 다운로드하고 디버깅하여 실패 원인을 분석하며, Healer Agent가 테스트를 수정하고 다시 PR을 업데이트하는 과정을 반복합니다. 이러한 루프 안에서 에이전트는 한 번에 완벽한 작업을 해내지 못해도 스스로 학습하고 개선할 수 있게 됩니다.

4. 사람의 역할: Harness Engineering

에이전트가 자가 개선 루프를 원활하게 수행하려면 사람의 역할이 중요합니다. 안드레 카파시(Andre Karpathy)의 "사고는 위임할 수 있어도 이해는 위임할 수 없다"는 말처럼, AI 에이전트는 코드의 맥락이나 프로덕션 환경의 영향에 대한 이해가 부족합니다. 따라서 사람의 역할은 다음과 같습니다.

• 자가 개선 루프 설계: 에이전트의 계획, 코드 작성, 수정 흐름을 설계하고 검토합니다.
• 도구 및 맥락 제공: agent.md, 가이드 문서, MCP, Skill 등 코드만으로는 알 수 없는 도메인 지식, 테스트 전략, 환경 정보를 에이전트에게 제공합니다.
• 지속적인 Harness 진화: 모델의 발전과 도메인 변경에 따라 하네스도 함께 진화시켜, 에이전트가 더 높은 수준의 작업을 수행하도록 지원합니다.

결론적으로, Playwright E2E 테스트는 에이전트의 작업을 검증하는 '센서(Sensor)' 역할뿐만 아니라, 에이전트에게 작업의 '명세(Specification)'를 제공하는 '가이드(Guide)' 역할을 동시에 수행합니다. 이는 AI 에이전트가 스스로 코드를 작성하고 개선하는 자가 개선 루프를 구축하는 핵심적인 요소이며, 에이전트가 '올바른 행동을 쉽게 할 수 있도록' 환경을 만드는 '하네스 엔지니어링'이 이 시대 개발자의 중요한 역할임을 강조합니다.