garris/BackstopJS
BackstopJS
BackstopJS is an automated screenshot testing framework and visual regression testing tool designed to identify pixel-level discrepancies between different versions of a web application. It functions as a browser automation testing suite that captures visual snapshots of a user interface and compares them against stored reference images to detect unintended changes.
The project utilizes a containerized testing environment via Docker to ensure consistent browser rendering and prevent cross-platform visual discrepancies. It includes a web UI diffing interface that allows users to analyze visual differences and approve updated reference screenshots through an interactive dashboard.
The framework provides capabilities for browser interaction automation, including the ability to simulate user sequences, prepare page states, and control capture timing. It supports targeted capturing of specific DOM elements, CSS selector-based element masking to avoid false positives, and configurable pixel mismatch thresholds to determine test failures.
The tool generates static HTML reports and exports results into formats suitable for integration with continuous integration build systems.
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.
- Testing Frameworks - Config-driven automated screenshot test framework.
