Enable users to change the scrolling strategy

[brian-mann]

Users have expressed a desire to modify how Cypress internally scrolls elements.

Related to:

• Scrolling element in the viewport when clicking on step in reporter is too agressive #682
• Scrolling parent containers in snapshots does not always reflect actual command behavior. #483
• Cypress scrolls elements beyond what they're capable of #706
• define default offset for scrollIntoView #3623
• Scrolling strategy make element cannot click #2302
  Currently we pin elements to the topmost coordinate after scrolling.

Users should be able to change this strategy to be one of:

• top
• bottom
• middle (don't scroll if already within screen)
• disable (turn off all automatic scrolling)

future

- [ ] By default, scroll element into center

[dentuzhik]

Just expressing another usecase where disabling scrolling would be useful.

I am currently writing tests for mobile viewport, which in real life is never supposed to be able to scroll itself, and because of how cypress scrolls elements into view a lot of the times they end up being hidden and are not asserted correctly by .should('be.visible').

On the other hand some other elements which are normally positioned offscreen for animations become visible, and are also incorrectly asserted using visibility checks.

[kapalkat]

I think my problem touches the same area:
#2418

[jennifer-shehane]

This issue is still in the 'proposal' stage, some initial proof of concept work as well as background architecture work has been done, but the issue itself has no work done on it as of today, we do not have an estimate on when this will be delivered.

[diggabyte]

@jennifer-shehane wondering what it will take to move this out of proposal?

The web is built on scrolling viewports. Yet cypress resets scroll position every time you .get() an element, which is hugely problematic for testing any element interaction that might exist below the fold or within a scrolling container.

Using force: true defeats the purpose of all the built in checks that make cypress so great!
This should be a top priority for the team to address.

[JohnMCrooks]

I'd like to also throw in my support for this fix. I'm seeing the unwanted scroll occur on the get(), and I'm sure it's the get because I removed anything else after it in the test case. Our analytics verify that the view is being cut off by the fixed nav-bar as we see in the test runner. The workaround doesn't seem to be working for us either on 4.0.2.

[bakjos]

@JohnMCrooks Today I have made a new test using the 4.4.1 version and the workaround is working well for me

[drewbrend]

I had an issue with the workaround @bakjos posted in a specific scenario, though it worked with the majority of cases. When an element was not virtualized but was slightly off screen - it would get into an infinite loop, scrolling would trigger the scrolled event, which would run that workaround, which would scroll, triggering the workaround, and on and on. Then because react-virtualized sets pointer-events to none for 150ms after scrolling the element would never become clickable, so .click() would time out. I could work around this with click({force: true}) but hate using that because it opens you up to other problems. I made a slight tweak so it will only scroll an element once and now I don't have to use force. Hopefully this helps someone else.

let $lastEl: JQuery<HTMLElement>;
let hasScrolled = false;

Cypress.on('scrolled', ($el) => {
  if ($el.is($lastEl)) {
    if (hasScrolled) {
      return;
    }

    hasScrolled = true;
  } else {
    $lastEl = $el;
    hasScrolled = false;
  }

  $el.get(0).scrollIntoView({
    block: 'center',
    inline: 'center',
  });
});

[jennifer-shehane]

Sorry, no updates here. We are prioritizing other work over this at the moment.

[jennifer-shehane]

I did review the comments here and am finding a lot of people saying they need to control the scroll behavior because they have to pass force: true to a click or similar action because their element is not being regarded as visible - due to how we scroll.

We're only aware of a couple of issues where this happens in the current 4.12.1 version now - many of these issues have been resolved since this was opened.

Scrolling causes visibility error

• Sticky elements within a fixed container are not properly taken into account when scrolling to an element
  Sticky elements within a fixed container are not properly taken into account when scrolling to an element #4233
• Cypress incorrectly scrolls element under other element - making it fail visibility check to click Cypress incorrectly scrolls element under other element - making it fail visibility check to click #8292

---

Please open an issue

If you're having a situation where Cypress is incorrectly determining the visibility of an element because of scrolling, and it doesn't fall under the issues above, then we are not aware of it.

We suggest opening a new issue with a fully reproducible example so that we can fix the core visibility algorithm and you won't need the scrolling workaround in the first place. This will likely get your issue fixed quicker than waiting for this scrolling strategy feature.

[Sakshi3110]

Hey @jennifer-shehane ,

I am also facing issues with ScrollTo and ScrollIntoView methods. I wanted to scroll down the Application Under test window while running tests,to test lazy loaded ads. Scroll works fine when I am viewing the tests. But once I Minimize the test window, scroll do not work, also I do not get any kind of error.

cy.scrollTo('bottom')`
cy.window.scrollTo('bottom')`
cy.get('.container-main > .header > .title').scrollIntoView({force:true}).should('be.visible')

Try this code :

it('Scrolling',function() {
  cy.visit("https://css-tricks.com/snippets/javascript/lazy-loading-images/")
  cy.scrollTo('0%','25%')
  cy.wait(5000)
  cy.get('.fem-learning-partner').should('be.visible').and('contain.text','Our Learning Partner')
})

All this works, when I just open Cypress test window and looking on behavior of my tests doing nothing else. :(

Why scrolling fails when I am not viewing/minimizing the cypress test window ?
No issues on headless chrome, but login fails due to cross domain redirection, so I have to check on chrome headed.

Is this an open issue with Cypress ? I am not able to complete many tests cases of my project due to this issue,my application is on vue-js. Can you please suggest something. It will be a big help.
Thanks !

[jennifer-shehane]

@Sakshi3110 There are some issues covering this here: #5023 But they may not all be caused by the same situation.

[Sakshi3110]

@jennifer-shehane Thanks! I checked #5023 , May be I also need something in my code, which keeps Test Runner/Application under test browser in ACTIVE mode. So, that focus remains active even after minimizing windows.

[mgladchenko]

How long do we wait for solution?

[mgladchenko]

Please provide workaround if you are not going to fix it.

[bahmutov]

Currently, this is just a proposal without any work planned in the nearest future.

[flucivja]

Any suggestion how to test components which close itself when page is scrolled? E.g. fluent-ui contextual menu components here https://developer.microsoft.com/en-us/fluentui#/controls/web/contextualmenu#IContextualMenuProps - try to click on button and then scroll the page ... I am working on Cypress tests where I am unable to click on menu item because once menu is opened and I try to click on menu item, page is scrolled, menu closes and Cypress fails because menu item element does not exists in the DOM.

Edit:
I found workaround for this by using jQuery to click which does not autoscroll:

cy.get('.menuitem').then(el => el.trigger('click'));

[cypress-bot]

The code for this is done in cypress-io/cypress#8837, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[cypress-bot]

Released in 6.1.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v6.1.0, please open a new issue.

[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.