Playwright CLI는 Playwright 제품군의 새로운 도구로, Playwright MCP와 비교하여 더 나은 토큰 효율성과 확장된 기능을 제공합니다.

시연에서는 playwright.dev 페이지를 열고, "locators"를 검색하며, 여러 언어로 된 문서의 가용성을 확인하고, 각 언어 문서의 스크린샷을 찍는 동일한 작업을 수행했습니다. 이 작업에서 Playwright MCP는 114,000 토큰을 소비한 반면, Playwright CLI는 단 26,800 토큰만을 소비했습니다.

Playwright MCP의 높은 토큰 소비는 주로 다음과 같은 이유 때문입니다:

1. 페이지 탐색 시: playwright.dev와 같이 콘텐츠가 많은 페이지로 이동할 때, Playwright MCP는 아무리 효율적이라도 전체 DOM 구조와 JavaScript 등을 포함하는 모든 accessibility snapshot을 LLM에게 전송하여 LLM의 context window를 압도합니다.
2. 스크린샷 촬영 시: LLM의 요청에 따라 스크린샷을 촬영하면, LLM이 스크린샷의 모든 바이트를 컨텍스트로 받아들이게 되어 높은 토큰 비용이 발생합니다. 실제로는 단순히 스크린샷을 디스크에 저장하는 것이 목표였음에도 불구하고 LLM에게 직접 전송됩니다.

반면 Playwright CLI의 핵심 방법론은 토큰 효율성에 중점을 둡니다. Playwright CLI는 데이터를 LLM에 직접 전송하는 대신, 모든 출력 데이터를 파일로 저장합니다. 예를 들어, 페이지 스냅샷이나 스크린샷은 디스크에 저장됩니다. 이렇게 하면 coding agent가 필요한 경우에만 해당 파일에서 데이터를 읽어 LLM으로 보낼지 여부를 결정할 수 있습니다. LLM이 실제로 필요로 하지 않는 데이터는 컨텍스트에 포함되지 않으므로 토큰 소비가 크게 줄어듭니다.

기능적인 측면에서, Playwright MCP는 기본적으로 수십 개의 명령만 활성화되어 있습니다. 이는 명령이 컨텍스트를 소비하기 때문이며, Playwright CLI의 모든 기능이 MCP를 통해 기술적으로 가능하더라도 기본적으로는 비활성화되어 있습니다. 그러나 Playwright CLI는 이러한 제한이 없어 모든 명령을 노출할 수 있습니다.

두 도구의 적절한 사용 사례는 다음과 같습니다:

• Playwright CLI: Claude Code, GitHub Copilot과 같은 coding agent의 일부로 사용될 때 가장 효과적입니다. coding agent는 파일에 접근하고 수정할 수 있으므로, Playwright CLI가 디스크에 저장한 스냅샷이나 스크린샷을 읽고 LLM에 보낼 부분을 효율적으로 결정할 수 있습니다. Playwright CLI는 skill-based이므로 Playwright 및 시나리오에 대한 지식을 스킬을 통해 추가할 수 있으며, 다른 skill-based 도구와 상호 운용이 가능합니다. 또한, 많은 백그라운드 에이전트 실행을 가정하여 기본적으로 headless 모드로 작동합니다.
• Playwright MCP: 모든 generic agent와 함께 작동하며, 엄격한 표준을 따릅니다. 그러나 모든 응답이 LLM으로 돌아가 LLM의 컨텍스트를 압도할 가능성이 있습니다. 그럼에도 불구하고, 여러 브라우저를 지원하며, 도구의 효율성은 수동으로 설정하여 최적화할 수 있습니다. 역사적으로는 Playwright의 기본 도구였습니다.

요약하자면, 코딩 에이전트를 사용하여 코딩, 테스트 등의 작업을 수행한다면 Playwright CLI가 적합하고, 특정 시나리오를 위한 agentic loop를 작성하는 경우에는 Playwright MCP가 여전히 효과적인 선택입니다.