[TIL] Claude Code 에서 Playwright Test Agents 활용하기 [못함!]

 

Claude Code Agent 를 만들어서 E2E Test 를 만들고 있는데 속도가 많이 나질 않아, 

Playwright 에서 제공하는 공식 Test Agents (Planner/ Generator/ Healer) 를 사용하려고 한다 

 

1. 공식 문서 

https://playwright.dev/docs/test-agents

Agents | Playwright

 

 

 

2. Init

프로젝트에 에이전트의 정의를 추가한다

npx playwright init-agents --loop=claude

 

3. Role of Agents

1) playwright-test-planner (테스트 계획자)

역할: 웹 애플리케이션의 테스트 계획 수립

색상: 초록색

주요 기능:

• 브라우저 탐색 및 인터페이스 분석
• 사용자 플로우 매핑
• 테스트 시나리오 설계 (정상 경로, 엣지 케이스, 에러 처리)
• 테스트 계획 문서 작성 (마크다운)

특징:

• planner_setup_page 로 페이지 설정
• 각 시나리오에 제목, 단계별 지시, 예상 결과 포함
• 테스트 케이스별 구현 파일명 제안

2) playwright-test-generator (테스트 생성기)

역할: 테스트 계획을 바탕으로 Playwright 자동화 테스트 코드 생성

색상: 파란색

주요 기능:

• 테스트 계획 읽기 및 분석
• 브라우저에서 실제 동작 실행
• 실행 로그 기반 테스트 코드 생성
• Playwright 테스트 파일 작성

특징:

• generator_setup_page 로 시나리오 페이지 설정
• 각 단계를 실제로 실행하며 검증
• generator_read_log 로 로그 확인 후 generator_write_test 로 코드 생성
• 단계별 주석 포함

3) playwright-test-healer (테스트 수정자)

역할: 실패한 Playwright 테스트 디버깅 및 수정

색상: 빨간색

주요 기능:

• 실패한 테스트 식별 (test_run)
• 테스트 디버깅 (test_debug)
• 에러 원인 분석 (셀렉터, 타이밍, 데이터 의존성)
• 테스트 코드 수정 및 검증

특징:

• 체계적 디버깅 접근
• 동적 데이터는 정규식으로 처리
• 수정 후 재실행으로 검증
• 해결 불가 시 test.fixme() 로 표시

4. Use of Agents

Step 1) Plan 

먼저 의존성이 겹치지 않는 시나리오를 그룹으로 나누고

각 그룹마다 Planner 에게 Spec 을 생성하도록 요청한다

 

🐣 여러 개의 Agent 를 병렬로 띄우는 방법도 있지만 의존성 문제도 있으니, 

생성 전에 의존성이 겹치지 않는 시나리오를 그룹화하고,

같은 페이지/ 컴포넌트를 확인하도록 요청한다 🐣

Step 2) Generator 

그룹별로 Agent 를 병렬로 띄워서 작성하라고 요청한다 

생성된 테스트는 “완벽”을 기대하지 말고, healer로 후처리하는 것을 전제로 한다

 

Step 3) Healer

전체 Suite 실행 후 실패한 Test Case 에 대해서 Healer Agent 를 사용하고, 병렬로 띄워서 처리하라고 요청한다 

기능 자체 이슈라면 skip 처리로 명시해(예: fixme/skip) 제품 이슈와 테스트 이슈를 분리한다

 

 

5. ChatGPT 가 알려준 꿀팁 

“속도”가 안 나는 원인 & 병렬 운영 규칙(현실 팁)

Claude Code에서 병렬로 돌릴 때 제일 흔히 느려지는 이유는 보통 이거야:

• 동일 페이지/동일 계정/동일 데이터를 여러 에이전트가 동시에 만짐 → 상태가 서로 꼬임(의존성 충돌)
• seed가 약하거나(로그인/초기화 불안정), 테스트 데이터가 고정이라(하드코딩), healer가 계속 같은 지점에서 루프

그래서 병렬 돌릴 때는 이렇게 “룰”을 잡는 게 체감 속도에 바로 영향 있어:

1. 시나리오를 “페이지/기능” 단위로 묶고, 서로 다른 페이지는 병렬 가능
2. 병렬 작업은 가능하면 서로 다른 테스트 계정/테스트 데이터를 쓰게 하기
3. generator는 “생성”까지만, healer는 “수리”만 하게 역할 고정
4. healer에게는 항상 “무엇을 고치면 안 되는지”를 명시
   • 예: “대기시간 무한 증가 금지”, “텍스트 매칭을 정규식으로 완화해도 되는 범위”, “id 기반 locator 우선” 등

 

참고한 영상 

https://youtu.be/prTGyqWMxw8?si=juqOr3j6mwd4URnl

+ 영상을 다 보고 댓글에서 Pro 는 토큰을 엄청 잡아 먹는다는 말을 봤다,.ㅎ 

그래도 써보려고 했는데 실행이 되지 않는다, 에잇!!!!

error: unknown command 'init-agents'

 

ChatGPT 한테 물어보니까, 이렇다고 한다 

 

공식 문서는 “미래/실험 기능”을 포함하고 있음 

✅ Playwright 팀이 설계한 공식 방향 

❌ 모든 사용자에게 이미 배포된 CLI 기능은 아님 

문서에 있다고 = 지금 내 로컬에서 바로 되는 것 아님!! 

으아 건방져!!