Gravador de Vídeo de Demonstração de UI

Grave vídeos de demonstração polidos de aplicações web usando a gravação de vídeo do Playwright com um cursor injetado, ritmo natural e fluxo de narrativa.

Quando Usar

• O usuário pede um "vídeo de demonstração", "gravação de tela", "passo a passo" ou "tutorial"
• O usuário quer mostrar um recurso ou fluxo de trabalho visualmente
• O usuário precisa de um vídeo para documentação, integração ou apresentação para partes interessadas

Processo de Três Fases

Toda demonstração passa por três fases: Descobrir -> Ensaio -> Gravar. Nunca pule direto para a gravação.

Fase 1: Descobrir

Antes de escrever qualquer roteiro, explore as páginas alvo para entender o que realmente está lá.

Por Quê

Você não pode roteirizar o que não viu. Campos podem ser <input> e não <textarea>, dropdowns podem ser componentes customizados e não <select>, e caixas de comentários podem suportar @mentions ou #tags. Suposições quebram gravações silenciosamente.

Como

Navegue para cada página no fluxo e liste seus elementos interativos:

// Run this for each page in the flow BEFORE writing the demo script
const fields = await page.evaluate(() => {
  const els = [];
  document.querySelectorAll('input, select, textarea, button, [contenteditable]').forEach(el => {
    if (el.offsetParent !== null) {
      els.push({
        tag: el.tagName,
        type: el.type || '',
        name: el.name || '',
        placeholder: el.placeholder || '',
        text: el.textContent?.trim().substring(0, 40) || '',
        contentEditable: el.contentEditable === 'true',
        role: el.getAttribute('role') || '',
      });
    }
  });
  return els;
});
console.log(JSON.stringify(fields, null, 2));

O que procurar

• Campos de formulário: São eles <select>, <input>, dropdowns customizados ou comboboxes?
• Opções de seleção: Liste os valores das opções E o texto. Placeholders frequentemente têm value="0" ou value="", o que parece não estar vazio. Use Array.from(el.options).map(o => ({ value: o.value, text: o.text })). Pule opções onde o texto inclui "Selecione" ou o valor é "0".
• Texto rico: A caixa de comentários suporta @mentions, #tags, markdown ou emoji? Verifique o texto do placeholder.
• Campos obrigatórios: Quais campos bloqueiam o envio do formulário? Verifique required, * nos rótulos e tente enviar vazio para ver os erros de validação.
• Conteúdo dinâmico: Campos aparecem após outros campos serem preenchidos?
• Rótulos de botões: Texto exato como "Submit", "Submit Request" ou "Send".
• Cabeçalhos de coluna de tabela: Para modais baseados em tabelas, mapeie cada input[type="number"] para seu cabeçalho de coluna em vez de assumir que todas as entradas numéricas significam a mesma coisa.

Saída

Um mapa de campos para cada página, usado para escrever seletores corretos no roteiro. Exemplo:

/purchase-requests/new:
  - Budget Code: <select> (first select on page, 4 options)
  - Desired Delivery: <input type="date">
  - Context: <textarea> (not input)
  - BOM table: inline-editable cells with span.cursor-pointer -> input pattern
  - Submit: <button> text="Submit"

/purchase-requests/N (detail):
  - Comment: <input placeholder="Type a message..."> supports @user and #PR tags
  - Send: <button> text="Send" (disabled until input has content)

Fase 2: Ensaio

Execute todos os passos sem gravar. Verifique se todos os seletores são resolvidos.

Por Quê

Falhas silenciosas de seletores são a principal razão pela qual gravações de demonstração falham. O ensaio as pega antes que você desperdice uma gravação.

Como

Use ensureVisible, um wrapper que registra e falha ruidosamente:

async function ensureVisible(page, locator, label) {
  const el = typeof locator === 'string' ? page.locator(locator).first() : locator;
  const visible = await el.isVisible().catch(() => false);
  if (!visible) {
    const msg = `REHEARSAL FAIL: "${label}" not found - selector: ${typeof locator === 'string' ? locator : '(locator object)'}`;
    console.error(msg);
    const found = await page.evaluate(() => {
      return Array.from(document.querySelectorAll('button, input, select, textarea, a'))
        .filter(el => el.offsetParent !== null)
        .map(el => `${el.tagName}[${el.type || ''}] "${el.textContent?.trim().substring(0, 30)}"`)
        .join('\n  ');
    });
    console.error('  Visible elements:\n  ' + found);
    return false;
  }
  console.log(`REHEARSAL OK: "${label}"`);
  return true;
}

Estrutura do roteiro de ensaio

const steps = [
  { label: 'Campo de e-mail de login', selector: '#email' },
  { label: 'Enviar login', selector: 'button[type="submit"]' },

…