feat: (experimental) add screenshot testing commands for React Native Storybook #760
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This adds comprehensive screenshot testing capabilities to @storybook/react-native-test. ## New Commands - `screenshot-stories`: Complete workflow to generate, run tests, and compare screenshots - `gen-maestro`: Generate Maestro test files from Storybook stories - `compare-screenshots`: Compare screenshots against baselines with diff generation ## Key Features - Automated Maestro test generation from story index - Visual regression testing with configurable tolerance - Baseline management with update capabilities - Comprehensive CLI options for customization - Reusable utility functions for screenshot comparison - Support for skipping individual workflow steps ## Workflow 1. Generate Maestro tests from stories 2. Run tests to capture screenshots 3. Compare against baseline images 4. Generate diff images for failures 5. Update baselines when changes are intentional This enables automated visual testing for React Native Storybook components.
dannyhw
changed the title
dannyhw
changed the title
- Add modern Storybook-inspired design with CSS custom properties - Implement full-height image display utilizing entire viewport - Create unified header combining all controls (filters, diff toggle, navigation) - Enable diff images to show by default for immediate comparison - Add pagination with keyboard navigation (arrows, spacebar) - Implement filtering by status (all, differences, missing baselines) - Support toggling diff images on/off - Add mobile responsive design - Include monospace filename display and proper status badges - Utilize Storybook color palette and typography system
- Remove diff image toggle - always show diffs when available - Default filter to "Differences Only" for faster workflow - Update hover states to use subtle background colors instead of border changes - Unify navigation button hover color to match filter buttons (blue) - Remove unused toggle functionality from JavaScript - Streamline controls for cleaner, more focused interface
- Replace iOS home indicator detection with flexible custom ignore regions - Add --ignore-regions flag supporting "x,y,w,h;x2,y2,w2,h2" format - Implement detect-ignore-regions command for interactive diff analysis - Add optimized two-pass comparison (fast normal, then masked on failure) - Generate preview images showing ignore regions highlighted in red - Support #F0F magenta diff pixel detection for accurate region extraction Solves visual regression testing issues with system UI differences by giving users complete control over ignored areas.
- Replace looks-same library with odiff-bin for dramatically improved performance - Eliminate PNG masking overhead by using odiff's native ignoreRegions support - Convert ignore region format (x,y,width,height → x1,y1,x2,y2) for odiff compatibility - Remove expensive PNG read/modify/write/cleanup workflow - Maintain identical comparison accuracy and functionality - Reduce comparison time from ~15s to ~2s for 93 screenshots Performance improvements: - Native ignore regions eliminate temporary file creation - 6-7x faster image comparison engine (OCaml-based) - Parallel processing without masking bottlenecks - Memory efficient comparison workflow
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Experimental screenshot testing package for React Native Storybook with high-performance visual regression testing and native ignore regions support.
What's Included (Experimental)
Screenshot Comparison
odiff-binfor fast image comparison📊 Basic Visual Regression Testing Workflow
🎯 Ignore Regions
--ignore-regions "x,y,w,h"flag to skip system UI areas that cause false positivesdetect-ignore-regionshelper command to find coordinates from diff imagesCommands (Experimental)
Usage Examples
Notes & Limitations
This is an experimental package to explore screenshot testing workflows for React Native Storybook:
Feedback Needed
Test Plan