cy.get() method unnecessarily scrolling elements/window

[Sporradik]

Current behaviour:

I am noticing Cypress seems to scroll an element/window while using the get() method.

After immediately preceding click everything looks normal.

get() scrolls the html element even though + icon is visible.

Actual click() does not cause scroll.

The next get() causes the widget frame element to scroll even though target is visible.

Again, type() does not scroll

The next get() scrolls the widget frame again.

Subsequent calls to get() don't cause unusual scrolling when the element is on the same Y axis. (please pardon the different image, taken on a different run)

Again get() causes the widget frame to scroll even though the target button is visible.

This behaviour doesn't seem to influence the tests on a functional level; the tests pass or fail as expected and elements are clickable or not clickable as expected. It seems to be a visual thing only, but it is awkward and provides confusing feedback while you are writing or running the tests.

Desired behavior:

Unscrollable elements/window should not be scrolled in order to get elements that are already visible.

Steps to reproduce:

Unfortunately I cannot offer a reproducible code snippet at this time. I am happy to provide more info if needed.

Versions

Cypress package: Version: 3.1.0
Cypress binary: Version: 3.1.0
MacOS High Sierra: Version 10.13.6
Chrome: Version 68.0.3440.106 (Official Build) (64-bit)

[jennifer-shehane]

I can definitely understand the confusion - as it has been difficult to find the best place to document this behavior.

During snapshot (where you are hovering/clicking on the command after it has run), Cypress automatically scrolls the element into view just so that you can see it and work with it in your debugger tools more easily. However, this is not the actual behavior of what happened while the test was running (also why your tests are not being affected on a functional level).

If you want to see the actual scrolling behavior in action, we recommend using .pause() to walk through each command or watching the video of the test run.

[Sporradik]

@jennifer-shehane thank you for taking the time to respond to my issue.

I tried both the .pause() method and I recorded a video with cypress run. Both returned the exact same behaviour as my initial test run. Additionally, while watching the tests run live, the behaviour I described is consistent. I think that what you just described makes sense: when viewing the snapshots, the target will be scrolled into view even if this didn't happen in the test. However, this doesn't seem the be the issue I am currently reporting.

My apologies if I am mistaken; I can't fathom how what I am experiencing would be desired behaviour.

Video screenshot exhibiting html element being scrolled.

Video screenshot exhibiting widget frame being scrolled.

Paused test exhibiting html element being scrolled. (note in this picture, the countdown widget is displaying correctly)

Paused test exhibiting widget being scrolled unnecessarily out of view.

Paused test exhibiting widget being further scrolled unnecessarily.

[jennifer-shehane]

Ok, yes, what you are seeing is scrolling behavior during the action commands (.click(), .type(), .select()) not the .get().

This is how actions are currently implemented (see scrolling behavior when interacting with elements). Although - it has been expressed that some users do what to disable to automatically scrolling specifically as outlined here: #871

You should be able to pass {force: true} to some of these actions to disable all of the checks, including scrolling - if you want to try that out.

[Sporradik]

@jennifer-shehane Ah okay Thank you. I had run into this before and {force: true} did work for me previously.

I thought it was something I had ruled out for this issue (I tried it before submitting this), but I must have missed something, because I just added {force: true} to every action and it is working as expected now. My apologies.

I think it was confusing because in the snapshots, it appears as though the scroll is explicitly occurring during the get() call and not the action, but you're right, if I remove the action completely or add {force: true} then the scrolling stops.

I would highly support #871 as I am seriously abusing {force: true} to get tests to display properly.

Again, thank you for your time! I'm loving Cypress and excited for you guys to launch!

[gnapse]

I found this issue after experiencing a very similar behavior. I've got a button that's perfectly in view, but when the test tries to click it, it first scrolls it out of view and then complains that is not possible to interact with it.

It scrolls it out of view because apparently cypress scrolls the button to the top of the view port, but in that area we have a fixed top bar, and the button and everything else below that top bar scrolls underneath it. So cypress effectively puts the button behind this top bar, and then tries to click it, when the button was visible in the first place.

So I too foresee abusing { force: true } in the near future. And I too vote for #871.

[felipenmoura]

I'm facing the very same situation here, as described by @gnapse !
I have a signup form that appears when a button is clicked, but it is visually above it.

Here, some samples:

1. this is the screen, then we will click the "e-mail" option:
   When I get that button and click on it, it scrolls the login inputs out of view (behind a header bar)
   

2. The form replaces the previous buttons, but is "untypeable" because the e-mail input is out of view :(

Could we just have an option to turn off this behavior? I mean, it is not possible to click in an element that is out of view, then why scrolling it to the top of the viewport, if we already know it IS THERE, visible.

[jennifer-shehane]

@felipenmoura Please see this issue #871

[jennifer-shehane]

In Cypress 6.1.0, there’s a new scrollBehavior configuration option that controls the viewport position when an element is scrolled prior to action commands. Possible values are 'top', 'bottom', 'center', 'nearest', and false, with 'top' being the default. scrollBehavior: false disables scrolling altogether. scrollBehavior can be specified in global configuration, test configuration or individual action commands via options.

If you're experiencing a bug similar to this in Cypress, please open a new issue with a fully reproducible example that we can run. There may be a specific edge case with the issue that we need more detail to fix.