테스트 코드를 한 줄도 작성하지 않고 2시간 만에 110개의 실패한 E2E 테스트를 고쳤다

Source: Dev.to

110개의 실패한 Playwright 테스트. 로그인 흐름, 다단계 폼 마법사, 검색 필터, 파일 업로드, 복잡한 사용자 워크플로우 등. 일부 실패는 UI 단계가 누락된 것이었고, 일부는 이전 실행에서 남은 더러운 상태였으며, 또 다른 일부는 오래된 셀렉터 때문이었습니다. 나는 테스트 코드를 한 줄도 작성하지 않고 2시간 만에 모두 해결했습니다.

나는 이를 수행하는 playwright‑autopilot 플러그인을 만들었습니다.

Source: …

디버깅 워크플로우가 실제로 작동하는 방식

플러그인을 통해 테스트를 실행하면, 가벼운 캡처 훅이 Playwright의 워커 프로세스에 주입됩니다. 이 훅은 BrowserContext._initialize를 몽키패치하여 계측 리스너를 추가합니다—Playwright 소스 코드를 수정할 필요 없이 기존 설치와 모두 호환됩니다.

그 시점부터 모든 브라우저 동작이 기록됩니다:

• DOM 스냅샷 – 클릭, 입력, 선택, 네비게이션 전후에 페이지의 전체 ARIA 트리를 캡처합니다. 테스트가 실패하면 실패 순간과 그 바로 이전 단계의 페이지 모습을 정확히 확인할 수 있습니다.
• 네트워크 요청 – URL, 메서드, 상태 코드, 타이밍, 요청 본문, 응답 본문을 기록합니다. 상태(예: 400 이상), URL 패턴, 메서드별로 필터링할 수 있습니다.
• 콘솔 출력 – 오류, 경고, 로그가 해당 동작과 연결되어 표시됩니다. 전체 텍스트가 아니라 관련 단계에 한정되어 스코프됩니다.
• 스크린샷 – 실패 지점에서 캡처됩니다.

AI는 이 모든 데이터를 한 번에 덤프하지 않습니다. MCP(Model Context Protocol)를 기반으로 하여 필요에 따라 데이터를 가져옵니다: 먼저 액션 타임라인, 다음으로 실패한 단계, 그 다음 DOM 스냅샷, 네트워크 응답, 콘솔 로그 순으로 요청합니다. 32개의 도구가 필요한 부분만 반환하도록 설계되어 토큰 효율성을 유지합니다.

사용자 흐름을 생각하고, 선택자를 생각하지 않는다

코드를 건드리기 전에, 에이전트는 의도된 사용자 여정을 매핑합니다 (예: “사용자가 로그인하고, 다단계 양식을 작성하고, 파일을 업로드하고, 제출한다”). 실제 사용자가 수행할 단계들을 따라가며 테스트가 실제로 수행한 것과 비교합니다.

단계가 누락된 경우—드롭다운이 선택되지 않거나, 필수 필드가 채워지지 않거나, 라디오 버튼이 클릭되지 않은 경우—에이전트는 코드베이스에서 기존 페이지‑객체 메서드를 찾아 호출을 추가합니다. 새로운 추상화는 없으며, 차이는 최소입니다.

귀하의 아키텍처를 따릅니다

• Page Object Model, 비즈니스/서비스 레이어 또는 팀에서 사용하는 모든 패턴과 함께 작동합니다.
• getByRole(), getByTestId(), 웹‑우선 어설션을 사용합니다.
• page.evaluate() 해킹, waitForTimeout, 또는 Playwright 동작 주변의 try/catch 사용을 피합니다.

애플리케이션 자체에 문제가 있는 경우(예: 500 오류, 처리되지 않은 예외), 플러그인은 이를 우회하려고 시도하는 대신 해당 문제를 보고합니다.

It learns and remembers

After a test passes, the plugin automatically saves the verified user flow—the exact sequence of interactions that constitute the happy path. The next time that test breaks, the agent already knows the intended journey and jumps straight to identifying what changed.

Running e2e_build_flows once across your suite captures every test’s journey; the agent gets faster over time.

실제 예시

결제 테스트가 “locator resolved to hidden element.” 오류로 실패했습니다. 일반적인 디버깅 절차는 다음과 같습니다:

1. 트레이스 뷰어 열기.
2. 실패한 단계를 찾기.
3. DOM 읽기.
4. 국가 드롭다운이 선택되지 않아 배송 섹션이 렌더링되지 않았음을 확인합니다.

경험이 있는 개발자에게도 약 20 분 정도 소요될 수 있습니다.

플러그인은 단 한 번의 실행으로 동일한 근본 원인을 찾았습니다. 실패 단계에서 DOM 스냅샷을 가져와 ARIA 트리에서 선택되지 않은 드롭다운을 확인하고, 페이지 객체에서 selectCountry()를 검색한 뒤 서비스 레이어에 호출을 추가했습니다. 테스트를 다시 실행했으며 통과했습니다. 한 번의 수정으로 AI 처리 시간은 약 12 초였습니다.

시작하기

# Add the marketplace entry
/plugin marketplace add kaizen-yutani/playwright-autopilot

# Install the plugin
/plugin install kaizen-yutani/playwright-autopilot

# Then prompt the AI
Fix all failing e2e tests

Try it out: https://github.com/kaizen-yutani/playwright-autopilot – 레포에 ⭐️를 달고, 가장 불안정한 테스트에 실행해 본 뒤, 어떤 문제가 발생하는지 알려 주세요.