cypress: CSS `scroll-behavior: smooth;` on the `html` el breaks actionability

@jennifer-shehane this issue can’t be fixed by simply passing options into scrollIntoView, it seems the css property will force all calls to scrollIntoView to be smooth.

The solution is to mutate the styles of the element with scroll-behavior:smooth just before the call to scrollIntoView, and then change it back right after.

I’m not sure why this would be a priority and need to go in the next patch, currently you can just work around this bug by removing that style

Same bug here, ended up disabling the style with the following snippet:

/**
 * Disable css smooth scroll, that doesn't plays nice with cypress.
 * See https://github.com/cypress-io/cypress/issues/3200
 */
const disableSmoothScroll = () => {
  cy.document().then(document => {
    const node = document.createElement('style');
    node.innerHTML = 'html { scroll-behavior: inherit !important; }';
    document.body.appendChild(node);
  });
};

describe('test', () => {
  it('does stuff', () => {
    cy.visit(...);
    disableSmoothScroll();
    cy.get(...).scrollIntoView();
  })
})

Thanks everyone for providing workarounds; they do seem to work.

That said, I do really wish that the original issue were to be resolved. Having to factor this workaround into tests is quite arduous. Yes, you can write your own custom command to use the workaround after a cy.visit, but this doesn’t account for uses of cy.reload or cy.go for which you also need to write custom commands. Furthermore, if your application sends you to a new page during a test (as a result of clicking a button or some other user interaction) you also have to deliberately apply the workaround in those instances since the scroll behaviour will have been reset to smooth.

It is not impossible to deal with, but it is much more work than I would expect to have to do in order to be able to write basic tests out of the box on a page that uses smooth scrolling.

Just my two cents.

thanks for the workarounds shared here - I went with something similar that seems to be working regardless of .visit() or .reload() calls:

html:not(.cypress-tests) {
  scroll-behaviour: smooth;
}

// cypress/support/index.js

Cypress.on('window:before:load', win => {
  const htmlNode = win.document.querySelector('html')
  htmlNode.classList.add('cypress-tests')
})

If you’re using this workaround - you would have to call disableSmoothScroll after the cy.visit() https://github.com/cypress-io/cypress/issues/3200#issuecomment-505965470, so yes you would need to call this after every cy.visit().

You could also write a custom command so this is always called after your visit. https://on.cypress.io/custom-commands#Overwrite-Existing-Commands

Cypress.Commands.add('visitApp', (url) => {
  cy.visit(url)
  cy.document().then(document => {
    const node = document.createElement('style');
    node.innerHTML = 'html { scroll-behavior: inherit !important; }';
    document.body.appendChild(node);
  });
})

it('test', () => {
  cy.visitApp('https://...')
})

@jennifer-shehane Can I suggest we at least give out a warning when scroll-behaviour: smooth is in use and scrolling happens? I spent an hour trying to figure out why a simple test case didn’t work, we can help a lot of people save time. I am willing to issue a PR with a little guidance regarding the appropriate place in the codebase to throw such a warning.

@paulyoung5 love your workaround, seems to be the least hassle and headache.

Is there a chance this issue can be caused by something else? I’m having the exact same issue but I’m not using scroll-behavior: smooth; anywhere. I’ve tried the workarounds as well just in case to no avail.

Using .click works on Firefox but not on Chromiun because of the scrolling issue. I tried forcing it with .click({force: true}), or scrolling it manually, nothing has worked.

My element is inside an Iframe, so I thought that may be the issue, but I created a simple app to test and scrolling on click works as it should even when you’re targetting an element inside an iframe (and it even scrolls both the main page and the iframe if it needs to).

I’m at a loss as to what could be causing this exact same issue that is not scroll-behavior: smooth;

I’ve solved this by adding class e2e to the html element when running in test mode, and setting

html:not(.e2e) {
  scroll-behavior: smooth;
}

@Bkucera Brian was hoping you could pick this issue up as well as part of 3.1.6. 🙏 Thank you!

Hey @nicklemmon, I’ve opened a PR for this - writing a failing test for this behavior here: https://github.com/cypress-io/cypress/pull/3213

Now someone will need to look into why this failure occurs and fix Cypress calculations. Just from watching the test run, it looks as if the scroll is happening after the .click command has errored.

The error is being thrown at this line of code: https://github.com/cypress-io/cypress/blob/issue-3200-scroll-behavior-smooth/packages/driver/src/cy/ensures.coffee#L224