溢出时赛普拉斯滚动问题：自动

Question

我正在测试一个包含 div 的网络应用程序

\n

<div style="overflow: auto; max-height: 429px;" \xe2\x80\xa6\n

\n

其中包含一张大桌子。我看到桌子周围有滚动条。现在我希望 Cypress 单击表中的一个元素。如果该元素隐藏在某个地方，那就没问题。Cypress 会自动滚动到那里。但如果该元素隐藏在右侧的某个位置，Cypress 将不会滚动到正确的位置，而是会抱怨：

\n

\n

CypressError：10050ms后超时重试：cy.click()失败，因为该元素的中心从视图中隐藏：`<input type =“radio”\ xe2 \ x80 \ xa6

\n

\n

这是为什么？我能做些什么？

\n

我正在使用最新的赛普拉斯（13.6.2）。

\n

编辑：事实证明存在两个不同的问题：

\n

\n
1. 对于某些元素，Cypress 确实会自动滚动，但没有滚动到正确的位置。
\n
2. 对于极少数元素，Cypress 根本不会自动滚动。
\n

\n

第一个问题发生在“overflow: auto”内的宽表中。当我将显示行为从默认的“顶部”切换到“中心”后，第二个问题发生在没有任何溢出上下文的情况下。

\n

Answer 1

我认为洛林·图森是正确的。请参阅文档中的示例scrollIntoView。

cy.get('#scroll-horizontal button')
  .scrollIntoView()
  .should('be.visible')

.should('be.visible')如果滚动有动画，则需要。

Answer 2

我根据您的描述制作了一个最小的可重现示例，但它并没有失败。

样式- 使表格、行和第一列1000px强制第二列不可见。

<div style="overflow: auto; max-height: 429px;">
  <table style="table-layout:fixed; width:1000px;">
    <tbody>
      <tr style="width: 1000px">
        <td id="wide-column" style="width: 1000px">Very wide column</td>
        <td><input type="radio" /></td>
      </tr>
    </tbody>
  </table>
</div>

测试：

cy.viewport(500,500)
cy.visit('index.html')

cy.get('input').click()

结果：

表格自动水平滚动。

如果我固定cy.visit()快照，则会显示滚动发生之前的表格。

应用程序中的某些内容阻止了滚动的发生，或者是固定位置元素覆盖了输入，无论滚动位置如何。

如果您无法找出阻止滚动的原因，最简单的方法是禁用可操作性。

cy.get('input').click({force: true})