Faça com que seu agente grave demonstrações em vídeo de seu trabalho com vídeo raspador

Faça com que seu agente grave demonstrações em vídeo de seu trabalho com vídeo raspador

30 de junho de 2026

shot-scraper video é um novo comando introduzido na versão 1.10 do shot-scraper de hoje, que aceita um storyboard.yml arquivo que define uma rotina para ser executada em um aplicativo da web e usa o Playwright para gravar um vídeo dessa rotina. Já escrevi antes sobre a importância de fazer com que os agentes de codificação produzam demonstrações de seu trabalho; esta é minha última tentativa de permitir que eles façam isso.

Aqui está um exemplo de vídeo criado usando shot-scraper videoexercendo um recurso ainda em desenvolvimento que adiciona a capacidade de criar novas tabelas no Datasette a partir de dados CSV, TSV ou JSON colados:

Esse vídeo foi criado executando este comando:

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

(Que --auth O arquivo JSON contém um cookie, conforme descrito aqui na documentação.)

Aqui está o datasette-bulk-insert-storyboard.yml arquivo:

output: /tmp/datasette-bulk-insert-demo.webm
server:
  - uv
  - --directory
  - /Users/simon/Dropbox/dev/datasette
  - run
  - datasette
  - -p
  - 6419
  - --root
  - --secret
  - "1"
  - /tmp/demo.db
url: http://127.0.0.1:6419/demo/tasks
viewport:
  width: 1280
  height: 720
cursor: true
wait_for: 'button(data-table-action="insert-row")'
javascript: |
  (() => {
    let clipboardText = "";
    Object.defineProperty(navigator, "clipboard", {
      configurable: true,
      get: () => ({
        writeText: async (text) => {
          clipboardText = String(text);
        },
        readText: async () => clipboardText,
      }),
    });
  })();
scenes:
  - name: Bulk insert existing table rows
    do:
      - pause: 0.8
      - click: 'button(data-table-action="insert-row")'
      - wait_for: "#row-edit-dialog(open)"
      - pause: 0.5
      - click: ".row-edit-bulk-insert"
      - wait_for: ".row-edit-bulk-textarea"
      - pause: 0.5
      - click: ".row-edit-copy-template"
      - wait_for: "text=Copied"
      - pause: 0.8
      - fill:
          into: ".row-edit-bulk-textarea"
          text: |
            title,owner,status,priority,notes
            Prepare release video,Ana,doing,1,Recorded with shot-scraper
            Check pasted CSV import,Ben,review,3,Previewed before inserting
            Share the branch demo,Chen,queued,2,Bulk insert creates three rows
      - pause: 0.8
      - click: ".row-edit-save"
      - wait_for: "text=Previewing 3 rows."
      - pause: 1.2
      - click: ".row-edit-save"
      - wait_for: "text=3 rows inserted."
      - pause: 1.0
      - click: ".row-edit-cancel"
      - wait_for: "text=Prepare release video"
      - pause: 1.0
  - name: Create a table from pasted CSV
    open: http://127.0.0.1:6419/demo
    wait_for: 'details.actions-menu-links summary'
    do:
      - pause: 0.8
      - click: 'details.actions-menu-links summary'
      - click: 'button(data-database-action="create-table")'
      - wait_for: "#table-create-dialog(open)"
      - pause: 0.5
      - fill:
          into: ".table-create-table-name"
          text: "launch_metrics"
      - click: ".table-create-from-data"
      - wait_for: ".table-create-data-textarea"
      - pause: 0.5
      - fill:
          into: ".table-create-data-textarea"
          text: |
            metric_id,name,score,recorded_on
            m001,Activation rate,87.5,2026-06-29
            m002,Retention check,72.25,2026-06-30
            m003,CSV import health,95,2026-07-01
      - pause: 0.8
      - click: ".table-create-save"
      - wait_for: "text=Previewing 3 rows."
      - pause: 1.2
      - click: ".table-create-save"
      - wait_for_url: "**/demo/launch_metrics"
      - wait_for: "text=Activation rate"
      - pause: 1.2

A documentação do comando de vídeo inclui exemplos mais simples, mas para o propósito deste post pensei em escolher algo mais abrangente.

Esse storyboard YAML de demonstração foi construído inteiramente por GPT-5.5 xhigh rodando no Codex Desktop, usando o seguinte prompt executado dentro do meu ~/dev/datasette check-out desta filial:

Review the changes on this branch.

cd to ~/dev/shot-scraper and run the command "uv run shot-scraper video --help"

Now use that new video command to record a video demo of the new features from this branch, including running a "uv run datasette -p 6419 --root --secret 1 /tmp/demo.db" development server so you can record the video against a demo DB that you first create.

Agora que liberei o recurso, o prompt poderia dizer “run uvx shot-scraper video --help“em vez disso e deve alcançar o mesmo resultado.

Eu realmente gosto desse padrão onde o --help a saída de um comando fornece detalhes suficientes para que um agente de codificação possa usá-lo – funciona como agrupar um SKILL.md arquivo diretamente dentro da ferramenta. Usei o mesmo padrão para showboat e rodney.

Como eu construí isso

shot-scraper video começou como um protótipo experimental. shot-scraper foi desenvolvido com base no Playwright, e o principal recurso necessário era que o Playwright pudesse gravar vídeos de sessões do navegador com controle suficiente para criar a demonstração desejada.

Tentei isso pela primeira vez há alguns anos e descobri que os vídeos produzidos pelo Playwright incluíam cromo adicional que era útil para depurar uma falha de teste, mas indesejado para uma demonstração de produto.

Eles consertaram isso há um tempo, mas ainda havia alguns pequenos bloqueadores. Em particular, eu estava recebendo alguns quadros brancos no início dos vídeos, já que o mecanismo de gravação foi acionado antes do primeiro URL ser carregado pelo navegador.

O Playwright 1.59 adicionou um novo mecanismo de screencast que fornece um controle muito mais refinado sobre a gravação de vídeo. Isso era quase o que eu precisava, mas os vídeos resultantes foram fixados em 800px de largura.

Encontrei um PR consertando isso, mas ainda não foi lançado. Então ontem eles o enviaram em playwright-python 1.61.0 e finalmente fui desbloqueado para terminar de implementar o recurso!

O código em si foi todo escrito por GPT-5.5 xhigh no Codex Desktop. Eu também fiz com que ele escrevesse a documentação, o que me deu uma estrutura muito útil para revisar o design – grande parte da iteração do recurso veio da revisão dessa documentação, identificando coisas que eram redundantes, inconsistentes ou confusas e solicitando (ou ditando) um design melhor.

O próprio formato YAML foi definido principalmente pelo agente de codificação. Fiz com que ele usasse o Pydantic para definir e validar o formato, em parte para tornar o design mais fácil de revisar.

Este é um ótimo exemplo do tipo de recurso que eu quase certamente não teria adotado sem o suporte do agente de codificação. Arquivei o problema original em fevereiro de 2024 e tive dificuldade em encontrar o tempo necessário para resolver isso entre todos os meus outros projetos.