Visual Regression Testing in React Native

on YouTube ↗19m

" summary

Shows how to catch UI breakages by screenshot diffing using react-native-owl: small CLI plus a custom Jest matcher, an interaction API to press/scroll/type in the simulator, and a report generator. Workflow builds instrumented apps, captures baseline images (example: four screenshots), reruns to create latest images, and emits pixel diffs that flag both big changes (logo swap) and tiny ones (changed punctuation). Baselines update with an update flag and fail CI/PRs until reviewed.

AI-written summary · about

" chapters (4)

1. 0:00Introduction
2. 1:47Visual Regression Testing
3. 8:26Demo
4. 16:45Bonus Feature

" related talks

• 28mVisual Regression Test In React NativeJesse Katsumata · React Native EU 2020
• 38mBuilding Your Own Native App Visual Testing Module with AppiumWim Selles · AppiumConf 2019
• 27mVisual UI Testing – Testing the Last MileCraig Cavalier · React Boston 2019
• 40mVisual regression testing: your strategy's blind spotThomas Boutin · AndroidMakers by droidcon 2026
• 29mHow to set up a pipeline with visual unit tests for your appDenis Artyuhovich · RS Conf 2019
• 45mMobile Visual Testing: Uphill Battle Of Mobile Visual RegressionDmitry Vinnik · Selenium Conference India 2018
• 20mVisual testing with Visual Regression TrackerPavel Strunkin · Appium Conference 2021
• 12mAutomation of GUI testing using visual regression testingAudun Wigum Arbo · NDC Oslo 2023