iOS端添加Pager View导致Maestro测试滚动功能失效

在React Native项目中使用react-native-pager-view（依赖iOS的UIPageViewController）实现顶部轮播后，iOS端Maestro的scroll和scrollUntilVisible指令完全失效，Android正常；注释轮播组件后测试恢复正常。手动滚动过轮播区域后，Maestro的滚动指令可正常工作，核心需求是跳过轮播区域让后续测试执行。

原因分析 #

iOS的UIPageViewController会优先捕获触摸事件，导致Maestro发送的滚动指令被轮播组件拦截，无法传递给页面的底层滚动视图（比如ScrollView）。

解决办法 #

1. 用travel/travelTo指令直接跳过轮播区域 #

只需滚动过轮播区域即可恢复后续滚动指令的正常工作，可直接使用Maestro的travel指令滚动到指定坐标，或者travelTo定位到轮播下方的元素：

示例1：固定坐标滚动

# 根据轮播实际高度调整y值，确保滚动过轮播区域
- travel:
    x: 50% # 屏幕水平居中位置
    y: 300 # 滚动到y=300的位置（假设轮播高度为250）

示例2：定位到轮播下方的元素

如果轮播下方有设置了testID的元素，直接定位更可靠：

- travelTo:
    id: "feature-list-container" # 轮播下方元素的testID

执行完上述指令后，再调用scroll或scrollUntilVisible即可正常工作。

2. 修改轮播组件，避免拦截垂直滚动事件 #

由于轮播是水平滑动，可在react-native-pager-view上添加触摸事件处理，判断垂直滑动时阻止事件传递给轮播组件，让垂直滚动事件落到页面的滚动视图上：

import React, { useRef } from 'react';
import PagerView from 'react-native-pager-view';
import { View } from 'react-native';

const TopCarousel = () => {
  const pagerRef = useRef(null);
  let startY = 0;

  const handleTouchStart = (e) => {
    startY = e.nativeEvent.pageY;
  };

  const handleTouchMove = (e) => {
    const currentY = e.nativeEvent.pageY;
    // 当垂直滑动距离超过10px时，阻止轮播捕获事件
    if (Math.abs(currentY - startY) > 10) {
      e.stopPropagation();
    }
  };

  return (
    <PagerView
      ref={pagerRef}
      style={{ height: 250 }} // 轮播实际高度
      testID="top-carousel"
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
    >
      {/* 轮播页面内容 */}
      <View testID="carousel-page-1">...</View>
      <View testID="carousel-page-2">...</View>
    </PagerView>
  );
};

export default TopCarousel;

这种方法从根源上解决事件拦截问题，无需修改Maestro测试脚本。

3. 用runScript执行JS滚动页面 #

如果上述方法不适用，可通过Maestro的runScript指令执行一段React Native JS代码，直接控制页面的滚动视图滚动过轮播区域：

- runScript: |
    import { findNodeHandle } from 'react-native';
    import { NativeModules } from 'react-native';

    // 获取主滚动视图的节点（需提前设置testID="main-scroll-view"）
    const mainScrollView = document.querySelector('#main-scroll-view');
    if (mainScrollView) {
      const handle = findNodeHandle(mainScrollView);
      NativeModules.UIManager.scrollTo(handle, { y: 300, animated: true });
    }

内容的提问来源于stack exchange，提问作者Andrew