fix: CI to export artifacts and fail on mismatch

Author: greweb

.github/workflows/ci.yml

@@ -549,11 +549,12 @@ jobs:
 
       - name: Run Detox Tests
         working-directory: example
-        run: npm run test:e2e:ios || true
+        run: npm run test:e2e:ios
+        continue-on-error: true
         id: detox_ios_tests
 
       - name: Check for iOS snapshot differences
-        if: always()
+        if: failure() && steps.detox_ios_tests.outcome == 'failure'
         working-directory: example
         run: |
           if [ -d "e2e/snapshots/output" ] && [ "$(ls -A e2e/snapshots/output 2>/dev/null)" ]; then
@@ -603,6 +604,12 @@ jobs:
             example/e2e/test-results/**/*
             example/artifacts/**/*.xml
 
+      - name: Fail CI if iOS tests failed
+        if: steps.detox_ios_tests.outcome == 'failure'
+        run: |
+          echo "❌ iOS Detox tests failed - failing CI"
+          exit 1
+
   test-detox-android:
     name: Detox E2E Tests (Android)
     runs-on: ubuntu-latest
@@ -680,15 +687,16 @@ jobs:
 
       - name: Create AVD and run Detox tests
         uses: reactivecircus/android-emulator-runner@v2
+        id: detox_android_tests
         with:
-          api-level: 28
+          api-level: 29
           target: google_apis
           arch: x86_64
-          profile: pixel_3a
-          force-avd-creation: false
-          emulator-options: -no-window -gpu swiftshader_indirect -noaudio -no-boot-anim -camera-back none -no-snapshot-save -no-snapshot-load -memory 768 -cores 1 -qemu -enable-kvm -no-snapshot -wipe-data
+          profile: Nexus_6
+          force-avd-creation: true
+          emulator-options: -no-window -gpu swiftshader_indirect -noaudio -no-boot-anim -camera-back none -memory 512 -cores 1 -qemu -enable-kvm -no-snapshot -wipe-data
           disable-animations: true
-          emulator-boot-timeout: 900
+          emulator-boot-timeout: 1800
           script: |
             cd example
             echo "🚀 Starting Metro bundler..."
@@ -747,6 +755,12 @@ jobs:
             example/e2e/test-results/**/*
             example/artifacts/**/*.xml
 
+      - name: Fail CI if Android tests failed
+        if: steps.detox_android_tests.outcome == 'failure'
+        run: |
+          echo "❌ Android Detox tests failed - failing CI"
+          exit 1
+
   build-web-example:
     name: Build Web Example
     runs-on: ubuntu-latest
@@ -865,12 +879,12 @@ jobs:
             done
           fi
 
-      - name: Upload reference snapshots (for updates)
+      - name: Upload generated snapshots (for updates)
         if: always()
         uses: actions/upload-artifact@v4
         with:
-          name: web-snapshots-reference
-          path: example-web/e2e/snapshots/reference/
+          name: web-snapshots-generated
+          path: example-web/e2e/snapshots/output/
           retention-days: 30
 
       - name: Upload snapshot diffs (if any)

example-web/e2e/snapshots/reference/basic-test-png-capture-chromium-darwin.png

@@ -147,4 +147,66 @@ test.describe("ViewShot Web Example", () => {
     // Verify download button appears
     await expect(page.locator("text=⬇️ Download Image")).toBeVisible();
   });
+
+  test("should capture ImageTestScreen with real images", async ({page}) => {
+    await page.goto("/");
+    await page.click("text=Image Capture");
+
+    // Wait for page to be ready
+    await page.waitForSelector("text=🖼️ Image Gallery");
+
+    // Wait for all images to load and be visible
+    await page.waitForLoadState("networkidle");
+
+    // Wait for any images to be loaded (more flexible selector)
+    await page.waitForSelector('img[src*="test-image"]', {timeout: 10000});
+
+    // Additional wait to ensure images are fully rendered
+    await page.waitForTimeout(5000);
+
+    // Click PNG capture button
+    await page.click("text=📸 Capture as PNG");
+
+    // Wait for capture to complete
+    await page.waitForSelector("text=✅ Captured Result:", {timeout: 10000});
+
+    // Verify preview image appears
+    const previewImage = page.locator('img[src^="data:image/png"]');
+    await expect(previewImage).toBeVisible();
+
+    // Visual snapshot of the captured image with real images (high resolution)
+    await expect(previewImage).toHaveScreenshot(
+      "image-test-screen-capture.png",
+      {
+        threshold: 0.2,
+        maxDiffPixels: 1000,
+        // Increase snapshot resolution
+        scale: "css",
+        animations: "disabled",
+      },
+    );
+  });
+
+  test("should capture ComplexLayoutScreen", async ({page}) => {
+    await page.goto("/");
+    await page.click("text=Complex Layout");
+
+    // Wait for page to be ready
+    await page.waitForSelector("text=Complex Layout Test");
+
+    // Click PNG capture button
+    await page.click("text=📸 Capture This Layout");
+
+    // Wait for capture to complete
+    await page.waitForSelector("text=✅ Captured Successfully!", {
+      timeout: 10000,
+    });
+
+    // Verify preview image appears
+    const previewImage = page.locator('img[src^="data:image/png"]');
+    await expect(previewImage).toBeVisible();
+
+    // Visual snapshot of the complex layout
+    await expect(previewImage).toHaveScreenshot("complex-layout-capture.png");
+  });
 });