'Disable Cypress from automatic scrolling

I am testing my application where I have very long side menu and I have a code like that:

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

The automatic scroll happens between get and click and then selected tab is not visible since the top menu has possition fixed. I found many solutions but none of them worked. So far I tried .click({force: true}) and .click(scrollBehaviour: false}) also .scrollIntoView() between get and click. Is there any other way to solve this issue?



Solution 1:[1]

You can set the scrollBehavior globally or per test(-suite).

I'm disabling it on a per tests basis like so:

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

Docs: https://docs.cypress.io/guides/references/configuration#Actionability

Solution 2:[2]

Did you try using scrollBehaviour: 'top' ?

You can find more details regarding the ScrollBehaviour here:

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

Solution 3:[3]

Did you try to type "scrollBehavior": false in cypress.json file? Because it worked for me.

Solution 4:[4]

Depends on how the auto-scroll is implemented, you can try adding this at the top of the test

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

which attempts to stub out the native scrollTo function. I haven't tried it, it may fail if win.scrollTo is read-only.

Here's the reference page Window.scrollTo(), to can see in the notes some other variations to try if the app is using those instead.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Philipp Kyeck
Solution 2 DieGraueEminenz
Solution 3 ertgrull
Solution 4