禁用赛普拉斯的自动滚动答案

【问题标题】：Disable Cypress from automatic scrolling禁用赛普拉斯的自动滚动
【发布时间】：2021-05-31 14:59:31
【问题描述】：

我正在测试我的应用程序，其中有很长的侧边菜单，并且我有这样的代码：

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

自动滚动发生在获取和单击之间，然后选择的选项卡不可见，因为顶部菜单的位置已固定。我找到了很多解决方案，但没有一个有效。到目前为止，我在 get 和 click 之间尝试了 .click({force: true}) 和 .click(scrollBehaviour: false}) 以及 .scrollIntoView()。有没有其他方法可以解决这个问题？

【问题讨论】：

你能分享你的html dom吗？

标签： javascript reactjs cypress

【解决方案1】：

您尝试过使用scrollBehaviour: 'top' 吗？

您可以在此处找到有关 ScrollBehaviour 的更多详细信息：

https://docs.cypress.io/guides/core-concepts/interacting-with-elements#Scrolling https://docs.cypress.io/guides/references/configuration#Actionability https://docs.cypress.io/api/commands/click#Arguments

【讨论】：

scrollBehaviour 似乎根本不起作用

【解决方案2】：

您可以全局设置scrollBehavior，也可以按测试(-suite)设置。

我在每个测试的基础上禁用它，如下所示：

it('check something w/ autoscroll disabled', { scrollBehavior: false }, () => {
  cy.get('.tab').click();
  // do something else ...
});

文档：https://docs.cypress.io/guides/references/configuration#Actionability

【讨论】：

【解决方案3】：

取决于自动滚动是如何实现的，你可以尝试在测试的顶部添加这个

cy.window().then(win => win.scrollTo = cy.stub())

它试图存根原生 scrollTo 函数。我没试过，如果win.scrollTo是只读的可能会失败。

这是参考页面Window.scrollTo()，如果应用正在使用这些变体，可以在注释中看到一些其他变体。

【讨论】：

应用后看不出有什么不同。它仍在滚动，但实际上即使选项卡仍然不可见，cypress 在选项卡上单击它并在该步骤停止。所以它有点帮助，但不知道它是如何以及为什么最终停止的。
没有可重现的例子，这只是在黑暗中刺伤。您可以尝试将视口设置得足够大，以便不再需要滚动cy.viewport(1500,1500)。