Playwright 1.56에는 테스트 스위트를 계획하고, 그에 맞는 TypeScript 스크립트를 작성하며, 깨진 로케이터(locator)를 즉시 복구하는 세 가지 내장 AI 에이전트가 탑재되었습니다. 그 결과, 고된 수동 테스트 작업이 AI 지원 워크플로우로 변모합니다.

이 변화가 중요한 이유

자동화 엔지니어들은 오랫동안 반복적인 루프를 따라왔습니다. 요구사항을 테스트 케이스로 변환하고, 스크립트를 직접 코딩하고, 실행한 뒤, UI가 변경될 때마다 불안정한 셀렉터(selector)를 찾아다니는 과정입니다. 특히 빠르게 변화하는 프론트엔드 환경에서는 유지보수 오버헤드가 자동화로 절약한 시간을 압도할 수도 있습니다. Playwright는 테스트 프레임워크에 AI 에이전트를 직접 내장함으로써 '수정 후 실행(fix-and-run)' 사이클을 단축하고, 엔지니어가 셀렉터 찾기 대신 고차원적인 테스트 전략에 집중할 수 있게 해줍니다.

세 가지 에이전트 설명

  • Planner Agent – 애플리케이션이 수행해야 할 동작을 자연어로 설명하면, 라이브 사이트를 탐색하여 구조화된 Markdown 계획을 출력합니다. 이 계획에는 주요 사용자 흐름과 엣지 케이스(edge-case) 시나리오가 나열되어 있어, 코드를 작성하기 전 명확한 청사진을 제공합니다.
  • Generator Agent – Markdown 계획을 바탕으로 실행 가능한 TypeScript 테스트 코드를 생성합니다. 실행 중인 브라우저와 통신하여 셀렉터가 안정적인지 확인하며, 지시가 있을 경우 Page Object Model(페이지 구조와 테스트 로직을 분리하는 디자인 패턴)을 따를 수 있습니다.
  • Healer Agent – 테스트 실행을 모니터링합니다. UI 변경으로 인해 실패가 발생하면, 실패한 단계를 재실행하고 업데이트된 DOM을 검사하여 수정된 셀렉터나 로케이터를 제안합니다. 이 제안은 개발자가 수락하거나 수정할 수 있는 초안 패치(draft patch) 형태로 나타납니다.

에이전트들은 Planner → Generator → Healer로 이어지는 "에이전트 루프(agentic loop)" 방식으로 작동합니다. 각 단계는 다음 단계로 정보를 전달하며, 테스트 대상 애플리케이션과 동기화된 상태를 유지하는 자가 조정 파이프라인을 생성합니다.

일반적인 AI 도구와의 차이점

채팅 방식의 모델이나 코드 완성 확장 프로그램은 코드 스니펫을 생성할 수는 있지만, 라이브 DOM과 특정 프로젝트 설정에 직접 접근할 수 있는 능력이 부족합니다. Playwright의 에이전트는 현재 페이지 구조와 테스트 프레임워크 설정을 모델로 스트리밍하는 Model Context Protocol을 사용하여, AI가 상호작용할 정확한 요소에 대해 추론할 수 있도록 합니다. 이렇게 생성된 코드는 문법적으로 정확할 뿐만 아니라, 생성 시점의 실제 UI에 고정되어 있습니다.

몇 가지 명령어로 시작하기

  1. Node 프로젝트를 설정하고 Playwright를 의존성으로 추가합니다.
  2. npx playwright init-agents --loop=vscode를 실행하여 에디터 내에서 AI 루프를 부트스트랩합니다.
  3. 애플리케이션을 로드하는 최소한의 "시드(seed)" 테스트를 작성합니다. 이는 에이전트에게 구체적인 컨텍스트를 제공합니다.
  4. 자연어 프롬프트(예: "할인 코드를 포함하는 결제 흐름을 생성해줘")를 입력하여 Planner를 트리거하고, Generator가 스크립트를 생성하게 하며, Healer가 이를 건강하게 유지하도록 합니다.

에이전트를 더 잘 활용하기 위한 팁

  • 명확한 시드 테스트 – 초기 테스트는 애플리케이션을 안정적으로 실행하고 주요 UI 요소를 노출해야 합니다. 모호한 진입점은 Planner를 혼란스럽게 할 수 있습니다.
  • 구조화된 시드 데이터 – 예상되는 입력을 설명하는 JSON 픽스처(fixtures)를 제공하면 Generator가 적절한 셀렉터를 선택하는 데 도움이 됩니다.
  • Page Object Model 요청하기 – Generator에게 페이지 오브젝트를 스캐폴딩(scaffold)하도록 명시적으로 지시하면 더 깔끔하고 유지보수가 쉬운 코드를 얻을 수 있습니다.
  • AI 출력을 초안으로 취급하기 – 생성된 스크립트를 커밋하기 전에 반드시 검토하십시오. 에이전트가 비즈니스 로직의 미묘한 차이를 놓치거나 지나치게 일반적인 셀렉터를 생성할 수도 있습니다.

리스크 및 반론

다음 주목할 점