# Evidências

URL: /reportar/evidencias

Capturas de tela, elemento, replay, arquivos, links e dados técnicos que acompanham um report.

Na barra de captura e na seção **Anexos** do formulário, você escolhe o que anexar. O dashboard só aceita arquivos, imagens coladas e links. As capturas dependem da extensão ou do widget.

## Capturas de tela [#capturas-de-tela]

**Screenshot** é um gesto só: clique na página para capturar a parte visível, ou arraste para recortar uma área. `Esc` cancela. A seta ao lado tem as outras opções:

| Opção | O que captura |
| --- | --- |
| **Página inteira** | A página toda, com rolagem |
| **Captura exata** | A aba como está na tela, escolhida no navegador. Só no widget |

**Elemento** aponta um componente da página, escolhido com o cursor.

Você pode capturar quantas vezes precisar. Tudo o que foi adicionado aparece numa lista única.

Enquanto você arrasta, o resto da página escurece e só a área marcada fica clara. O recorte entra sozinho no report. Para mandar a tela toda, clique em vez de arrastar.

### Editor de imagem [#editor-de-imagem]

Depois de cada captura, o editor abre com estas ferramentas, na ordem da barra: **Cor**, **Selecionar**, **Caneta**, **Retângulo**, **Elipse**, **Seta**, **Linha**, **Texto**, **Tarja**, **Borrar** e **Recortar**. Na barra sob a captura, **Formas** reúne **Retângulo**, **Elipse**, **Seta** e **Linha**, e **Esconder** reúne **Tarja** e **Borrar**. O botão mostra a última ferramenta escolhida do grupo.

- **Selecionar** pega a anotação sob o ponteiro. Arraste para mover, troque a cor ou remova com `Delete` ou com a lixeira da barra.
- **Borrar** pixela a área arrastada em blocos grandes, para o texto não ser lido.
- **Recortar** aceita arrastar a seleção e ajustar pelas alças. As setas do teclado movem um pixel por vez, e `Shift` move dez.
- **Aplicar**, que aparece na barra depois da primeira marca, substitui a captura pela versão editada. Aplique antes de enviar ou de trocar de imagem: marcas não aplicadas se perdem.
- **Descartar edição**, o **×** ao lado, ou `Esc`, mantém a captura como saiu.
- **Editar imagem**, na lista de anexos, reabre o editor depois.
- **Desfazer** e **Refazer** valem para a edição em andamento.

<Callout type="tip" title="Cubra dados pessoais">
A tarja e o borrado são gravados nos pixels da imagem, e o arquivo original não vai junto com o report. Use-a para esconder emails, documentos e dados de clientes.
</Callout>

## Elemento [#elemento]

Use **Elemento** para apontar um componente específico, como um botão ou um card. O widget se esconde durante a escolha. Passe o cursor sobre a página e clique para confirmar. As setas do teclado navegam entre pai, filhos e irmãos, e `Enter` confirma. A seleção expira após dois minutos.

Depois de escolher, o Mira mostra uma prévia renderizada. Abra **Dados do elemento** para conferir posição, tamanho, rolagem e o HTML do trecho. Campos de formulário, conteúdo editável e regiões marcadas como privadas pela aplicação não entram no HTML. Confira a prévia antes de enviar, porque o texto comum da região pode constar no anexo.

No dashboard, o report mostra a aba **Elemento** quando tem essa evidência.

## Replay [#replay]

O replay mostra o que aconteceu na tela antes do report. Ele só aparece quando um admin ou Mantenedor habilitou o replay nas configurações do projeto.

1. Antes de reproduzir o problema, clique em **Gravar replay**.
2. Reproduza o problema. A gravação continua quando você navega pela aplicação, mas cada página nova começa um trecho novo.
3. Abra o painel e use **Atualizar replay** para pegar os últimos 60 segundos. Marque **Anexar replay** para incluir a cópia no envio. A linha abaixo mostra a duração e o tamanho.

**Ocultar uma área** escolhe uma parte da página para tirar do replay. A gravação recomeça sem ela, e o trecho anterior é apagado. **Parar** apaga a gravação.

O trecho tem até 60 segundos. O replay mostra o que estava na tela, sem executar a aplicação. Campos de formulário e áreas privadas são omitidos ou mascarados, e imagens externas e fontes não aparecem. Ele expira em 30 dias, ou antes se o projeto definir um prazo menor. O report continua.

## Gravação de vídeo [#gravação-de-vídeo]

Grave a aba ou o desktop e anexe o vídeo ao report. Uma gravação dura até 5 minutos e respeita o limite de tamanho do projeto, com no máximo 100 MiB.

No menu **Gravar**, escolha a fonte:

- **Aba** grava a aba atual. O som da página entra no vídeo e continua tocando.
- **Desktop** abre o seletor do navegador para escolher uma tela, uma janela ou uma aba. Entra o áudio do sistema quando o navegador oferece.
- **Microfone** vem desligado. Ligue antes de começar para narrar o que faz. Se a permissão for negada, a gravação segue sem microfone e avisa.

No diálogo do report, **Adicionar** tem as mesmas opções, como **Gravar aba** e **Gravar desktop**.

<Figure src="/images/recording-menu.png" alt="Menu Gravar do widget aberto, com as fontes Aba e Desktop, a opção Microfone e a lista de atalhos Desenhar, Laser, Ocultar e Parar com as teclas de cada um" caption="O menu mostra os atalhos antes de você começar." />

Durante a gravação, a página não mostra barra nem botões do Mira. No widget, os controles abrem numa janelinha flutuante do navegador, fora da aba e por isso fora do vídeo: um ponto vermelho com o tempo e os botões **Desenhar**, **Laser**, **Ocultar** e **Parar**. Passe o mouse num botão para ver o atalho dele. Desenhar, Laser e Ocultar ficam destacados enquanto estão ligados, e depois do clique o mouse volta a agir na página. Fechar a janelinha termina a gravação e guarda o vídeo, como **Parar**. Em navegadores sem essa janela, como Firefox e Safari, e na extensão, os controles ficam só no teclado.

<Figure src="/images/recording-controls.png" alt="Janelinha de controles da gravação: ponto vermelho, o tempo 0:02 e os botões Desenhar, Laser, Ocultar e Parar" caption="A janelinha de controles fica fora da aba, então não aparece no vídeo." />

Os atalhos valem em todos os casos, e os menus de gravar mostram as teclas antes de começar:

| Atalho no Windows e no Linux | No macOS | Ação |
| --- | --- | --- |
| `Alt+Shift+D` | `⌥⇧D` | **Desenhar**: liga e desliga os traços, que somem em 3 segundos. Enquanto está ligado, o mouse desenha em vez de clicar na página. `Esc` também desliga. |
| `Alt+Shift+L` | `⌥⇧L` | **Laser**: liga e desliga um ponto vermelho que segue o mouse, com um rastro curto. A página continua clicável. `Esc` também desliga. |
| `Alt+Shift+H` | `⌥⇧H` | **Ocultar**: cobre o próximo elemento clicado até o fim, para dados sensíveis não aparecerem no vídeo. |
| `Alt+Shift+S` | `⌥⇧S` | **Parar**: termina a gravação. |

Os atalhos valem na aba gravada, ou, no desktop, na aba onde a gravação começou, e também na janelinha dos controles. Quando o navegador mostra a própria barra de compartilhamento, **Parar compartilhamento** também termina a gravação e guarda o vídeo.

O Mira some durante a gravação, da aba ou do desktop, para não cobrir o problema. Na extensão, a gravação continua com o painel ou o popup fechados, e o ícone mostra `REC`: clicar nele abre o painel com o tempo e **Parar**. Na gravação do desktop, o painel lateral fecha. A gravação do widget vive na página: recarregar ou sair descarta o trecho, e o navegador pergunta antes.

### Player [#player]

O vídeo toca no player do Mira, no diálogo do report e no dashboard: tocar e pausar, barra de tempo, som, velocidade e tela cheia. O botão de velocidade mostra o valor e passa ao próximo a cada clique: 0,5x, 1x, 1,5x e 2x. Espaço ou `K` tocam e pausam, e as setas avançam ou voltam 5 segundos.

Na gravação da aba, o Mira guarda o instante e a posição de cada clique (nunca o elemento clicado). Com cliques, o player ganha dois efeitos, ligados por padrão:

- **Destacar cliques** mostra um círculo onde cada clique aconteceu.
- **Zoom automático** aproxima a imagem quando há dois cliques com até 3 segundos de intervalo, segue o último clique e volta ao normal 1,5 segundo depois. O botão de zoom mostra o nível e passa ao próximo a cada clique: 2x (padrão), 3x e 1x, que desliga o zoom.

O navegador lembra essas escolhas. O arquivo do vídeo não muda: os efeitos só aparecem no player. Gravações do desktop e gravações antigas não têm cliques e tocam sem os efeitos.

Quando o report leva **Console**, **Erros**, **Rede** ou **Ações**, o player mostra esses dados no tempo do vídeo:

- Cada evento vira uma marca embaixo da barra de tempo. Erros da página, logs de erro e requisições que falharam ou voltaram com status 400 ou maior ficam em vermelho e mais altos. Warnings ficam em âmbar.
- Uma lista ao lado do vídeo, ou embaixo dele quando falta espaço, mostra o instante, o tipo e um resumo de cada evento. O evento do momento fica destacado, e a lista rola até ele enquanto o vídeo toca.
- Clicar num evento leva o vídeo a meio segundo antes dele.
- Os botões acima da lista filtram por tipo, com a contagem de cada um. O filtro vale para a lista e para as marcas.

Entram só os eventos que aconteceram entre o início e o fim da gravação. Uma requisição que começou antes e terminou durante a gravação aparece no começo do vídeo. No diálogo do report, a lista mostra os tipos marcados em **Dados técnicos**. No dashboard, mostra o que foi enviado com o report. O detalhe completo de cada evento continua nas abas do report. Na gravação do desktop, os eventos são da página do report, que pode não ser o que aparece no vídeo. A extensão ainda não mostra os eventos no player antes do envio.

<Figure src="/images/recording-player-widget.png" alt="Diálogo do report no widget com o player: vídeo com círculo no clique e zoom, marcas vermelhas na barra de tempo, filtros Erros, Rede e Ações e a lista de eventos ao lado, com a requisição POST que voltou 404 e o erro da página" caption="No diálogo do widget, a lista mostra os dados marcados em Dados técnicos." />

<Figure src="/images/recording-player-dashboard.png" alt="Página do report no dashboard, aba Capturas e arquivos, com o player, as marcas na barra de tempo, os filtros por tipo e a lista de eventos sob o vídeo" caption="No dashboard, o player mostra o que foi enviado com o report." />

O vídeo vai pela fila de envio. A fila guarda até três gravações pendentes, que expiram em sete dias. Com três, o envio de outra é recusado até uma ser enviada ou descartada. Fechar o seletor do navegador cancela a gravação sem erro.

## Dados técnicos [#dados-técnicos]

| Dado | Marcado por padrão |
| --- | --- |
| Console | Sim |
| Erros | Sim |
| Rede | Sim |
| Ações | Sim |
| localStorage | Não |
| sessionStorage | Não |
| Cookies | Não, e só na extensão |

As **Ações** são a linha do tempo do que o QA fez: cliques, navegação, recarga, aba oculta ou visível e cada captura, até 200 entradas. Tokens, senhas e cookies de autenticação aparecem como `[redacted]`. Abra cada item em **Dados técnicos** para conferir o conteúdo antes de enviar.

<Figure src="/images/report-evidence-network.png" alt="Aba Rede de um report com a lista de requisições e uma falha em vermelho" caption="Depois do envio, o time vê a rede do momento do problema." />

## Arquivos e links [#arquivos-e-links]

Em **Anexos**, **Adicionar arquivos** anexa arquivos do computador, ou você os solta sobre o grupo. **Adicionar link** adiciona uma URL com nome opcional. O projeto define o tamanho máximo por arquivo, 50 MB por padrão. Arquivos que passam do limite não entram na lista.

## Próximos passos [#próximos-passos]

- [Boas práticas para escrever um bom report](/reportar/boas-praticas)
- [Ler a evidência no detalhe do report](/triar/triagem#anexos)