테스트 자동화의 배경과 동기
본 프로젝트는 팀이 웹 애플리케이션 테스트 중 겪은 문제점을 근간으로 시작되었습니다. 핵심 비즈니스 프로세스(프로젝트 제안서 작성, OA 시스템 상신 등)가日益 복잡해짐에 따라 수동 테스트의 비용이 급증하고, 커버리지 확보가 어려워졌습니다. 이에 playwright-cli 도구를 도입하여 AI 에이전트와 결합, 자연어로 기술한 테스트 의도를 자동으로 실행 가능한 브라우저 자동화 스크립트로 변환하여 테스트 자산을 저장하고, 회귀 테스트 비용을 절감하는 동시에 테스트 효율성을 극대화했습니다.
테스트 자동화의 실제 적용 사례
- 프로젝트 제안서 작성 프로세스: 제안서 작성 및 제출을 위한 수동 입력과 페이지 이동이 발생하며, 한번의 수동 회귀 테스트가 5~10분 소요됩니다.
- OA 시스템 상신: 제안서 작성 후 OA 시스템에 상신, 승인 처리를 위한 여러 단계의 작업이 필요합니다.
- 권한 검증 테스트: 다양한 역할 기반 유저가 접근 제어를 검증하기 위해 여러 계정을 전환하며 테스트를 수행합니다.
이상의 사례들은 "상호작용 단계가 고정적이고, 반복 수행이 가능하며, 빈번히 실행되는" 특성을 지닙니다. 이는 테스트 자동화의 이상적인 적용 대상입니다.
Playwright-CLI란?
Playwright-CLI는 Microsoft가 Playwright를 기반으로 만든 브라우저 자동화용 명령행 도구입니다. AI 프로그래밍 어시스턴트와 유기적으로 결합될 수 있도록 디자인되었습니다. playwright-cli는 브라우저 제어 기능을 open, goto, click, fill, snapshot, screenshot, run-code 등의 단순 명령 집합으로 제공하며, 각 명령은 YAML 형식의 페이지 스냅샷을 반환합니다. 이는 AI 에이전트의 추론 비용을 극소화합니다.
테스트 솔루션 설계 단계
단계 1: playwright-cli 초기 접촉
테스트를 위한 최초의 브라우저 테스트를 수행했습니다. AI 에이전트가 브라우저를 제어하여 로그인 페이지로 이동, 계정 정보를 입력, 로그인 버튼을 클릭하는 등의 작업을 수행했습니다. 이 단계에서 테스트 자산이 저장되지 않음이 문제점으로浮现되었습니다.
단계 2: 테스트 단계 저장을 위한 .md 파일 도입
테스트 단계를 markdown 파일로 저장하여 재사용성을 확보했습니다. 그러나 AI 에이전트가 단계를 지침으로만 받아들이는 대신 자유롭게 수정함으로써 테스트 실행의 일관성을잃는 문제점이 발생했습니다.
단계 3: 강제 제약 조건 추가
.md 파일에 CRITICAL RULES 섹션을 추가하여 AI 에이전트가 단계를 엄격하게 준수하도록 했습니다. 예를 들어:
- snapshot 명령을 사용하지 않도록 제한
- waitForTimeout 대신 waitForURL 사용
- .md 파일에 기술된 단계를 그대로 실행
단계 4: 배치 그룹화와 의존성 관리
복잡한 테스트 프로세스를 배치 단위로 나누어 실행했습니다. 또한 두 시스템 간 데이터 전달을 위해 localStorage를 활용하는 방법을 도입했습니다.
단계 5: 테스트 작성 방법론의 자동화
테스트 작성 경험을 Skill 1로 추상화하여 테스트 작성 시간을 단축했습니다. Skill 1는 표준화된 .md 파일을 생성하고, 복잡한 JS 로직을 scripts 디렉터리에 분리 저장합니다.
단계 6: 테스트 실행의 표준화
Skill 2를 통해 테스트 수행을 표준화했습니다. 이는：
- 테스트 파일을 스캔하여 실행 순서를 결정
- 각 테스트에 독립된 세션을 할당
- haiku 모델을 사용하여 병렬 실행
기술 솔루션 개요
층 구조 설명
솔루션은 총 다섯 층으로 구성되어 있습니다:
- 입력 층: 테스트 의도를 자연어로 입력
- AI 에이전트 층: Skill 1, 2, 3을 통해 테스트를 생성, 실행, 최적화
- 테스트 실행 층: playwright-cli를 통해 브라우저를 제어
- 테스트 자산 층: .md와 .js 파일로 테스트 자산을 저장
- 최적화 층: 테스트 지표를 기반으로 지속적인 성능 개선
코드 생성 층
테스트 실행 후 다음과 같은 자산이 생성됩니다:
| 자산 유형 | 파일 형식 | 저장 위치 | 설명 |
|---|---|---|---|
| 테스트 케이스 문서 | .md | tests/ | 세션 선언, 배치 그룹핑, 제약 조건, 예상 결과 포함 |
| 스텝 스크립트 라이브러리 | .js | scripts/ | 복잡한 JS 로직을 모듈화하여 저장 |
| 프리리퀴즈 모듈 | .md | tests/00-\*-prerequisite.md | 공통 사용되는 프로세스(예: SSO 로그인)를 저장 |
| 구성 및 툴 | .json/.py/.js | scripts/ | 브라우저 구성, 로그 분석, 화면 녹화 검출 |
최적화 층
테스트 지표가 설정치를 초과할 때 Skill 3가 활성화됩니다:
- 로그 분석: jsonl 파일에서 도구 호출 수, 토큰 사용량, 수행 시간을 추출
- 성능 저하 패턴 인식
- 개선 제안
- 수동 확인 후 재실행
실행 단계
테스트 케이스 생성
예를 들어 다음과 같이 입력하면：
테스트 케이스 추가: OA 시스템 상신 프로세스
Skill 1가 활성화되어：
- 브라우저를 실행하고 페이지로 이동
- 페이지 구조를 탐험
- .md 파일을 생성
- 복잡한 JS 로직을 scripts 디렉터리로 분리
테스트 실행
테스트를 실행하려면：
모든 테스트 실행
또는 특정 테스트만：
테스트 04 실행
Skill 2가：
- 독립된 브라우저 세션을 할당
- 병렬로 실행
- 결과 보고서를 출력
테스트 최적화
성능 저하가 발견되면：
테스트 04 최적화
Skill 3가：
- 실행 로그를 분석
- 개선 사항을 제안
- 확인 후 재실행
프로젝트 구조
playwright-test/ ├── tests/ │ ├── 00-login-prerequisite.md │ ├── 00-oa-approve-prerequisite.md │ ├── 01-login-feedback.md │ └── 04-pre-project-initiation.md ├── scripts/ │ ├── 04-step1-navigate.js │ ├── 04-step2-basic-info.js │ └── parse-agent-log.py ├── .claude/skills/ │ ├── adding-playwright-cli-tests/ │ ├── running-playwright-cli-tests/ │ └── optimizing-playwright-cli-tests/ ├── playwright-cli-config.json ├── screenshots/ └── videos/