React Native + Detox：架构设计与 P00 页面巡检实践

// 期望的 CDP 行为
await client.Runtime.evaluate({
  expression: `window.navigate('/some/path')`,  // 返回 Promise
  awaitPromise: true,  // 等待 Promise
});

export const signalDone = (opId: string) => console.log(`[E2E:DONE:${opId}]`);
export const signalError = (opId: string, error: unknown) =>
  console.error(`[E2E:ERROR:${opId}:${error}]`);

export async function waitForSignal(opId: string, timeout = 60000): Promise<void> {
  const cdpClient = await getCdpClient();

  return new Promise((resolve, reject) => {
    const unsubscribe = cdpClient['Runtime.consoleAPICalled']((params) => {
      const message = params.args?.[0]?.value;
      if (message === `[E2E:DONE:${opId}]`) {
        cleanup();
        resolve();
      } else if (message?.startsWith(`[E2E:ERROR:${opId}:`)) {
        cleanup();
        reject(new Error(/* ... */));
      }
    });

    const timeoutId = setTimeout(() => {
      cleanup();
      reject(new Error(`Signal timeout for ${opId}`));
    }, timeout);

    function cleanup() {
      clearTimeout(timeoutId);
      unsubscribe();
    }
  });
}

// actions/navigate.ts
export async function navigate(path: string, params = {}) {
  const client = await getCdpClient();
  const opId = generateOperationId();

  // 1. 先注册监听，避免信号丢失
  const signalPromise = waitForSignal(opId);

  // 2. 触发操作（Fire and Forget）
  await client.Runtime.evaluate({
    expression: `navigate('${path}', ${JSON.stringify(params)}, '${opId}')`,
    awaitPromise: false,  // 不依赖 Hermes 的 Promise 等待
  });

  // 3. 等待 App 端通过 console 发回完成信号
  await signalPromise;
}

// 旧代码 - 存在并发问题
let client: CDP.Client | null = null;
let waiting = false;

export const getCdpClient = async () => {
  if (client) return client;

  if (waiting) {
    // 问题：setInterval 轮询等待，如果初始化失败会永远卡死
    return new Promise<CDP.Client>((resolve) => {
      const interval = setInterval(() => {
        if (client) {
          clearInterval(interval);
          resolve(client);
        }
      }, 100);
    });
  }

  waiting = true;
  // ... 初始化逻辑
};

// cdp/client.ts
let client: CDP.Client | null = null;
let initPromise: Promise<CDP.Client> | null = null;

export const getCdpClient = async (): Promise<CDP.Client> => {
  // 1. 检查现有连接 + 健康检查
  if (client && (await isClientConnected(client))) {
    return client;
  }

  // 2. 并发锁：复用正在进行的连接尝试
  if (initPromise) return initPromise;

  // 3. 发起新连接
  initPromise = (async () => {
    try {
      const newClient = await createCdpConnection();
      client = newClient;
      return newClient;
    } finally {
      initPromise = null;  // 无论成功失败都重置
    }
  })();

  return initPromise;
};

// 并发调用时，多个测试共享同一个连接 Promise
const [client1, client2] = await Promise.all([
  getCdpClient(),  // 发起连接
  getCdpClient(),  // 复用同一个 initPromise
]);

async function isClientConnected(cdpClient: CDP.Client): Promise<boolean> {
  try {
    const healthCheck = cdpClient.Runtime.evaluate({ expression: '1', returnByValue: true });
    const timeout = new Promise<never>((_, reject) =>
      setTimeout(() => reject(new Error('CDP Health Check Timeout')), 2000),
    );

    await Promise.race([healthCheck, timeout]);
    return true;
  } catch {
    return false;
  }
}

newClient.on('disconnect', () => {
  // 防止旧连接断开误重置新连接
  if (client === newClient) {
    client = null;
  }
});

async function createCdpConnection(retries = 3): Promise<CDP.Client> {
  for (let attempt = 1; attempt <= retries; attempt++) {
    try {
      return await CDP({ /* ... */ });
    } catch (err) {
      if (attempt === retries) throw err;
      await new Promise(r => setTimeout(r, 1000));  // 重试间隔 1 秒
    }
  }
}

T1: waitForSignal() 注册监听 ← 监听器已就绪
T2: Runtime.evaluate() 触发操作
T3: App 执行异步逻辑...
T4: signalDone(opId) 发出信号
T5: 监听器收到，resolve()

T0: App 开始启动
T1: setupConsoleInterceptor() 注入
T2-T4: 日志产生（启动日志等）
T5: Detox 测试开始
T6: CDP 连接建立 ← 这时才能用 consoleAPICalled！

export function setupConsoleInterceptor() {
  // 始终初始化存储数组，确保后续代码可访问
  window._consoleLogs = [];
  window._consoleLogsInitialized = true;

  // 如果未开启日志收集，仅初始化不拦截
  if (process.env.EXPO_PUBLIC_E2E_CONSOLE_LOG !== 'true') {
    console.log('Console interceptor initialized (logging disabled)');
    return;
  }

  // 拦截 5 种类型
  for (const type of ['log', 'warn', 'error', 'info', 'debug'] as const) {
    const orig = console[type];
    console[type] = (...args) => {
      // 安全序列化：对象使用 JSON.stringify，异常时 fallback 到 String()
      const serializedArgs = args.map(arg => {
        try {
          return typeof arg === 'object' ? JSON.stringify(arg) : String(arg);
        } catch {
          return String(arg);
        }
      });

      window._consoleLogs.push({ type, args: serializedArgs, timestamp: Date.now() });
      orig.apply(console, args);
    };
  }
  console.log('Console interceptor initialized (logging enabled)');
}

export async function listenToConsoleLogs(listener): Promise<() => void> {
  const client = await getCdpClient();

  const intervalId = setInterval(async () => {
    try {
      const resp = await client.Runtime.evaluate({
        expression: `JSON.stringify(window._consoleLogs.splice(0))`,
        returnByValue: true,  // 必须添加！
      });

      const logs = JSON.parse(resp.result.value as string);
      for (const logEntry of logs) {
        listener(logEntry);
      }
    } catch {
      // 静默处理错误，避免轮询中断
    }
  }, 100);

  return () => clearInterval(intervalId);  // 返回停止函数
}

class ConsoleLogCollector {
  private logs: TimestampedLogEntry[] = [];
  private testBoundaries: Map<string, { start: number; end?: number }> = new Map();

  markStart(testId: string) {
    this.testBoundaries.set(testId, { start: this.logs.length });
  }

  markEnd(testId: string) {
    const boundary = this.testBoundaries.get(testId);
    if (boundary) boundary.end = this.logs.length;
  }

  getLogs(testId: string): CategorizedLogs {
    const boundary = this.testBoundaries.get(testId);
    if (!boundary) return { e2eLogs: [], appLogs: [] };

    const testLogs = this.logs.slice(boundary.start, boundary.end);

    return {
      e2eLogs: testLogs.filter(isE2ELog),
      appLogs: testLogs.filter(log => !isE2ELog(log)),
    };
  }
}

export async function performHealthCheck(config: ScreenConfig): Promise<HealthCheckResult> {
  const errors: DetectedError[] = [];

  // 1. 检查错误文本
  for (const errorText of ERROR_TEXTS) {
    if (shouldTolerate(errorText, config.healthCheck?.tolerateErrors)) continue;
    if (await elementExists(errorText, config.healthCheck?.detectTimeout)) {
      errors.push({ type: 'TEXT', message: errorText });
    }
  }

  // 2. 检测 Toast（仅记录，不阻塞测试）
  const toastMessages = await detectToasts();

  return {
    passed: errors.length === 0,  // Toast 不影响 passed
    errors,
    toastMessages: toastMessages.length > 0 ? toastMessages : undefined,
    duration: Date.now() - startTime,
  };
}

async function detectToasts(): Promise<string[]> {
  const client = await getCdpClient();
  const result = await client.Runtime.evaluate({
    expression: `
      (() => {
        const messages = [];

        // 添加当前显示的 Toast
        if (window._currentToastMessage) {
          messages.push(window._currentToastMessage);
        }

        // 添加所有历史 Toast（去重）
        const history = window._toastHistory || [];
        history.forEach(t => {
          if (!messages.includes(t.message)) {
            messages.push(t.message);
          }
        });

        return messages;
      })()
    `,
    returnByValue: true,
  });

  return (result.result.value ?? []) as string[];
}

1. prepareForScreenshot()
   ├── hideKeyboard()       # 隐藏键盘
   ├── clearFocus()         # 清除焦点
   ├── clearToast()         # 清除 Toast
   └── wait(1500ms)         # 等待渲染稳定

2. device.takeScreenshot()

3. 保存策略
   ├── 更新模式（UPDATE_BASELINE=true）
   │   └── 保存到 baseline/
   │
   └── 对比模式（UPDATE_BASELINE=false）
       ├── 无基准图
       │   ├── 保存到 baseline/
       │   └── 保存到 current/
       │
       └── 有基准图
           ├── odiff 对比
           └── 始终保存到 current/（无论是否有差异）

e2e/artifacts/p00/
├── baseline/                          # 基准图（Git 管理）
│   ├── ios/
│   │   ├── calendar-view.png          # 文件名不含平台前缀
│   │   └── customer-detail.png
│   └── android/
│       ├── calendar-view.png
│       └── customer-detail.png
│
├── current/                           # 当前截图（每次运行生成）
│   ├── ios/
│   │   ├── calendar-view.png
│   │   └── customer-detail.png
│   └── android/
│       ├── calendar-view.png
│       └── customer-detail.png
│
└── diff/                              # 差异图（超阈值时生成）
    ├── ios/
    │   └── calendar-view.png          # 差异图不加 -diff 后缀
    └── android/
        └── calendar-view.png

说明：
- 平台通过目录区分，文件名统一格式
- 文件名格式：{路径转换}.png（如 /calendar/view → calendar-view.png）
- current/ 和 diff/ 目录被 .gitignore 忽略

// suites/p00/screens.ts

// 简单页面（大多数情况）
{ path: '/calendar/view' }

// 需要参数
{ path: '/customer/detail', mockParams: { id: 123 } }

// 特殊处理
{
  path: '/map/view',
  category: 'risky',
  visualMonitor: { threshold: 0.2 }
}

// 跳过测试
{ path: '/some/broken/page', skip: true, skipReason: '已知问题' }

interface ScreenConfig {
  / 路由路径，必须以 '/' 开头 */
  path: `/${string}`;

  /否跳过 */
  skip?: boolean;
  skipReason?: string | string[];

  /数 */
  mockParams?: Record<string, unknown>;

  /置 */
  healthCheck?: {
    loadWait?: number;           // 页面加载等待时间（毫秒）
    detectTimeout?: number;      // 单次元素检测超时（毫秒）
    tolerateErrors?: string[];   // 容忍的错误关键词
  };

  /*/
  visualMonitor?: {
    skip?: boolean;              // 跳过视觉监控
    threshold?: number;          // 自定义 diff 阈值
    waitBeforeCapture?: number;  // 截图前等待时间
  };

  / diff 阈值 */
  category?: 'static' | 'dynamic' | 'risky';
}

// inject/index.ts
console.log('Initializing inject modules...');

setupEnvironment();      // 1. 环境设置
setupUIHelpers();        // 2. UI 辅助
setupConsoleInterceptor(); // 3. Console 拦截
setupToastInterceptor(); // 4. Toast 拦截
setupNavigation();       // 5. 导航功能
setupAuth();             // 6. 登录功能

console.log('All inject modules initialized');

// 方式1：封装的 toast() 函数
import { toast } from '@/utils/toast';
toast('操作成功');  // ✅ 会设置 window._currentToastMessage

// 方式2：直接使用 @ant-design/react-native
import { Toast } from '@ant-design/react-native';
Toast.fail('请求失败');  // ❌ 不会设置 window._currentToastMessage

export function setupToastInterceptor() {
  const Toast = require('@ant-design/react-native').Toast;

  // 拦截 5 种方法
  for (const method of ['info', 'success', 'fail', 'loading', 'offline']) {
    const original = Toast[method];
    Toast[method] = (content, duration, onClose) => {
      // 记录到全局
      window._currentToastMessage = content;
      window._toastHistory = window._toastHistory || [];
      window._toastHistory.push({ message: content, timestamp: Date.now() });
      if (window._toastHistory.length > 20) window._toastHistory.shift();

      // 调用原方法
      const key = original.call(Toast, content, duration, () => {
        // Toast 自动清除时同步清空
        if (window._currentToastMessage === content) {
          window._currentToastMessage = undefined;
        }
        onClose?.();
      });

      return key;
    };
  }

  // 拦截清除方法
  const originalRemoveAll = Toast.removeAll;
  Toast.removeAll = () => {
    window._currentToastMessage = undefined;
    originalRemoveAll.call(Toast);
  };
}

RootStack
├── /home (Drawer Navigator)  ←── Drawer 页面
│   ├── /calendar/view
│   ├── /overview
│   └── /messages
│
├── /agreement/detail         ←── Stack 页面
├── /customer/detail
└── ...

// window.navigate 核心逻辑
window.navigate = async (path, params = {}, opId?) => {
  // 导航前清空 Toast 历史，确保检测的是当前页面的 Toast
  window._toastHistory = [];

  if (isDrawerRoute(path)) {
    // Drawer 页面：嵌套导航 → /home → { screen: path }
    globalNavigation.current?.dispatch(
      CommonActions.navigate(PATH_HOME.key, { screen: path, params })
    );
  } else {
    // Stack 页面：直接导航
    globalNavigation.current?.dispatch(new RoutePath(path).navigate(params));
  }

  await waitForRoute(path);  // 事件监听等待导航完成
  if (opId) signalDone(opId);
};

// index.js
if (process.env.EXPO_PUBLIC_IS_E2E === 'true') {
  import('./e2e/lib/inject/index').then(init);
} else {
  init();
}

// src/utils/alert.ts - dangerConfirmAsync / primaryConfirmAsync
if (process.env.EXPO_PUBLIC_IS_E2E === 'true') {
  return Promise.resolve(buttonText); // 自动确认
}

阶段 1: device.launchApp({ newInstance: true })
        ↓
        等待 3s（Expo Dev Client 初始化）
        ↓
阶段 2: device.openURL({ url: deepLinkUrl })
        ↓
        等待 5s（JS Bundle 下载和解析）

exp+moego-business-2://expo-development-client/?url=http%3A%2F%2Flocalhost%3A8081

// jest.setup.ts
beforeAll(async () => {
  // 1. 优化 Android 环境（禁用系统动画）
  if (device.getPlatform() === 'android') {
    await optimizeAndroidEnvironment();
  }

  // 2. 两阶段启动 App
  await launchApp();

  // 3. 设置设备位置（默认旧金山唐人街）
  await setLocation();

  // 4. 启用 Console 日志监听（连接 CDP）
  stopListeningConsoleLogs = await listenToConsoleLogs((entry) => {
    logFn(`[App] ${entry.args.join(' ')}`);
    consoleCollector.collectLog(entry);  // 收集到收集器
  });

  // 5. 等待 inject.ts 初始化完成（15s 超时）
  await waitForInjectReady();
});

// .detoxrc.js
const METRO_PORT = Number(process.env.EXPO_PUBLIC_METRO_PORT) || 8081;

module.exports = {
  apps: {
    'android.debug': {
      reversePorts: [METRO_PORT],  // Detox 自动执行 adb reverse
    },
  },
};

EXPO_PUBLIC_METRO_PORT
        │
        ├──► .detoxrc.js → reversePorts → adb reverse
        ├──► jest.setup.ts → CONFIG.METRO_PORT → Deep Link URL
        └──► cdp/client.ts → CDP({ port })

# Worker 1
EXPO_PUBLIC_METRO_PORT=8081 pnpm start:e2e &
EXPO_PUBLIC_METRO_PORT=8081 pnpm test:run-e2e-android

# Worker 2
EXPO_PUBLIC_METRO_PORT=8082 pnpm start:e2e &
EXPO_PUBLIC_METRO_PORT=8082 pnpm test:run-e2e-android