Building Your Own Native App Visual Testing Module with Appium
summary
A native visual-testing module combines WebdriverIO and Appium with ResembleJS to do pixel‑by‑pixel comparisons, supports Appium settings API to reveal invisible elements, and implements cross-platform blackout logic for status/navigation/handle bars. It captures full screenshots or crops element rectangles, stores baselines per device (so 5 devices × 3 OS versions → 15 baselines), detects real layout regressions during a React Native 0.54→0.57 migration (indentation, font, exposed password, radio buttons), and recommends zero-percent mismatch thresholds.
AI-written summary · about
chapters (15)
- 0:00Start
- 4:33Animations
- 8:48Requirements
- 11:28What Should the Module Do
- 12:05Compare Screens
- 12:45Status Bar
- 15:15Settings Api
- 18:14Action Tab
- 18:26The Settings App
- 24:26Create an Element Screenshot
- 25:23Compare Element
- 26:03Use Case
- 28:11Disclaimer
- 29:03Pros
- 33:29Mismatch Percentage
related talks
19mVisual Regression Testing in React Native
40mReact Native is Coming – the story of hybrid mobile application testing
28mVisual Regression Test In React Native
33mHow React Native, Appium and me made each other shine!
45mMobile Visual Testing: Uphill Battle Of Mobile Visual Regression
30mTesting & React Native"Lessons from the Battlefield"
41mSnapshot Testing with Native Mobile Frameworks
44mIt's the 20's! So why are we still testing like it's yesterday?