Add image smoke-test examples and Maestro flows to RNTester (#57306)

.github/workflow-scripts/maestro-android.js

@@ -60,9 +60,10 @@ async function executeFlowInFolder(flowFolder) {
     const filePath = `${flowFolder}/${file}`;
     if (fs.lstatSync(filePath).isDirectory()) {
       await executeFlowInFolder(filePath);
-    } else {
+    } else if (file.endsWith('.yml') || file.endsWith('.yaml')) {
       await executeFlowWithRetries(filePath, 0);
     }
+    // Skip non-flow files (e.g. screenshot baselines under screenshots/).
   }
 }
 

packages/rn-tester/.maestro/image-blur-prefetch.yml

@@ -0,0 +1,35 @@
+appId: ${APP_ID} # iOS: com.meta.RNTester.localDevelopment | Android: com.facebook.react.uiapp
+---
+# Prefetch an image, then render the same URI with blurRadius so the blur
+# postprocessor applies to the already-decoded bitmap. Cross-platform.
+- runFlow: ./helpers/launch-app-and-search.yml
+- inputText:
+    text: 'Image'
+- assertVisible:
+    id: 'Image'
+- tapOn:
+    id: 'Image'
+- assertVisible:
+    id: 'example_search'
+- tapOn:
+    id: 'example_search'
+- inputText: 'Blur Radius with Prefetch'
+- hideKeyboard
+- scrollUntilVisible:
+    element:
+      id: 'image-blur-prefetch'
+    direction: DOWN
+    speed: 40
+    timeout: 10000
+- extendedWaitUntil:
+    visible: 'prefetch: ok'
+    timeout: 20000
+- extendedWaitUntil:
+    visible: 'blurred image: loaded'
+    timeout: 20000
+# Change this to takeScreenshot when you want to update the screenshot
+- assertScreenshot:
+    path: screenshots/image-blur-prefetch-${maestro.platform}
+    cropOn:
+      id: 'image-blur-prefetch'
+    thresholdPercentage: 95

packages/rn-tester/.maestro/image-cache.yml

@@ -0,0 +1,34 @@
+appId: ${APP_ID} # iOS: com.meta.RNTester.localDevelopment | Android: com.facebook.react.uiapp
+---
+# Load a URI twice; queryCache must report it cached after the first load,
+# confirming image caching works. Cross-platform: the URI is a CDN-cacheable
+# image so iOS's NSURLCache-backed queryCache also reports a hit. The regex
+# covers Android (memory|disk) and iOS (which can additionally return disk/memory).
+- runFlow: ./helpers/launch-app-and-search.yml
+- inputText:
+    text: 'Image'
+- assertVisible:
+    id: 'Image'
+- tapOn:
+    id: 'Image'
+- assertVisible:
+    id: 'example_search'
+- tapOn:
+    id: 'example_search'
+- inputText: 'Image Cache'
+- hideKeyboard
+- scrollUntilVisible:
+    element:
+      id: 'image-cache'
+    direction: DOWN
+    speed: 40
+    timeout: 10000
+- extendedWaitUntil:
+    visible: 'first load: loaded'
+    timeout: 20000
+- extendedWaitUntil:
+    visible: 'queryCache: (disk/memory|disk|memory)'
+    timeout: 15000
+- extendedWaitUntil:
+    visible: 'second load: loaded'
+    timeout: 20000

packages/rn-tester/.maestro/image-progressive-jpeg.yml

@@ -0,0 +1,40 @@
+appId: ${APP_ID} # iOS: com.meta.RNTester.localDevelopment | Android: com.facebook.react.uiapp
+tags:
+  - android-only
+---
+# Android-only: loads a JPEG with progressiveRenderingEnabled and logs load
+# events. iOS skips this flow (empty=pass).
+- runFlow:
+    when:
+      platform: Android
+    commands:
+      - runFlow: ./helpers/launch-app-and-search.yml
+      - inputText:
+          text: 'Image'
+      - assertVisible:
+          id: 'Image'
+      - tapOn:
+          id: 'Image'
+      - assertVisible:
+          id: 'example_search'
+      - tapOn:
+          id: 'example_search'
+      - inputText: 'Progressive JPEG'
+      - hideKeyboard
+      - scrollUntilVisible:
+          element:
+            id: 'image-progressive-jpeg'
+          direction: DOWN
+          speed: 40
+          timeout: 10000
+      # loadStart fires on mount -> proves the progressive load path engaged.
+      # Assert by id since each event is its own element (progress % is dynamic).
+      - extendedWaitUntil:
+          visible:
+            id: 'progressive-jpeg-loadstart'
+          timeout: 15000
+      # Final load event (network image; relies on the same host as image.yml).
+      - extendedWaitUntil:
+          visible:
+            id: 'progressive-jpeg-load'
+          timeout: 20000

packages/rn-tester/.maestro/image-wide-gamut.yml

@@ -0,0 +1,43 @@
+appId: ${APP_ID} # iOS: com.meta.RNTester.localDevelopment | Android: com.facebook.react.uiapp
+---
+# Alpha transparency + sRGB vs Display-P3 wide-gamut. Color fidelity needs a
+# screenshot, so we assert load status only. Cross-platform.
+- runFlow: ./helpers/launch-app-and-search.yml
+- inputText:
+    text: 'Image'
+- assertVisible:
+    id: 'Image'
+- tapOn:
+    id: 'Image'
+- assertVisible:
+    id: 'example_search'
+- tapOn:
+    id: 'example_search'
+- inputText: 'Wide Gamut'
+- hideKeyboard
+- scrollUntilVisible:
+    element:
+      id: 'image-wide-gamut'
+    direction: DOWN
+    speed: 40
+    timeout: 10000
+- extendedWaitUntil:
+    visible: 'alpha: loaded'
+    timeout: 15000
+- scrollUntilVisible:
+    element: 'sRGB: loaded'
+    direction: DOWN
+    speed: 40
+    timeout: 20000
+# External URL; accept loaded or error.
+- scrollUntilVisible:
+    element: 'P3: (loaded|error)'
+    direction: DOWN
+    speed: 40
+    timeout: 20000
+# Change this to takeScreenshot when you want to update the screenshot
+- assertScreenshot:
+    path: screenshots/image-wide-gamut-${maestro.platform}
+    cropOn:
+      id: 'image-wide-gamut'
+    thresholdPercentage: 95