shot-scraper 1.10에 추가된 shot-scraper video 명령으로 Playwright 기반 웹 루틴 녹화

이 요약은 AI가 원문을 분석해 생성했습니다. 정확한 내용은 원문 기준으로 확인하세요.

TL;DR

shot-scraper 1.10에 shot-scraper video 명령이 추가되어 storyboard.yml로 정의한 일련의 브라우저 동작을 Playwright로 실행하고 그 과정을 비디오로 기록할 수 있다. 이 기능은 로컬 서버를 기동하거나 지정한 URL을 방문하고 뷰포트·대기 셀렉터·장면별 액션을 따라가며 녹화를 수행하며 명령행에서 --auth로 인증 쿠키를 전달해 인증된 세션을 재현할 수 있다. 게시글에 제시된 예시는 Datasette의 개발 중 기능을 데모하는 워크플로로, 페이지에 주입된 JavaScript로 navigator.clipboard를 대체해 시스템 클립보드에 의존하지 않고 텍스트 붙여넣기 동작을 재현하는 방식으로 결정론적 데모를 만든다. 이 방법은 자동화된 데모 생성과 코딩 에이전트가 만든 작업의 동작 증명에 유용하며 재현성과 안정성을 높인다.

섹션별 상세

새로운 명령 shot-scraper video는 storyboard.yml 파일을 입력으로 받아 Playwright를 통해 브라우저 상의 일련의 동작을 실행하고 그 과정을 비디오로 기록하는 목적이다. 이 명령은 로컬 서버를 기동하거나 이미 실행 중인 애플리케이션의 특정 URL을 방문하여 지정된 동작을 순차적으로 수행하도록 설계되어 있다. 게시글은 이 기능을 코딩 에이전트가 만든 데모를 자동으로 생성하는 데 활용하려는 맥락에서 도입했다는 점을 명시하고 있다.

게시글에는 실제로 동작하는 예시 명령이 제시되어 있으며 그 명령은 storyboard 파일과 인증 정보를 함께 지정하여 녹화를 수행한다. 예시 명령은 shot-scraper video datasette-bulk-insert-storyboard.yml --auth datasette-demo-auth.json --mp4 형태로 실행되어 MP4 포맷으로 결과를 생성했고, --auth에 제공된 JSON 파일에는 접근을 위한 쿠키가 포함되어 있다는 점이 링크로 연결되어 있다. 이 방식은 인증이 필요한 내부 기능이나 개발 중인 기능을 데모화할 때 재현 가능한 녹화를 가능하게 한다는 실무적 가치를 제공한다.

bash

shot-scraper video datasette-bulk-insert-storyboard.yml \
 --auth datasette-demo-auth.json --mp4

이 명령은 storyboard.yml 파일을 실행하여 Playwright 기반으로 웹 루틴을 녹화하고 --auth로 제공한 JSON에 들어있는 쿠키를 사용해 인증된 세션으로 접근한 뒤 MP4로 출력하는 예시이다.

storyboard.yml 파일 구조는 출력 파일 경로, 로컬 서버를 기동하는 커맨드 배열(server), 접속할 URL, 뷰포트 크기와 커서 표시 여부, 특정 셀렉터가 나타날 때까지 대기하는 wait_for 항목, 그리고 페이지에 주입할 JavaScript와 장면(scene)별 액션 순서를 포함한다. 게시글에 포함된 JavaScript는 navigator.clipboard의 writeText와 readText 동작을 내부 변수로 대체하여 시스템 클립보드에 의존하지 않고 텍스트 붙여넣기 같은 상호작용을 재현하도록 구현되어 있으며, 장면은 pause와 click 같은 세부 액션으로 구성되어 있다. 이러한 구성은 데모 녹화의 결정론성과 재현성을 확보하고 개발 중인 기능의 동작을 자동으로 보여주는 데 유용하다.

javascript

(() => {
 let clipboardText = "";
 Object.defineProperty(navigator, "clipboard", {
   configurable: true,
   get: () => ({
     writeText: async (text) => {
       clipboardText = String(text);
     },
     readText: async () => clipboardText,
   }),
 });
})();