garris/BackstopJS
BackstopJS
BackstopJS ist ein automatisiertes Screenshot-Testframework und ein Tool für visuelle Regressionstests, das entwickelt wurde, um Pixel-Differenzen zwischen verschiedenen Versionen einer Webanwendung zu identifizieren. Es fungiert als Browser-Automatisierungs-Testsuite, die visuelle Snapshots einer Benutzeroberfläche aufnimmt und diese mit gespeicherten Referenzbildern vergleicht, um unbeabsichtigte Änderungen zu erkennen.
Das Projekt nutzt eine containerisierte Testumgebung via Docker, um ein konsistentes Browser-Rendering zu gewährleisten und plattformübergreifende visuelle Diskrepanzen zu vermeiden. Es enthält eine Web-UI-Diffing-Schnittstelle, die es Benutzern ermöglicht, visuelle Unterschiede zu analysieren und aktualisierte Referenz-Screenshots über ein interaktives Dashboard zu genehmigen.
Das Framework bietet Funktionen zur Automatisierung von Browser-Interaktionen, einschließlich der Möglichkeit, Benutzersequenzen zu simulieren, Seitenzustände vorzubereiten und die Aufnahmezeitpunkte zu steuern. Es unterstützt die gezielte Aufnahme spezifischer DOM-Elemente, CSS-Selektor-basiertes Maskieren von Elementen zur Vermeidung von False Positives und konfigurierbare Schwellenwerte für Pixel-Abweichungen zur Bestimmung von Testfehlern.
Das Tool generiert statische HTML-Berichte und exportiert Ergebnisse in Formate, die für die Integration in CI/CD-Build-Systeme geeignet sind.
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.
- Test-Frameworks - Config-driven automated screenshot test framework.
