Media
1 item
Description
Capture and compare DOM snapshots to detect meaningful UI changes in React, AG Grid, and MUI apps QA Snapshot - Visual & DOM Regression Testing Catch Unintended Website Changes Before Users Do When developers implement changes, things can accidentally move, disappear, or break. QA Snapshot captures a "baseline" of your webpage, then compares after changes to show exactly what changed, where, and how. Perfect for: QA Engineers - Automate visual regression testing Developers - Verify PR changes don't break existing UI Product Managers - Sanity check deployments Freelancers - Prove work didn't break existing features How It Works: 1. Capture Baseline - Save the current "correct" state of any webpage 2. Changes Deployed - Developers push updates 3. Capture Test - Take a new snapshot after changes 4. Compare & Review - See exactly what changed, missing, or added 5. Visual Overlay - Colored boxes highlight changes directly on the page Key Features: Smart Element Detection - Tracks position, visibility, styles, text content - Monitors localStorage & sessionStorage changes - Captures form values and input states Intelligent Ignore Rules - Filter out dynamic content (timestamps, session IDs) Ignore CSS class hashes (jss3→jss7, Material-UI) - Skip localStorage keys that always change Visual Overlay - Green = Unchanged - Orange = Changed (click for details) - Red = Missing element - Blue = New element added Detailed Diff Reports - See old vs new values side by side - Export snapshots as JSON for developers - Import snapshots from any environment Flexible Configuration - Monitor specific elements via CSS selectors - Choose scope: data-qa only, interactive elements, or entire page - Custom ignore rules for your app's patterns Use Cases: Daily Regression Testing Replace manual visual checks with automated comparisons. Run before/after each deployment. PR Review Developers export baseline, reviewers import and verify changes don't break existing features. Environment Comparison Compare staging vs production to catch configuration drift. Responsive Testing Capture baseline on desktop, compare on mobile to see responsive behavior. Example Workflow: Monday AM: QA captures baseline on staging Monday PM: Developer deploys code changes Tuesday AM: QA captures test snapshot → Compares with baseline → Sees submit button moved, discount field missing → Files bug report with screenshot → Developer fixes → QA re-tests and updates baseline