Visual Regression Test In React Native

on YouTube ↗28m

" summary

Visual regression testing captures screenshots and compares them in CI so UI changes are visible as diffs. Setup uses reg suit to store screenshots (S3/GCS), storybook served via react native for web, and storycap to capture images; CI runs screenshots, reg suit reports changed/new/deleted components (demo shows four changed items) and five diff views including side‑by‑side and blend. Example: changing a button’s width/border radius and forcing its label alters both the signup component and the login page; the report flags both and prevents a broken layout.

AI-written summary · about

" chapters (17)

1. 0:00Intro
2. 1:03Who am I
3. 2:12Cure App
4. 3:27UI Testing
5. 4:17Login Page
6. 5:06Test UI
7. 5:38Snapshot Tests
8. 7:13Visual Regression Test
9. 8:29Reports
10. 9:40Visual Example
11. 11:34Snapshot Example
12. 13:48Dark Mode
13. 15:10Why Visual Regression Tests
14. 15:42How To Perform Visual Regression Tests
15. 16:00RegSuit
16. 17:12Storybook
17. 20:13Demo

" related talks

• 19mVisual Regression Testing in React NativeRob Walker · React Native EU 2022
• 20mVisual testing with Visual Regression TrackerPavel Strunkin · Appium Conference 2021
• 45mMobile Visual Testing: Uphill Battle Of Mobile Visual RegressionDmitry Vinnik · Selenium Conference India 2018
• 21mLet's get visual - Visual testing in your Vue applicationRamona Schwering · Vue.js Nation 2023
• 38mBuilding Your Own Native App Visual Testing Module with AppiumWim Selles · AppiumConf 2019
• 12mAutomation of GUI testing using visual regression testingAudun Wigum Arbo · NDC Oslo 2023
• 30mTesting presentation components visuallyBalázs Korossy-Khayll · JSConf Budapest 2019
• 27mVisual UI Testing – Testing the Last MileCraig Cavalier · React Boston 2019