Skip to content

Conversation

@SosenWiosen
Copy link

@SosenWiosen SosenWiosen commented Jan 22, 2026

Proposed changes

This PR implements the assertScreenshot command for visual regression testing. It's based on #2078 by @TheKohan.

Given a simple React Native App

import React from 'react';
import { Button, StyleSheet, View } from 'react-native';

export default function App() {
  const [toggle, setToggle] = React.useState(false);
  return (
    <View style={styles.container}>
      <View
        testID="dot"
        style={[styles.dot, { backgroundColor: toggle ? 'red' : 'blue' }]}
      >
        <Button title="test" onPress={() => setToggle(!toggle)} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    marginTop: 200,
  },
  dot: {
    backgroundColor: 'red',
    padding: 30,
    borderRadius: '50%',
  },
});

And with a sample flow:

appId: com.maestrotestapp
---
- launchApp
- tapOn: "test"
- assertScreenshot:
    path: screen.png
    cropOn:
      id: dot
    thresholdPercentage: 95.3
    

Maestro will compare the screenshots:

 ║                                                                                        
 ║  > Flow: test-flow
 ║                                                                                        
 ║    ✅   Launch app "com.maestrotestapp"
 ║    ✅   Tap on "test"                                                                  
 ║    ❌   Assert screenshot matches screen.png (threshold: 95.3%) (cropped on id: dot)
 ║                                                                                        
  
Comparison error: Assert screenshot matches screen.png (threshold: 95.3%) (cropped on id: dot) - threshold not met, current: 58.970116%
                                                                                          
Screenshot comparison failed. Check the diff image at /Users/sosen/WorkProjects/Maestro/screen_diff.png to see the differences. Adjust the thresholdPercentage if the differences are acceptable.
App Correct Screenshot Screenshot with error and diff
Screenshot_1769120930 screen screen_diff

Testing

Two e2e tests have been added - one which should pass which compares to an already existing screenshot, and one which should fail which compares to a modified screenshot.

Issues fixed

#1222

@SosenWiosen SosenWiosen changed the title Feat/visual regression testing feat: add new assertScreenshot command Jan 22, 2026
@SosenWiosen SosenWiosen force-pushed the feat/visual-regression-testing branch from da7af4f to d4bc92a Compare January 22, 2026 22:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants