如何使用WebdriverIO与JavaScript实现混合移动应用内滚动？

我尝试了多种代码实现垂直滚动，但都没达到预期效果，目标是滚动到视口外的特定元素并与其交互。目前只有未注释的代码能运行，但需要实现动态垂直滚动。注意所有元素定位符都是大写形式，最后一行代码表现异常，只能滚动到中途位置，无法定位到目标元素。

尝试过的代码（仅未注释部分可运行） #

// await this.progressCard.scrollIntoView()
        // await browser.scroll(0,2000).end()
        // await browser.moveTo(SIGNUP_CARD);
        // browser.touchPerform(RECENT_APPTS_TXT,0,2000);
        // await browser.touchPerform([
        //     {
        //     action: 'press',
        //     options: {
        //         x: 736,
        //         y: 800
        //     }
        //     },
        //     {
        //         action: 'moveTo',
        //         options: {
        //             x: 736,
        //             y: 1133
        //         }
        //     },
        //     {
        //         action: 'release'
        //     }
        // ]);
        // await browser.touchAction({
        //     action: 'tap',
        //     x: 736,
        //     y:1133,
        //     element: SIGNUP_CARD
        // })
        // await this.scheduleTherapyBtn.click()
        // await touchAction().press(RECENT_APPTS_TXT).moveTo(SIGNUP_CARD).release()
        // await browser.swipeUp(HOMESCREEN_HEADING,900,1);
        // await browser.touchScroll(1,900);
        // await browser.execute(SIGNUP_CARD => SIGNUP_CARD.scrollIntoView(), browser.element('accessibility id').value);
        // await browser.pause(5000)
        
        
        // await browser.execute("mobile: scroll", { strategy: 'accessibility id', selector : ASSESSMENT_CARD, direction: 'down'})
        // await this.signUpCard.click()
        // await browser.pause(3000)
        // await browser.touchAction([ {action: 'longPress', x: 794, y:1351 }, { action: 'wait', ms: 1000 }, { action: 'moveTo', x: 799, y: 1114}, 'release' ]);
        
        await browser.touchAction([{action:'press', x:700 , y: 1800},{action: 'wait', ms: 3000},{action: 'moveTo', x: 700, y: 600},'release'])
        //await browser.pause(3000)
        await browser.execute("mobile: scroll", {  strategy: 'accessibility id', selector : locator})

解决方案 #

针对Appium中滚动到目标元素的问题，推荐以下几种可靠的实现方式：

• 使用scrollIntoView精准定位
  直接定位目标元素后调用scrollIntoView，无需手动计算坐标，适配不同设备分辨率：

  const targetElement = await $(`~${locator}`); // 替换为目标元素的accessibility id
  await targetElement.scrollIntoView({ block: 'center' }); // block参数可选'center'/'start'/'end'，控制元素最终位置
  await targetElement.click();
  

• 优化mobile: scroll命令
  补充方向参数并限制最大滚动次数，避免无限滚动或中途停止：

  await browser.execute("mobile: scroll", {
      strategy: 'accessibility id',
      selector: locator,
      direction: 'down',
      maxScrolls: 10 // 可选，设置最大滚动次数防止无效循环
  });
  await $(`~${locator}`).click();
  

• 动态触摸滚动（适配原生APP）
  基于可见元素和目标元素的位置动态计算滚动路径，替代固定坐标：

  const visibleAnchor = await $(`~SOME_VISIBLE_ELEMENT`); // 选择页面上一个固定可见的元素作为起点
  const anchorLoc = await visibleAnchor.getLocation();
  const targetElement = await $(`~${locator}`);
  
  await browser.touchAction([
      { action: 'press', x: anchorLoc.x, y: anchorLoc.y + 100 },
      { action: 'wait', ms: 500 },
      { action: 'moveTo', element: targetElement },
      'release'
  ]);
  await targetElement.click();
  

注意事项 #

• 避免使用固定坐标滚动，不同设备分辨率会导致滚动位置偏差；
• 滚动后添加短暂等待（await browser.pause(500)），确保元素完全渲染后再执行交互；
• 通过Appium Inspector验证目标元素的accessibility id是否正确，避免定位失败。

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