'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 |