playwright
무엇인가
Playwright는 브라우저 자동화 계층과 그 위의 테스트 러너를 한 저장소에서 제공하는 TypeScript 프레임워크다. Selenium·WebDriver가 차지하던 자리를 단일 API로 대체한다. 테스트 실행기, 스크립트용 라이브러리, 코딩 에이전트용 CLI, MCP 서버, VS Code 확장이 같은 브라우저 제어 코어를 공유한다.
어떻게 동작하나
설치하면 Chromium, Firefox, WebKit 바이너리를 내려받아 로컬에 두고, 각 브라우저를 별도 프로세스로 띄운다. Chromium은 Chrome DevTools Protocol로, 나머지는 Playwright 자체 프로토콜로 제어한다. 테스트마다 새 browser context를 만들어 쿠키와 스토리지가 격리된다. locator는 역할·텍스트·접근성 속성 기준으로 요소를 찾고, 요소가 조작 가능한 상태가 될 때까지 자동으로 재시도한다. 실행 중에는 DOM 스냅샷, 네트워크 요청, 콘솔 메시지, 스크린샷을 trace 파일로 기록하고 Trace Viewer에서 재생한다. MCP 서버는 페이지를 접근성 트리 스냅샷으로 직렬화해 에이전트에 넘기고, `e5` 같은 element ref로 클릭·입력을 수행하게 한다.
무엇과 다른가
Selenium은 브라우저별 드라이버 실행 파일과 WebDriver 원격 프로토콜을 경유하고 테스트 러너를 따로 골라야 한다. Playwright는 드라이버 관리와 러너를 내장하고 대기 로직을 프레임워크가 담당한다. Cypress는 테스트 코드가 브라우저 컨텍스트 안에서 실행되는 구조이고, Playwright는 프로세스 밖에서 브라우저를 제어한다. MCP 서버 대신 CLI를 쓰면 도구 스키마와 접근성 트리를 모델 컨텍스트에 싣지 않아 토큰 소모가 줄어든다.
어떻게 쓰나
`npm init playwright@latest`로 프로젝트를 초기화하면 `playwright.config.ts`와 예제 테스트가 생성된다. `npx playwright test`는 설정된 모든 브라우저에서 테스트를 병렬 실행하며 기본은 헤드리스 모드다. 로그인 상태는 storageState로 한 번 저장해 여러 테스트에서 재사용한다. MCP는 VS Code, Cursor, Claude Desktop 같은 클라이언트 설정에 서버를 등록해 연결한다. VS Code 확장은 편집기 안에서 실행·디버깅, CodeGen 녹화, locator 추출을 맡는다.
전제와 한계
Node.js 런타임이 필요하고 브라우저 바이너리는 패키지와 별도로 내려받는다. WebKit 지원은 Apple Safari가 아니라 Playwright가 빌드한 WebKit이며, Chromium은 기본적으로 Chrome for Testing을 사용한다. 헤드리스와 헤디드 실행을 모두 지원한다. Python, .NET, Java 바인딩이 별도로 제공되지만 CLI와 MCP 서버는 Node.js 패키지다.