sniff

English · 简体中文 · 日本語 · Español · Français

Apunta a tu aplicación en ejecución. Recorre tus flujos de usuario reales en un navegador real y te dice qué está realmente roto, con pruebas.

Qué hace · Instalación · Cómo usarlo · Qué obtienes · Funciona en tu editor · Bueno saber

claude plugin marketplace add Aboudjem/10x
claude plugin install sniff@10x

Qué hace

La mayoría de los linters leen tu código fuente sin ejecutar tu aplicación, y los frameworks de extremo a extremo te piden que escribas y mantengas las pruebas tú mismo. sniff abre tu aplicación en ejecución en un navegador real, hace clic y rellena cosas como lo haría un usuario, y evalúa lo que realmente sucedió.

• Encuentra 12 clases de errores, desde rutas con HTTP 500 y enlaces rotos hasta datos de marcador de posición, botones de envío muertos, formularios borrados por el botón de retroceso, indicadores de carga atascados y desbordamiento móvil.
• Prueba cada uno. Cada hallazgo incluye la ruta y los pasos ordenados que lo produjeron, además de la captura de pantalla y el extracto de consola o red que capturó la verificación. Sin pasos, no hay hallazgo.
• Ha sido medido. En una aplicación de prueba con 21 errores plantados en las 12 clases, más una página de control limpia, sniff encuentra 21 de 21 y no reporta nada en la página de control.

Instalación

El bloque anterior es la ruta de Claude Code, a través del marketplace 10x. Para cualquier otro agente, la CLI de habilidades de Vercel instala las mismas tres habilidades:

npx skills add Aboudjem/sniff

Para usarlo como una herramienta de línea de comandos simple, sin editor involucrado:

npx sniff-qa --url http://localhost:3000

El paquete npm es sniff-qa y el binario que instala es sniff. No ejecutes npx sniff, que es un paquete no relacionado.

Cómo usarlo

1. Inicia tu aplicación, con el servidor de desarrollo que tu proyecto ya use.

npm run dev

2. Recórrela, desde una segunda terminal. sniff detecta automáticamente un servidor de desarrollo en los puertos comunes, por lo que --url es opcional, pero pasarlo elimina las conjeturas.

npx sniff-qa --url http://localhost:3000

3. Lee los hallazgos. Se imprimen agrupados por severidad. A continuación se muestra una ejecución real abreviada contra el propio fixture de errores plantados de este repositorio, desde npx sniff-qa --url http://localhost:4321 --ci --max-pages 12:

sniff v0.8.0  walking http://localhost:4321

  26 findings (+1 low-confidence hidden; use --all)

  CRITICAL (1)
    • [confirmed] Page returns HTTP 500
      /crash  (route/broken-page)
        - Navigate to /crash
        - Server responded with HTTP 500
      fix: The route throws server-side. Check the server logs/handler for this path and return a valid page or a proper error page.
      shot: sniff-reports/crawl/_crash-desktop.png

✓ Scan complete: 26 issue(s) found. Exit code 1 so CI fails on bugs; pass --fail-on none to always exit 0.

Agrega --report para obtener una página HTML autocontenida que puedas enviar a alguien. Ejecuta npx sniff-qa doctor si el entorno parece incorrecto.

Qué obtienes

• Un informe de terminal agrupado por severidad, cada hallazgo con pasos, una corrección y una ruta de captura de pantalla.
• Un archivo compartible, un informe HTML autocontenido con --report o JSON con --json.
• Un código de salida, distinto de cero cuando los hallazgos alcanzan la severidad --fail-on, para que CI falle por errores reales.
• Una etiqueta de confianza en cada uno. uncertain está oculto de la terminal a menos que pases --all.

Nuevo en 0.8.0:

• --caps scan,report limita el servidor MCP al escaneo de código fuente y al lector de resultados guardados, sin lanzamiento de navegador ni descarga de navegador.
• --storage-state auth.json recorre una aplicación con sesión iniciada. Los valores de cookies y tokens de ese archivo se redactan del texto de cada informe escrito, aunque no de los píxeles de las capturas de pantalla.
• Un bloque assert en sniff.config limita los hallazgos por severidad (maxCritical, maxHigh, maxTotal), aplicado en la línea de comandos por el recorrido, el escaneo de código fuente y la detección.

Funciona en tu editor

Funciona en Claude Code, Cursor, Codex, Copilot, Gemini CLI y más de 70 otros agentes a través de npx skills add. Las habilidades son Markdown, por lo que se ejecutan en cualquier modelo al que apunte tu editor.

claude mcp add sniff-qa npx -- -y sniff-qa --mcp
codex mcp add sniff-qa -- npx -y sniff-qa --mcp

Bueno saber

[!IMPORTANT] Sin clave API, sin cuenta, sin registro y sin proveedor de IA a menos que configures uno tú mismo. El recorrido y el escaneo nunca editan tu código fuente. sniff fix es el único comando que reescribe código, y solo cuando lo ejecutas.

[!NOTE] Un recorrido hace clic en botones y envía formularios reales, por lo que puede crear datos reales. Apunta a una aplicación de desarrollo o staging, no a producción. El primer recorrido también descarga una compilación de Chromium y la guarda en caché, por lo que esa ejecución necesita acceso a internet.

• Quiere una aplicación en ejecución. Sin un servidor de desarrollo activo, recurre a un escaneo solo de código fuente y te dice cómo iniciar el recorrido real. npx sniff-qa scan ejecuta ese escaneo a propósito.
• La verificación de enlaces rotos sigue enlaces externos, por lo que un recorrido hace solicitudes a las URL de terceros a las que tus propias páginas ya enlazan.
• Un recorrido que encuentra errores sale con 1 a propósito, para que CI falle la compilación. Eso no es un bloqueo. --fail-on none desactiva la puerta de severidad, aunque un presupuesto de assert aún puede hacer fallar la ejecución.

Aprende más

• docs/editors.md, instalación y fragmentos MCP para cada agente compatible
• docs/authenticated-walks.md, recorrer una aplicación con sesión iniciada con --storage-state
• docs/assert-budgets.md, limitar hallazgos por severidad en sniff.config
• docs/comparison.md, cómo sniff difiere de linters, verificadores de enlaces y frameworks E2E
• docs/faq.md, las preguntas que esta página no responde
• CHANGELOG.md · CONTRIBUTING.md · LICENSE

_{Construido por Adam Boudjemaa · Apache 2.0 · apoyándose en Playwright y axe-core}