# Browser Screenshot Diff

> Diff visual y de DOM entre dos sesiones grabadas en los mismos pasos de trayectoria; se usa para regresión visual y verificación de repeticiones.

Fuente: https://skillsagentes.com/skills/ruvnet/ruflo/browser-screenshot-diff
Markdown: https://skillsagentes.com/skills/ruvnet/ruflo/browser-screenshot-diff.md

Repositorio: https://github.com/ruvnet/ruflo
Autor: ruvnet
Licencia: MIT
Actualizado: el mes pasado
Coste de contexto: 33 tok instalada, 623 tok al activarse, 623 tok con todos los archivos del bundle
Bundle: 1 archivo, 2 KB
Permisos que pide: mcp__plugin_ruflo-core_ruflo__browser_eval bash read write

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add ruvnet/ruflo --skill browser-screenshot-diff --agent claude-code
# Cursor
npx -y skills add ruvnet/ruflo --skill browser-screenshot-diff --agent cursor
# Codex
npx -y skills add ruvnet/ruflo --skill browser-screenshot-diff --agent codex
# Gemini CLI
npx -y skills add ruvnet/ruflo --skill browser-screenshot-diff --agent gemini
# Windsurf
npx -y skills add ruvnet/ruflo --skill browser-screenshot-diff --agent windsurf
# Cline
npx -y skills add ruvnet/ruflo --skill browser-screenshot-diff --agent cline
```

## Qué hace

- Compara dos sesiones grabadas paso a paso, emparejando cada `step-id` entre ambas.
- Difiere capturas de pantalla (píxel) y árboles de accesibilidad (DOM), reportando la primera divergencia.
- Calcula una puntuación de similitud agregada ponderada por duración de cada paso.
- Guarda el veredicto del diff en un nuevo contenedor RVF replayable.

## Cuándo usarla

- Regresión visual después de un cambio de UI (graba antes y después, luego compáralas).
- Verificar que una repetición de `browser-replay` coincide con la sesión original dentro de una tolerancia.
- Comparar dos variantes A/B del mismo flujo de formulario.

## Qué la activa

- "Compara las capturas de estas dos sesiones grabadas"
- "Verifica si esta repetición coincide con la sesión original"
- "Compara las dos variantes A/B de este formulario"

## Antes de instalar

- Necesita dos sesiones RVF grabadas previamente con sus capturas y snapshots de accesibilidad guardados localmente.

## Archivos

- SKILL.md — 2 KB

## SKILL.md

Reproducido tal cual desde ruvnet/ruflo bajo MIT. Esta sección es el documento original y está en inglés.

# Browser Screenshot Diff

Compare two recorded sessions step-by-step. Pairs each step in session A to the same `step-id` in session B, diffs the captured screenshot and accessibility snapshot, reports the first divergence and an aggregate similarity score.

## When to use

- Visual regression after a UI change (record before, record after, diff).
- Verifying a `browser-replay` run matches the parent session within tolerance.
- Comparing two A/B variants of the same form flow.

## Steps

1. **Locate both RVF containers**:
   ```bash
   npx -y ruvector@0.2.25 rvf status <session-id-a>.rvf
   npx -y ruvector@0.2.25 rvf status <session-id-b>.rvf
   ```
2. **Load both trajectories** from `trajectory.ndjson`. Build a `step-id → (screenshot_path, snapshot_path)` map for each.
3. **Pair steps** by `step-id`. Steps that exist on only one side are flagged as `unmatched` and contribute to the divergence score.
4. **Pixel diff** (`--mode pixel|both`): compare the two PNGs at each step. Report `mse`, `psnr`, and the bounding box of the largest diff cluster. Threshold default `0.02` (2% of pixels).
5. **DOM diff** (`--mode dom|both`): compare the accessibility snapshots node-by-node. Report added / removed / changed nodes with their accessible names.
6. **Aggregate similarity**: weighted average across matched steps, weighted by step duration. Verdict goes into a new `findings.md` under a fresh RVF container so the diff itself is replayable.
7. **Persist** the diff verdict in `browser-sessions` under both source ids' tags so future searches surface "ran a diff against session X".

## Caveats

- Pixel diff is sensitive to font hinting, antialiasing, and scrollbar position. Keep viewport pinned across both sessions.
- DOM diff over Playwright's accessibility tree is more stable than HTML diff. Prefer it.
- This skill does not handle dynamic content (clocks, ads); add ignore regions to the field map or pre-process snapshots before diffing.
- The `browser_screenshot_diff` MCP tool is **not** planned (ADR-0001 §7); the skill operates against locally-saved RVF artifacts and uses `browser_eval` only for live verification.

## Dónde encaja

- Categoría: [Testing y QA](https://skillsagentes.com/categorias/testing-qa.md) — Flujos de testing unitario, de integración y end-to-end.
- Creador: [ruvnet](https://skillsagentes.com/creators/ruvnet.md) — 275 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Harness Gepa](https://skillsagentes.com/skills/ruvnet/ruflo/harness-gepa.md): Inspecciona y audita genomas GEPA: carga y valida un genoma, renderiza el system prompt que compila, o clasifica los modos de fallo de una transcripción de ejecución.
- [Deepseek Reason](https://skillsagentes.com/skills/ruvnet/ruflo/deepseek-reason.md): Completion en modo razonamiento contra deepseek-reasoner (R1) de DeepSeek. Devuelve el chain-of-thought por separado de la respuesta final. Lee DEEPSEEK_API_KEY y degrada si falta o la API no responde.
- [Deepseek Chat](https://skillsagentes.com/skills/ruvnet/ruflo/deepseek-chat.md): Completion de un solo turno contra el modelo deepseek-chat de DeepSeek vía /v1/chat/completions. Lee DEEPSEEK_API_KEY y degrada con status:degraded si falta o la API no responde. Para tareas sin razonamiento.
- [Adr Index](https://skillsagentes.com/skills/ruvnet/ruflo/adr-index.md): Construye o reconstruye el índice de ADRs y su grafo de dependencias ejecutando scripts/import.mjs, en vez de cientos de llamadas MCP.
- [Agntcy Status](https://skillsagentes.com/skills/ruvnet/ruflo/agntcy-status.md): Muestra el estado de la integración AGNTCY/SLIM/CASA: si los paquetes están instalados, qué transporte está activo y si el enforcement de CASA está habilitado.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)