@react-native-harness/ui 1.0.0-alpha.23 → 1.0.0-alpha.25

package/dist/userEvent.js

@@ -1,4 +1,4 @@
-import NativeHarnessUI from './NativeHarnessUI.js';
+import HarnessUI from './harness.js';
 /**
  * Flushes pending events on the JS event loop.
  * This ensures that any events triggered by native code (like onPress callbacks)
@@ -23,45 +23,36 @@ const flushEvents = () => {
 const createUserEvent = () => {
     return {
         press: async (element) => {
-            // Calculate center point of the element
-            const centerX = element.x + element.width / 2;
-            const centerY = element.y + element.height / 2;
-            await NativeHarnessUI.simulatePress(centerX, centerY);
+            // We pass 0, 0 as coordinates when nativeId is provided.
+            // Native side will resolve the view and calculate the center.
+            await HarnessUI.simulatePress(element.nativeId, 0, 0);
             // Flush pending events to ensure onPress and other callbacks are processed
             await flushEvents();
         },
         pressAt: async (x, y) => {
-            await NativeHarnessUI.simulatePress(x, y);
+            await HarnessUI.simulatePress('', x, y);
             // Flush pending events to ensure onPress and other callbacks are processed
             await flushEvents();
         },
         type: async (element, text, options) => {
             // Press to focus the element (triggers pressIn/pressOut unless skipPress is true)
-            // Note: Currently we always press to focus, the skipPress option would need
-            // additional implementation in simulatePress to avoid firing press events
             if (!options?.skipPress) {
-                // Calculate center point of the element
-                const centerX = element.x + element.width / 2;
-                const centerY = element.y + element.height / 2;
-                await NativeHarnessUI.simulatePress(centerX, centerY);
+                await HarnessUI.simulatePress(element.nativeId, 0, 0);
                 await flushEvents();
             }
             else {
-                // Still need to press to focus, but ideally without press events
-                // For now, we press anyway - future enhancement could add a focusOnly method
-                const centerX = element.x + element.width / 2;
-                const centerY = element.y + element.height / 2;
-                await NativeHarnessUI.simulatePress(centerX, centerY);
+                // Still need to press to focus
+                await HarnessUI.simulatePress(element.nativeId, 0, 0);
                 await flushEvents();
             }
             // Type each character one by one
             for (const char of text) {
-                await NativeHarnessUI.typeChar(char);
+                await HarnessUI.typeChar(char);
                 await flushEvents(); // Let onChangeText fire
             }
             // Blur (triggers endEditing and blur unless skipBlur)
             if (!options?.skipBlur) {
-                await NativeHarnessUI.blur({
+                await HarnessUI.blur({
                     submitEditing: options?.submitEditing ?? false,
                 });
                 await flushEvents();

package/ios/HarnessUI.mm

@@ -1,5 +1,6 @@
 #import "HarnessUI.h"
 #import "ViewQueryHelper.h"
+#import "ViewRegistry.h"
 #import <QuartzCore/QuartzCore.h>
 #import <React/RCTBridgeModule.h>
 #import <React/RCTLog.h>
@@ -231,17 +232,34 @@ static NSTimeInterval _lastTapTime = 0;
   [self executeTapAtPoint:point retryCount:0 completion:completion];
 }
 
-- (void)simulatePress:(double)x
-                  y:(double)y
-            resolve:(RCTPromiseResolveBlock)resolve
-             reject:(RCTPromiseRejectBlock)reject {
-  RCTLogInfo(@"[HarnessUI] simulatePress called with x:%.2f y:%.2f", x, y);
+- (void)simulatePress:(NSString *)nativeId
+                    x:(double)x
+                    y:(double)y
+              resolve:(RCTPromiseResolveBlock)resolve
+               reject:(RCTPromiseRejectBlock)reject {
+  RCTLogInfo(@"[HarnessUI] simulatePress called with nativeId:%@ x:%.2f y:%.2f", nativeId, x, y);
 
   dispatch_async(dispatch_get_main_queue(), ^{
     NSTimeInterval now = CACurrentMediaTime();
     NSTimeInterval timeSinceLastTap = now - _lastTapTime;
     CGPoint point = CGPointMake(x, y);
 
+    if (nativeId && nativeId.length > 0) {
+        UIView *view = [ViewRegistry getView:nativeId];
+        if (view) {
+             UIWindow *window = [self getActiveWindow]; // Or view.window? view.window is safer if attached.
+             if (!window) window = view.window;
+             
+             if (window) {
+                CGRect frameInWindow = [view convertRect:view.bounds toView:window];
+                point = CGPointMake(CGRectGetMidX(frameInWindow), CGRectGetMidY(frameInWindow));
+                RCTLogInfo(@"[HarnessUI] Resolved view %@ to point (%.2f, %.2f)", nativeId, point.x, point.y);
+             }
+        } else {
+             RCTLogWarn(@"[HarnessUI] View with nativeId %@ not found or collected. Using provided coordinates.", nativeId);
+        }
+    }
+
     // Completion block that actually resolves the promise
     void (^completionBlock)(void) = ^{
       // Check if tap was successful by verifying we found a window/view
@@ -402,23 +420,55 @@ static NSTimeInterval _lastTapTime = 0;
   RCTLogInfo(@"[HarnessUI] captureScreenshot called");
 
   CGRect captureRect = CGRectNull;
+  NSString *nativeId = nil;
 
   if (bounds) {
+      if (bounds->nativeId().length > 0) {
+          nativeId = bounds->nativeId();
+      }
+    
     double width = bounds->width();
     double height = bounds->height();
 
     if (width > 0 && height > 0) {
       captureRect = CGRectMake(bounds->x(), bounds->y(), width, height);
-      RCTLogInfo(@"[HarnessUI] Capturing region: x=%.2f y=%.2f w=%.2f h=%.2f",
+      RCTLogInfo(@"[HarnessUI] Capturing region: x=%.2f y=%.2f w=%.2f h=%.2f nativeId=%@",
                  captureRect.origin.x, captureRect.origin.y,
-                 captureRect.size.width, captureRect.size.height);
+                 captureRect.size.width, captureRect.size.height, nativeId);
     }
   } else {
     RCTLogInfo(@"[HarnessUI] Capturing full window");
   }
 
   dispatch_async(dispatch_get_main_queue(), ^{
-    NSData *pngData = [ViewQueryHelper captureScreenshotWithBounds:captureRect];
+    NSData *pngData = nil;
+    
+    if (nativeId) {
+        UIView *targetView = [ViewRegistry getView:nativeId];
+        if (targetView) {
+             UIWindow *window = [self getActiveWindow];
+             if (window) {
+                 CGRect frameInWindow = [targetView convertRect:targetView.bounds toView:window];
+                 BOOL isFullyOnScreen = CGRectContainsRect(window.bounds, frameInWindow);
+                 
+                 if (isFullyOnScreen) {
+                     RCTLogInfo(@"[HarnessUI] View %@ is fully on screen. Using screen-based screenshotting.", nativeId);
+                     pngData = [ViewQueryHelper captureScreenshotWithBounds:frameInWindow];
+                 } else {
+                     RCTLogInfo(@"[HarnessUI] View %@ is partially/fully off screen. Using direct view render.", nativeId);
+                     pngData = [ViewQueryHelper captureScreenshotOfView:targetView];
+                 }
+             } else {
+                 RCTLogWarn(@"[HarnessUI] No active window found for nativeId: %@. Using direct view render.", nativeId);
+                 pngData = [ViewQueryHelper captureScreenshotOfView:targetView];
+             }
+        } else {
+             RCTLogWarn(@"[HarnessUI] View with nativeId %@ not found. Falling back to window bounds capture.", nativeId);
+             pngData = [ViewQueryHelper captureScreenshotWithBounds:captureRect];
+        }
+    } else {
+        pngData = [ViewQueryHelper captureScreenshotWithBounds:captureRect];
+    }
 
     if (pngData) {
       // Return Base64 string for efficiency

package/ios/ViewQueryHelper.h

@@ -20,6 +20,7 @@ typedef NS_ENUM(NSInteger, ViewQueryType) {
 @property (nonatomic, assign) CGFloat y;
 @property (nonatomic, assign) CGFloat width;
 @property (nonatomic, assign) CGFloat height;
+@property (nonatomic, copy) NSString *nativeId;
 
 - (NSDictionary *)toDictionary;
 
@@ -59,6 +60,14 @@ typedef NS_ENUM(NSInteger, ViewQueryType) {
  */
 + (nullable NSData *)captureScreenshotWithBounds:(CGRect)bounds;
 
+/**
+ * Captures a screenshot of a specific view, rendering its layer directly.
+ * This allows capturing content that might be off-screen or larger than the window.
+ * @param view The view to capture.
+ * @return NSData containing PNG image data, or nil on failure.
+ */
++ (nullable NSData *)captureScreenshotOfView:(UIView *)view;
+
 @end
 
 NS_ASSUME_NONNULL_END

package/ios/ViewQueryHelper.mm

@@ -1,4 +1,5 @@
 #import "ViewQueryHelper.h"
+#import "ViewRegistry.h"
 
 // =============================================================================
 // ViewQueryResult Implementation
@@ -11,7 +12,8 @@
         @"x": @(self.x),
         @"y": @(self.y),
         @"width": @(self.width),
-        @"height": @(self.height)
+        @"height": @(self.height),
+        @"nativeId": self.nativeId ?: @""
     };
 }
 
@@ -119,6 +121,7 @@
     result.y = frameInWindow.origin.y;
     result.width = frameInWindow.size.width;
     result.height = frameInWindow.size.height;
+    result.nativeId = [ViewRegistry registerView:view];
     return result;
 }
 
@@ -184,4 +187,24 @@
     return UIImagePNGRepresentation(image);
 }
 
++ (nullable NSData *)captureScreenshotOfView:(UIView *)view {
+    if (!view) {
+        return nil;
+    }
+
+    // Use UIGraphicsImageRenderer to render the view's layer
+    UIGraphicsImageRendererFormat *format = [[UIGraphicsImageRendererFormat alloc] init];
+    format.scale = [UIScreen mainScreen].scale;
+    format.opaque = NO; // Allow transparency if the view has it
+
+    UIGraphicsImageRenderer *renderer = [[UIGraphicsImageRenderer alloc] initWithSize:view.bounds.size format:format];
+
+    UIImage *image = [renderer imageWithActions:^(UIGraphicsImageRendererContext *context) {
+        // Render the view's layer directly into the context
+        [view.layer renderInContext:context.CGContext];
+    }];
+
+    return UIImagePNGRepresentation(image);
+}
+
 @end

package/ios/ViewRegistry.h

@@ -0,0 +1,8 @@
+#import <UIKit/UIKit.h>
+
+@interface ViewRegistry : NSObject
+
++ (NSString *)registerView:(UIView *)view;
++ (UIView *)getView:(NSString *)nativeId;
+
+@end

package/ios/ViewRegistry.mm

@@ -0,0 +1,33 @@
+#import "ViewRegistry.h"
+
+@implementation ViewRegistry
+
++ (NSMapTable<NSString *, UIView *> *)registry {
+    static NSMapTable *registry = nil;
+    static dispatch_once_t onceToken;
+    dispatch_once(&onceToken, ^{
+        // Key: Strong (NSString), Value: Weak (UIView)
+        // When UIView is deallocated, it is automatically removed from the map.
+        registry = [NSMapTable strongToWeakObjectsMapTable];
+    });
+    return registry;
+}
+
++ (NSString *)registerView:(UIView *)view {
+    if (!view) return nil;
+    
+    // Generate a unique ID. Using a random UUID ensures freshness for each query.
+    NSString *nativeId = [[NSUUID UUID] UUIDString];
+    
+    // Store in registry
+    [[self registry] setObject:view forKey:nativeId];
+    
+    return nativeId;
+}
+
++ (UIView *)getView:(NSString *)nativeId {
+    if (!nativeId) return nil;
+    return [[self registry] objectForKey:nativeId];
+}
+
+@end

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-native-harness/ui",
   "description": "Native UI testing module for React Native Harness.",
-  "version": "1.0.0-alpha.23",
+  "version": "1.0.0-alpha.25",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "tslib": "^2.3.0",
-    "@react-native-harness/runtime": "1.0.0-alpha.23"
+    "@react-native-harness/runtime": "1.0.0-alpha.25"
   },
   "devDependencies": {
     "react-native": "*"

package/src/NativeHarnessUI.ts

@@ -1,66 +1,32 @@
 import { TurboModuleRegistry, type TurboModule } from 'react-native';
 
 /**
- * Represents the position and dimensions of a view in screen coordinates (points/dp).
+ * Represents a bounding box in screen coordinates (points/dp).
  */
-export interface ViewInfo {
+export interface BoundingBox {
   x: number;
   y: number;
   width: number;
   height: number;
 }
 
-interface Spec extends TurboModule {
-  /**
-   * Simulates a native press at the specified screen coordinates.
-   * Returns a promise that resolves when the press action is complete.
-   */
-  simulatePress(x: number, y: number): Promise<void>;
+/**
+ * Internal interface used for bridge communication.
+ * This needs to be exported for TurboModule codegen.
+ */
+export interface ViewInfo extends BoundingBox {
+  nativeId: string;
+}
 
-  /**
-   * Finds a view by its testID (accessibilityIdentifier on iOS, tag on Android).
-   * Returns null if no view is found.
-   */
+interface Spec extends TurboModule {
+  simulatePress(nativeId: string, x: number, y: number): Promise<void>;
   queryByTestId(testId: string): ViewInfo | null;
-
-  /**
-   * Finds all views by testID (accessibilityIdentifier on iOS, tag on Android).
-   * Returns an empty array if no views are found.
-   */
   queryAllByTestId(testId: string): ViewInfo[];
-
-  /**
-   * Finds a view by its accessibility label.
-   * Returns null if no view is found.
-   */
   queryByAccessibilityLabel(label: string): ViewInfo | null;
-
-  /**
-   * Finds all views by accessibility label.
-   * Returns an empty array if no views are found.
-   */
   queryAllByAccessibilityLabel(label: string): ViewInfo[];
-
-  /**
-   * Captures a screenshot of the app UI.
-   * @param bounds Optional bounds to capture a specific region. Pass null to capture the entire window.
-   * @returns Promise resolving to Base64 encoded string containing PNG data, or null on failure.
-   */
   captureScreenshot(bounds: ViewInfo | null): Promise<string | null>;
-
-  /**
-   * Types a single character into the currently focused text input.
-   * If no text input is focused, this is a no-op.
-   */
   typeChar(character: string): Promise<void>;
-
-  /**
-   * Blurs (resigns first responder from) the currently focused element.
-   * Optionally triggers submitEditing event before blur.
-   */
   blur(options: { submitEditing?: boolean }): Promise<void>;
 }
 
-export type HarnessUIModule = Spec;
-
 export default TurboModuleRegistry.getEnforcing<Spec>('HarnessUI');

package/src/WebHarnessUI.ts

@@ -0,0 +1,113 @@
+import { type HarnessUIModule, type ViewInfo } from './types.js';
+
+declare global {
+  interface Window {
+    __RN_HARNESS_CAPTURE_SCREENSHOT__: (
+      bounds: ViewInfo | null
+    ) => Promise<string | null>;
+    __RN_HARNESS_SIMULATE_PRESS__: (x: number, y: number) => Promise<void>;
+    __RN_HARNESS_TYPE_CHAR__: (character: string) => Promise<void>;
+    __RN_HARNESS_BLUR__: (options: {
+      submitEditing?: boolean;
+    }) => Promise<void>;
+    __RN_HARNESS_VIEW_REGISTRY__: Map<string, Element>;
+  }
+}
+
+if (!window.__RN_HARNESS_VIEW_REGISTRY__) {
+  window.__RN_HARNESS_VIEW_REGISTRY__ = new Map();
+}
+
+let nextId = 1;
+
+const getElementViewInfo = (element: Element): ViewInfo => {
+  const rect = element.getBoundingClientRect();
+
+  let nativeId = (element as any).__harnessId;
+  if (!nativeId) {
+    nativeId = `view_${nextId++}`;
+    (element as any).__harnessId = nativeId;
+    window.__RN_HARNESS_VIEW_REGISTRY__.set(nativeId, element);
+  }
+
+  return {
+    x: rect.left,
+    y: rect.top,
+    width: rect.width,
+    height: rect.height,
+    nativeId,
+  };
+};
+
+const WebHarnessUI: HarnessUIModule = {
+  simulatePress: async (nativeId, x, y) => {
+    let targetX = x;
+    let targetY = y;
+
+    if (nativeId) {
+      const element = window.__RN_HARNESS_VIEW_REGISTRY__.get(nativeId);
+      if (element) {
+        const rect = element.getBoundingClientRect();
+        targetX = rect.left + rect.width / 2;
+        targetY = rect.top + rect.height / 2;
+      }
+    }
+
+    await window.__RN_HARNESS_SIMULATE_PRESS__(targetX, targetY);
+  },
+
+  queryByTestId: (testId) => {
+    const element = document.querySelector(`[data-testid="${testId}"]`);
+    return element ? getElementViewInfo(element) : null;
+  },
+
+  queryAllByTestId: (testId) => {
+    const elements = document.querySelectorAll(`[data-testid="${testId}"]`);
+    return Array.from(elements).map(getElementViewInfo);
+  },
+
+  queryByAccessibilityLabel: (label) => {
+    const element = document.querySelector(`[aria-label="${label}"]`);
+    return element ? getElementViewInfo(element) : null;
+  },
+
+  queryAllByAccessibilityLabel: (label) => {
+    const elements = document.querySelectorAll(`[aria-label="${label}"]`);
+    return Array.from(elements).map(getElementViewInfo);
+  },
+
+  captureScreenshot: async (bounds) => {
+    let captureBounds = bounds;
+    if (bounds?.nativeId && bounds.width === 0 && bounds.height === 0) {
+      const element = window.__RN_HARNESS_VIEW_REGISTRY__.get(bounds.nativeId);
+      if (element) {
+        captureBounds = getElementViewInfo(element);
+      }
+    }
+    return await window.__RN_HARNESS_CAPTURE_SCREENSHOT__(captureBounds);
+  },
+
+  typeChar: async (character) => {
+    await window.__RN_HARNESS_TYPE_CHAR__(character);
+  },
+
+  blur: async (options) => {
+    if (options.submitEditing) {
+      // If we want to submit, we must NOT blur before pressing Enter.
+      // We let the runner-side bridge handle both Enter and the subsequent blur.
+      await window.__RN_HARNESS_BLUR__(options);
+    } else {
+      // If there is a focused element, blur it directly in the DOM first
+      // to trigger local events, then call the runner-side bridge.
+      if (
+        document.activeElement instanceof HTMLElement ||
+        document.activeElement instanceof SVGElement
+      ) {
+        document.activeElement.blur();
+      }
+      await window.__RN_HARNESS_BLUR__(options);
+    }
+  },
+};
+
+export default WebHarnessUI;

package/src/harness.ts

@@ -0,0 +1,12 @@
+import { Platform } from "react-native";
+import { HarnessUIModule } from "./types.js";
+
+const getHarnessUI = (): HarnessUIModule => {
+	if (Platform.OS === 'web') {
+		return require('./WebHarnessUI.js').default;
+	}
+
+	return require('./NativeHarnessUI.js').default;
+}
+
+export default getHarnessUI();

package/src/index.ts

@@ -15,4 +15,4 @@ export {
   type ScreenshotResult,
 } from './screen.js';
 export { userEvent, type UserEvent } from './userEvent.js';
-export type { ViewInfo } from './NativeHarnessUI.js';
+export type { ViewInfo, BoundingBox } from './types.js';