garris/BackstopJS
BackstopJS
BackstopJS es un framework de pruebas de captura de pantalla automatizadas y una herramienta de regresión visual diseñada para identificar discrepancias a nivel de píxel entre diferentes versiones de una aplicación web. Funciona como una suite de pruebas de automatización de navegador que captura instantáneas visuales de una interfaz de usuario y las compara con imágenes de referencia almacenadas para detectar cambios no deseados.
El proyecto utiliza un entorno de pruebas contenedorizado mediante Docker para garantizar un renderizado de navegador consistente y evitar discrepancias visuales entre plataformas. Incluye una interfaz web de comparación (diffing) que permite a los usuarios analizar diferencias visuales y aprobar capturas de pantalla de referencia actualizadas a través de un panel interactivo.
El framework proporciona capacidades para la automatización de la interacción con el navegador, incluida la capacidad de simular secuencias de usuario, preparar estados de página y controlar el tiempo de captura. Admite la captura dirigida de elementos DOM específicos, el enmascaramiento de elementos basado en selectores CSS para evitar falsos positivos y umbrales de discrepancia de píxeles configurables para determinar fallos en las pruebas.
La herramienta genera informes HTML estáticos y exporta resultados en formatos adecuados para la integración con sistemas de CI/CD.
Features
- Pixel-Level Image Comparison - Identifies pixel-level discrepancies between different versions of a web application by analyzing raster image differences.
- Screenshot Comparison - Implements a system for creating, storing, and approving baseline images to serve as the source of truth for visual comparisons.
- Isolated Execution Environments - Ensures consistent browser rendering across different machines by wrapping the test execution runtime in isolated Docker containers.
- Containerized Rendering - Provides a containerized rendering environment to ensure font and browser consistency across different platforms.
- Baseline Image Storage - Stores and manages approved baseline images to serve as the source of truth for all future visual comparisons.
- Visual Testing - Utilizes a containerized setup to execute visual tests that compare rendered output against expected designs.
- Automated Screenshot Testing Frameworks - Provides a complete framework for capturing browser states and identifying pixel-level discrepancies between web application versions.
- Visual Consistency Testing - Verifies the visual consistency of web interfaces across different browser versions and environments using automated scripts.
- User Interaction Simulation - Simulates sequences of human inputs like clicks, hovers, and key presses to reach specific application states before capture.
- Browser Interaction Automation - Provides programmatic control of browser elements to manipulate web content and prepare the UI before capturing screenshots.
- Browser Automation Testing - Uses browser automation protocols to simulate user interactions and prepare page states for visual snapshots.
- Visual Regression Testing - Detects unintended UI changes by automatically comparing current screenshots against established reference images.
- DOM Element PNG Captures - Enables targeted image capture of specific DOM elements via CSS selectors, the viewport, or the entire page.
- Headless Browser Orchestrators - Manages and controls headless browser instances to navigate pages and execute JavaScript before capturing screenshots.
- Portable HTML Reports - Generates standalone HTML reports containing test results and image diffs for manual review and approval.
- Browser Compatibility Verification - Ensures consistent website rendering across different browsers by comparing screenshots captured in a controlled Docker environment.
- Continuous Integration Checks - Integrates automated visual regression checks into CI pipelines to prevent UI regressions from reaching production.
- Visual Difference Viewers - Provides an interactive viewer for inspecting pixel-level mismatches between reference and test images.
- Sensitivity Configurations - Provides configurable pixel mismatch thresholds and dimension requirements to control when visual differences trigger test failures.
- Capture Timing Controls - Provides the ability to delay screenshots until specific elements appear, console events trigger, or time intervals expire.
- Visual Snapshot Comparisons - Compares visual snapshots across different environments to identify rendering discrepancies and ensure visual correctness.
- State Preparation - Allows the browser environment to be prepared via cookie imports and custom JavaScript before test scenarios execute.
- Element Masking - Provides the ability to hide dynamic page elements using CSS selectors to avoid false positive visual regression failures.
- UI Element Hiding - Allows hiding or removing dynamic page elements to prevent volatile content from triggering false positive test failures.
- State Manipulation - Executes custom interaction sequences and scripts to put the browser in a specific state before taking screenshots.
- Diffing Interfaces - Includes an interactive web dashboard for analyzing visual differences and approving updated reference screenshots.
- Frameworks de pruebas - Config-driven automated screenshot test framework.
