如何在Ionic应用中使用Cypress的scrollTo方法实现页面滚动？

Ionic的ion-content组件为了实现多端一致的滚动交互，自行封装了滚动逻辑，外层ion-content元素和全局window默认没有可滚动属性，所以Cypress通用的scrollTo方法会判定目标不可滚动，触发报错。

可按以下方案解决：

• 方案1：直接调用Ionic官方封装的scrollToBottomAPI（适配所有Ionic 4+版本）

  cy.get('ion-content').then(async $el => {
    // 调用ion-content组件原生提供的滚动到底方法
    await $el[0].scrollToBottom()
  })
  

• 方案2：操作ion-content内部实际可滚动的DOM节点
  先确保Cypress配置开启了shadow DOM支持：在cypress.config.js中添加includeShadowDom: true，再执行滚动：

  // 定位到ion-content shadow DOM内的真实滚动容器
  cy.get('ion-content').shadow().find('.scroll-content').scrollTo('bottom')
  

• 方案3：原生JS强制设置滚动位置（兼容性最强）

  cy.get('ion-content').shadow().find('.scroll-content').then($scrollEl => {
    $scrollEl[0].scrollTop = $scrollEl[0].scrollHeight
  })
  

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