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,
   }),
 });
})();

storyboard.yml에 삽입된 이 스니펫은 페이지의 navigator.clipboard를 가로채어 writeText와 readText를 내부 변수로 흉내내므로 시스템 클립보드에 의존하지 않고 테스트용 클립보드 동작을 재현한다.

Datasette의 bulk insert 작업을 시연하는 화면을 캡처한 스크린샷이다. — Screenshot이 스크린샷은 게시글에 포함된 비디오의 정지 이미지로서 UI에서 새 테이블을 만들고 CSV/TSV/JSON을 붙여넣는 흐름을 시각적으로 보여준다. 스크린샷의 요소들로부터 사용자가 클릭해야 하는 버튼과 입력 필드의 위치를 파악할 수 있어 storyboard의 wait_for와 click 액션이 어떤 요소를 타깃으로 하는지 이해하는 데 도움이 된다.

용어 해설

Playwright: — Playwright는 브라우저 자동화를 위한 라이브러리로, 스크립트로 브라우저를 열고 클릭·입력·네트워크 조건 등을 제어하여 웹 애플리케이션을 자동으로 조작하고 테스트할 수 있다. Playwright는 여러 브라우저 엔진을 지원하며 헤드리스 모드에서의 상호작용과 비헤이비어 주입이 가능하여 재현 가능한 데모 녹화에 적합하다.
shot-scraper: — shot-scraper는 웹 페이지의 스크린샷과 화면 녹화를 자동화하는 커맨드라인 도구로, storyboard.yml 같은 설정 파일로 일련의 브라우저 동작을 정의하여 Playwright를 통해 실행하고 결과를 이미지나 비디오로 저장한다. 자동화된 데모 생성과 회귀 확인용으로 사용된다.
storyboard.yml(Storyboard YAML): — storyboard.yml은 shot-scraper가 실행할 루틴을 선언하는 YAML 형식의 시나리오 파일로, 서버 명령, 방문할 URL, 뷰포트, 대기 셀렉터, 페이지에 주입할 JavaScript와 장면별 액션 목록을 포함하여 자동화 실행의 입력으로 쓰인다.
navigator.clipboard API(navigator.clipboard): — navigator.clipboard는 브라우저에서 클립보드에 접근하는 Web API로, writeText와 readText 메서드를 통해 텍스트를 쓰고 읽을 수 있다. 게시글에서는 이 API를 페이지 내에서 재정의하여 시스템 클립보드에 의존하지 않고 데모에 필요한 텍스트를 주입하고 재현 가능성을 확보했다.