제출 링크는 브라우저가 먼저 엽니다 | DAKER 커뮤니티

오늘은 MCP 소식이 아닙니다. 새 모델 발표도 아닙니다. 오늘 노트는 제출할 공개 주소를 headed 브라우저로 한 번 통과시키는 실험입니다. 배포가 제출입니다. 올린 링크가 제출입니다. 그 링크를 코딩 에이전트가 먼저 열게 하는 순서입니다.

제출 링크 / 브라우저가 먼저

참고 영상은 Claude Code + Playwright Automates Literally Anything.입니다. 영상 제목 그대로입니다. 오늘 숙제에 쓰는 장면은 첫 사용처뿐입니다. 에이전트가 폼을 만들고, headed Playwright를 돌리고, 버그를 찾고, 고치고, 다시 돌려 통과할 때까지 가는 루프입니다. 명령의 기준은 영상이 아닙니다. 공식 README입니다. 원문은 playwright-cli README입니다. 저장소는 microsoft/playwright-cli입니다. MCP 쪽 설명은 microsoft/playwright-mcp를 읽습니다. CLI와 MCP를 같은 화면에서 비교한 보조 영상은 이 주소입니다. 보조 영상에 나온 토큰 비율 숫자는 이 글에 적지 않습니다. 공식 문서는 그 비율을 발표하지 않습니다. 이 글은 방송 대본이 아닙니다. 오늘 해커톤 제출 링크를 올리기 전에 돌릴 최소 QA입니다.

영상이 실제로 한 일입니다

영상의 첫 사용처는 QA 루프입니다. 에이전트에게 폼을 만들라고 시킵니다. 만든 뒤에는 사람이 손으로 눌러 보지 않습니다. headed Playwright로 그 폼을 직접 타게 합니다. 화면이 보이는 상태에서 흐름을 타고, 막히는 지점을 기록하고, 코드를 고치고, 같은 흐름을 다시 탑니다. 통과할 때까지 그 루프를 닫습니다.

영상이 잡아 낸 실패는 세 갈래입니다. textarea에서 Enter를 눌러도 다음 단계로 가지 않았습니다. 리뷰 페이지가 열리지 않았습니다. 이전에 남은 오버레이가 버튼을 가렸습니다. 에이전트는 그 세 줄을 채팅 감상으로 남기지 않았습니다. 스크린샷과 코드 수정과 재실행으로 남겼습니다. 고친 뒤에는 같은 공개 흐름을 다시 통과시켰습니다. 오늘 DAKER 숙제가 가져올 것은 그 루프뿐입니다.

영상이 이어서 보여 준 장면은 오늘 숙제가 아닙니다. 치과 검색 결과를 긁는 데모는 숙제가 아닙니다. Skool에서 자동으로 좋아요를 누르는 데모도 숙제가 아닙니다. 이미 로그인한 Chrome 프로필을 붙잡는 데모도 숙제가 아닙니다. 그 장면들은 제작자의 데모입니다. 우리 숙제는 우리 공개 URL의 QA입니다. 남의 사이트를 긁지 마십시오. 남의 세션을 가져오지 마십시오. 제출할 주소 하나를 headed로 통과시키십시오.

해커톤에서 자주 생기는 착각은 이렇습니다. 로컬에서 한 번 되면 제출이 끝났다고 봅니다. 채팅에 붙인 캡처가 증거라고 봅니다. 심사위원이 여는 주소는 그 캡처가 아닙니다. 공개 URL입니다. 로컬 호스트, 막힌 미리보기, 로그인 뒤에만 보이는 화면은 제출이 아닙니다. 오늘 루프의 대상은 다른 사람 브라우저에서 열리는 그 주소입니다.

공식 문서가 시키는 첫 명령입니다

요구 사항은 Node.js 18 이상입니다. 코딩 에이전트는 Claude Code, GitHub Copilot, 그 밖의 에이전트입니다. 설치 명령은 README가 아래처럼 적습니다.

npm install -g @playwright/cli@latest
playwright-cli --help
playwright-cli install --skills

글로벌 명령이 없으면 로컬 대체는 npx playwright cli입니다. README는 로컬 버전이 있으면 모든 명령에서 그 로컬 호출을 쓰라고 적습니다. 없으면 공식 글로벌 설치 줄을 다시 실행합니다. 설치 광고를 이 글에서 만들지 않습니다. 오늘 재현의 기본은 README의 설치 세 줄입니다.

스킬을 설치하면 Claude Code와 GitHub Copilot 같은 에이전트가 로컬 스킬을 씁니다. 명령은 README의 Installing skills 절입니다. 스킬 없이 돌리는 방법도 README가 적습니다. 에이전트에게 도움말을 읽히고 그 명령으로 테스트하라고 시킵니다. 공식 예는 TodoMVC 주소에서 add todo 흐름을 시험하는 문장입니다. 도움말을 읽게 하는 한 줄이 스킬 없는 운영입니다.

데모 주소는 demo.playwright.dev의 todomvc입니다. 공식 데모 명령은 아래입니다.

playwright-cli open https://demo.playwright.dev/todomvc/ --headed

기본은 헤드리스입니다. 브라우저를 보려면 open에 headed 플래그를 붙입니다. README 문장 그대로입니다. 오늘 숙제는 기본값으로 돌리지 않습니다. 제출 링크를 사람이 보는 장면과 같게 열려면 headed가 필요합니다. 헤드리스 통과만 있고 화면 기록이 없으면, 다음 사람이 같은 실패를 재현하기 어렵습니다.

세션 플래그는 이름 붙은 세션입니다. 환경 변수는 PLAYWRIGHT_CLI_SESSION입니다. 기본 프로필은 메모리입니다. 같은 세션 안에서는 쿠키와 저장 상태가 유지됩니다. 브라우저가 닫히면 사라집니다. 디스크에 남기려면 persistent 플래그입니다. README는 프로젝트마다 다른 브라우저 인스턴스를 쓰라고 적습니다. 에이전트를 특정 세션에 묶으려면 그 환경 변수를 붙이거나, 호출마다 세션 플래그를 붙이라고 적습니다. 세션 목록은 list입니다. 모두 닫기는 close-all, 강제 종료는 kill-all입니다. 오늘 숙제에서 이미 있는 브라우저 프로필을 가져와 로그인 상태를 재사용하는 일은 하지 않습니다. persistent는 우리 세션을 디스크에 남기는 옵션입니다. 다른 사람 프로필을 가져오는 옵션이 아닙니다.

코딩 에이전트에 CLI를 쓰는 이유도 README가 적습니다. 토큰을 아끼는 쪽입니다. 페이지 데이터를 모델 맥락에 강제로 넣지 않습니다. 큰 도구 스키마와 긴 접근성 트리를 매번 싣지 않습니다. 짧고 목적 있는 명령으로 움직입니다. 그래서 처리량이 큰 코딩 에이전트에는 CLI와 SKILLS가 맞다고 적혀 있습니다. MCP가 사라진 것은 아닙니다. 상태가 오래 남아야 하는 루프, 페이지 구조를 반복해 살피는 탐색, 스스로 고치는 테스트, 오래 달리는 자율 작업에는 MCP가 남아 있습니다. 오늘 숙제는 그 긴 루프가 아닙니다. 제출 URL 하나를 headed로 통과시키는 짧은 루프입니다. 짧은 루프에는 CLI와 SKILLS를 먼저 둡니다.

명령을 실행한 뒤에는 스냅샷이 따라옵니다. 페이지 주소와 제목과 요소 참조가 나옵니다. 필요할 때 playwright-cli snapshot을 다시 찍습니다. 파일 이름을 정하는 플래그도 README에 있습니다. 특정 요소만 보려면 참조를 붙입니다. 깊이를 줄이는 플래그도 있습니다. 큰 스냅샷을 다 읽히지 않으려면 find로 문자열을 찾습니다. 화면 기록은 playwright-cli screenshot입니다. 성공 장면과 실패 장면을 같은 방식으로 남깁니다. 공식 데모 문장도 성공과 실패 시나리오의 스크린샷을 찍으라고 적습니다. 오늘 숙제도 그 문장을 따릅니다. 채팅에만 남긴 설명은 기록이 아닙니다.

요소를 누를 때는 스냅샷의 참조를 씁니다. CSS 선택자와 로케이터도 됩니다. 입력은 type과 fill입니다. 키는 press입니다. 이동은 goto, 뒤로 가기는 go-back, 새로고침은 reload입니다. 콘솔과 네트워크 기록 명령도 README Core와 DevTools에 있습니다. 오늘 첫 통과에 이 목록을 다 외울 필요는 없습니다. 에이전트에게 도움말을 읽히고, 제출 URL에서 snapshot과 screenshot과 클릭과 입력을 시키면 됩니다. 명령 사전을 이 글에서 새로 만들지 않습니다. README의 Core와 Save as를 엽니다.

모니터링은 playwright-cli show입니다. 에이전트가 뒤에서 브라우저를 돌릴 때 세션을 보고 중간에 손을 넣을 수 있습니다. 오늘 숙제의 필수 줄은 아닙니다. headed로 제출 링크를 연 뒤에 스냅샷과 스크린샷이 남으면 최소 기록은 찬 것입니다. show는 그다음입니다.

이 글이 아닌 것입니다

Playwright MCP 출시 뉴스가 아닙니다. Okta MCP 글과 같은 글도 아닙니다. 그 글은 토큰보다 도구 범위를 줄이라는 다른 실험입니다. 오늘 글은 제출 URL의 headed 통과입니다. MCP를 커뮤니티 유행으로 다시 포장하지 않습니다. CLI가 MCP를 죽였다는 문장도 공식 문서에 없습니다. README는 쓰임이 다르다고 적습니다. 그 문장을 승패로 바꾸지 않습니다.

새 모델 발표가 아닙니다. 에이전트가 브라우저를 만질 수 있게 된 날도 아닙니다. 그 능력은 이미 있었습니다. 오늘 바뀌는 것은 숙제의 대상입니다. 남의 데모 사이트가 아닙니다. 우리가 올리는 공개 주소입니다. 영상 제목의 literally anything을 오늘 범위로 읽지 않습니다. 오늘 범위는 제출 링크 하나입니다.

치과 정보를 긁는 숙제가 아닙니다. 커뮤니티에 자동 좋아요를 보내는 숙제가 아닙니다. 로컬 브라우저 프로필을 에이전트에 넘겨 로그인 상태를 재사용하는 숙제가 아닙니다. persistent는 우리 프로필을 디스크에 남기는 공식 옵션입니다. 그 옵션을 로그인 우회로 읽지 않습니다. 제출 페이지가 로그인을 요구하면, 그 페이지는 아직 제출 주소가 아닙니다. 로그인 벽을 우회하지 마십시오. 공개로 열리는 주소를 만드십시오.

토큰을 얼마나 아끼는지 비율로 단정하지 않습니다. 보조 영상에 나온 숫자를 사실처럼 옮기지 않습니다. 공식 README가 적는 이유는 토큰 효율과, 페이지 데이터를 모델에 강제하지 않는다는 점입니다. 그 문장 이상의 절감률을 이 글에서 만들지 않습니다. GitHub 별 숫자도 이 글에 적지 않습니다. 저장소 주소만 둡니다.

유튜브 화면을 이 글에 넣지 않습니다. 주소만 둡니다. iframe은 쓰지 않습니다. 설치 광고, 조회수 자랑, 썸네일만 자극적인 장면은 고르지 않았습니다. 이 영상이 오늘 필요한 이유는 QA 루프입니다. 폼을 만들고, headed로 실패를 보고, 고치고, 다시 통과하는 그 순서입니다. 그 순서만 가져옵니다.

로컬에서 통과한 캡처가 제출인 것도 아닙니다. 에이전트가 코드를 많이 고쳤다는 로그가 제출인 것도 아닙니다. 배포가 제출입니다. 올린 링크가 제출입니다. 그 링크가 다른 사람 브라우저에서 같은 흐름을 통과해야 합니다. headed 기록이 그 통과를 증명합니다. 기록이 없으면 채팅 기억입니다. 채팅 기억은 다음 날 사라집니다.

오늘 할 일입니다

해커톤 제출은 올린 링크입니다. 배포가 제출입니다. 오늘 범위는 그 링크를 headed Playwright로 한 번 타 보는 일입니다. 모델 전체를 바꾸지 않습니다. 스크레이핑 파이프라인을 붙이지 않습니다. 제출 주소의 첫 흐름을 통과와 실패로 나눕니다.

팀으로 내는 대회라면 이 명령을 저장소 README에 같이 둡니다. 에이전트에게 시킬 문장, headed 명령, 스냅샷 위치, 성공과 실패 스크린샷 이름을 한 파일에 적습니다. 채팅에만 남은 순서는 다음 사람이 재현하지 못합니다. 로컬에서 실패하는 링크를 제출 자리에 올리지 마십시오. 첫 시험은 공개 주소입니다. 공개 주소가 통과한 뒤에만 제출로 부릅니다.

한 줄로 줄이면 이렇습니다. MCP 뉴스를 다시 쓰지 않습니다. 새 모델을 기다리지 않습니다. 제출할 주소를 headed Playwright로 열고, 스냅샷과 스크린샷으로 통과와 실패를 남기고, 실패를 고친 뒤 같은 주소를 다시 통과시킵니다. 배포가 제출입니다. 올린 링크가 제출입니다. 그 링크를 브라우저가 먼저 엽니다.

원문: Claude Code + Playwright Automates Literally Anything. · CLI와 MCP 비교 영상 · playwright-cli README · microsoft/playwright-cli · microsoft/playwright-mcp