Angular应用中Cypress如何点击横向滚动区的不可见按钮

问题场景 #

使用最新版Angular + Cypress框架开发时，Angular Material带横向滚动条的表格最后一列放置的操作按钮初始不在视口内，必须手动滚动到右侧才能点击，常规点击方法、强制点击均失效。

已尝试的无效方案：

• cy.get('#myButton').click();
• cy.get('#myButton').debug().click();
• cy.debug().get('#myButton').click();
• cy.get('#myButton').click({force:true});

失效原因 #

Cypress默认的自动滚动逻辑仅作用于浏览器窗口本身，不会识别嵌套在页面内部、自带overflow-x: auto横向滚动条的表格容器。Angular Material的可滚动表格会自动在<table>外层包裹一层独立滚动容器，默认点击逻辑不会触发该容器的横向滚动；{force:true}仅跳过Cypress内置的可点击性、可见性校验，不会主动触发内部滚动容器的滚动，此时按钮实际在容器可视区域外，点击坐标会落在空白位置，自然无法触发按钮事件。
加debug()只是暂停执行等待手动操作，没有改变滚动逻辑，本质不会解决问题。

可直接复用的实现代码 #

步骤1：确认滚动容器 #

找到表格外层实际承载横向滚动条的元素，最新版Angular Material（v15+）的滚动容器默认类名为.mat-mdc-table-container，旧版为.mat-table-container，推荐给该容器加专属测试id如data-testid="table-scroll-container"避免选择器随版本更新失效。

步骤2：执行滚动+点击 #

优先用Cypress内置的scrollTo命令实现滚动，逻辑更稳定：

// 1. 将表格滚动容器拉到最右侧
cy.get('[data-testid="table-scroll-container"]').scrollTo('right', { ensureScrollable: true })
// 2. 等待按钮出现在可视区后执行点击
cy.get('#myButton').should('be.visible').click()

如果遇到scrollTo不生效的场景，可以直接操作DOM修改滚动位置：

cy.get('[data-testid="table-scroll-container"]').then($container => {
  const containerEl = $container[0]
  // 直接将横向滚动位置设为最大值，即滚到最右
  containerEl.scrollLeft = containerEl.scrollWidth
})
cy.get('#myButton').should('be.visible').click()

避坑提示 #

• 不要直接选择<table>元素作为滚动目标：Angular Material的滚动条是加在表格外层的包裹div上，直接选table执行滚动不会生效
• 滚动后必须加should('be.visible')断言：Cypress会自动重试直到按钮真的出现在可视区域，避免滚动动画未结束、表格数据未渲染完成就触发点击导致用例失败
• 不需要加多余的cy.wait(xx)硬等待，断言自带的重试机制足够覆盖常规渲染延迟

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