Cypress: scrollIntoView() not working as expected. Acts as if get() not returning element. Same code works with click()

[citypaul]

Current behavior:

scrollIntoView() not working. Produces the error: SyntaxError: Failed to execute 'querySelector' on 'Document': '0' is not a valid selector. despite the fact that the element in question is available to cypress.

If I swap out the scrollIntoView() method for click() instead, the test passes and you can see the page actually scrolls to the element.

Desired behavior:

Should scroll element into view, and the test should pass.

How to reproduce:

I've produced a repository that demonstrates the issue here:

https://github.com/citypaul/cypress-scrollintoview

Test code:

This test fails as if it cannot find the element in question:

const footballPage = 'http://www.test.bbc.co.uk/sport/beta/live/football/23031537';

describe('Get Involved', () => {
  it('Does not do much!', () => {
    cy.visit(footballPage);

    cy
      .get('#post_58d3a03ee4b0e1456fe22080')
      .scrollIntoView()
      .should('be.visible');
  });
});

However, this test, also looking for the same element, does pass. Just using click() instead of scrollIntoView():

const footballPage = 'http://www.test.bbc.co.uk/sport/beta/live/football/23031537';

describe('Get Involved', () => {
  it('Does not do much!', () => {
    cy.visit(footballPage);

    cy
      .get('#post_58d3a03ee4b0e1456fe22080')
      .click()
      .should('be.visible');
  });
});

Additional Info (images, stack traces, etc)

cypress_runner.js:136339 SyntaxError: Failed to execute 'querySelector' on 'Document': '0' is not a valid selector.
Error: Failed to execute 'querySelector' on 'Document': '0' is not a valid selector.
    at a.scrollTo (http://www.test.bbc.co.uk/sport/beta/live/football/23031537:310:1746)
From previous event:
    at runCommand (http://www.test.bbc.co.uk/__cypress/runner/cypress_runner.js:61508:14)
    at next (http://www.test.bbc.co.uk/__cypress/runner/cypress_runner.js:61590:14)
From previous event:
    at next (http://www.test.bbc.co.uk/__cypress/runner/cypress_runner.js:61590:34)
    at <anonymous>
From previous event:
    at http://www.test.bbc.co.uk/__cypress/runner/cypress_runner.js:61609:37
From previous event:
    at run (http://www.test.bbc.co.uk/__cypress/runner/cypress_runner.js:61607:15)
    at Object.cy.(anonymous function) [as visit] (http://www.test.bbc.co.uk/__cypress/runner/cypress_runner.js:61827:11)
    at Context.runnable.fn (http://www.test.bbc.co.uk/__cypress/runner/cypress_runner.js:61958:20)
    at callFn (http://www.test.bbc.co.uk/__cypress/runner/cypress_runner.js:31825:21)
    at Test.Runnable.run (http://www.test.bbc.co.uk/__cypress/runner/cypress_runner.js:31818:7)
    at http://www.test.bbc.co.uk/__cypress/runner/cypress_runner.js:64801:28
From previous event:
    at Object.onRunnableRun (http://www.test.bbc.co.uk/__cypress/runner/cypress_runner.js:64800:20)
    at $Cypress.action (http://www.test.bbc.co.uk/__cypress/runner/cypress_runner.js:60312:51)
    at Test.Runnable.run (http://www.test.bbc.co.uk/__cypress/runner/cypress_runner.js:63951:20)
    at Runner.runTest (http://www.test.bbc.co.uk/__cypress/runner/cypress_runner.js:32288:10)
    at http://www.test.bbc.co.uk/__cypress/runner/cypress_runner.js:32394:12
    at next (http://www.test.bbc.co.uk/__cypress/runner/cypress_runner.js:32208:14)
    at http://www.test.bbc.co.uk/__cypress/runner/cypress_runner.js:32218:7
    at next (http://www.test.bbc.co.uk/__cypress/runner/cypress_runner.js:32150:14)
    at http://www.test.bbc.co.uk/__cypress/runner/cypress_runner.js:32186:5
    at timeslice (http://www.test.bbc.co.uk/__cypress/runner/cypress_runner.js:27427:27)
logError @ cypress_runner.js:136339

• Operating System:
  Mac OSX (10.12.3 (16D32))
• Cypress Version:
  1.0.2
• Browser Version:
  Chrome 61

[citypaul]

The following does pass:

const footballPage = 'http://www.test.bbc.co.uk/sport/beta/live/football/23031537';

describe('Get Involved', () => {
  it('Does not do much!', () => {
    cy
      .visitAndPoll(footballPage)
      .get('article#post_58d3a03ee4b0e1456fe22080')
      .then(el => {
        el[0].scrollIntoView();
        return el;
      })
      .should('be.visible');
  });
});

However, I feel like the then() should not be necessary here. I understand the get returns a collection of elements, but even chaining with .last() or .eq(0) does not work.

[sam3k]

I was having, what seems to be the same or very similar issue, where neither Cypress' cy.get('.some-selector').scrollIntoView() nor JavaScript's cy.get('.some-selector').then(el => el[0].scrollIntoView()) worked. It all came down to me having the following CSS:

html { scroll-behavior: smooth; }

If I remove this, everything works. Hopefully this helps some folks.

[ivan-kleshnin]

Great finding @sam3k I can only imagine the time it took to figure out 😓
I confirm that html { scroll-behavior: smooth; } completely breaks scrollIntoView for Cypress.
Weird but true.

[jennifer-shehane]

@sam3k This is a documented issue here: https://github.com/cypress-io/cypress/issues/3200

I'm not able to recreate this behavior in Cypress 4.10.0 from the original issue. Closing as resolved.

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.