Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cypress scrollTo() & scrollIntoView() doesn't work properly #29921

Open
jan-surincik opened this issue Jul 25, 2024 · 2 comments
Open

Cypress scrollTo() & scrollIntoView() doesn't work properly #29921

jan-surincik opened this issue Jul 25, 2024 · 2 comments
Labels
stage: needs information Not enough info to reproduce the issue topic: scrolling ↕️

Comments

@jan-surincik
Copy link

jan-surincik commented Jul 25, 2024 •
edited by jennifer-shehane
Loading

Current behavior

I am trying to test the scroll lock service in our application, test scenario: The user opens the nav-bar, after that, the body is locked and the user is not able to scroll through the body

so this service adds style to the body overflow: hidden and height: 100vh, so the body is not scrollable after clicking on the nav item

Basic test:

 it('should test if the body is scrollable', () => {
      cy.get('body').scrollTo('bottom') // doesn't work element is not scrollable but it should work
}

I also tried invoking CSS to the body element to make sure the body is scrollable

 it('should test if body is scrollable', () => {
      cy.get('body').invoke('css', 'overflow', 'auto');
      cy.get('body').scrollTo('bottom'); // should be scrollable but cypress is not able to scroll
}

I have to note, that changing the viewport also doesn't help and also I tried to solve this with scrollToView(), but this method totally ignores overflow: 'hidden' or overflow: 'clip' and it always scrolls no matter if the body is locked. Our scroll-lock works correctly and it was manually tested.

Errors:

Timed out retrying after 4000ms: cy.scrollTo() failed because this element is not scrollable:
<body style="overflow: auto;">...</body>

If someone has some workaround to this I will be happy if you share it, hopefully, I described my problem understandably.

Desired behavior

If the element has overflow: 'auto' or is scrollable Cypress should be able to use scrollTo in this element.

example:
cy.get('body').scrollTo('bottom') - should work on the scrollable element

and if the element is not scrollable scrollIntoView() should fail the test

example:
cy.get('body').scrollIntoView({offset: {top: 500, left: 0}}); - should not work on non-scrollable element

Test code to reproduce

scrollTo():

 it('should test if the body is scrollable', () => {
      cy.get('body').scrollTo('bottom') // doesn't work element is not scrollable but it should work
}
 it('should test if body is scrollable', () => {
      cy.get('body').invoke('css', 'overflow', 'auto');
      cy.get('body').scrollTo('bottom'); // should be scrollable but cypress is not able to scroll
}

scrollIntoView()

// this test should fail
it('should test if body is not scrollable', () => {
      cy.get('body').invoke('css', 'overflow', 'clip');
      cy.get('body').scrollIntoView({offset: {top: 500, left: 0}}); 
}

Cypress Version

v12.17.4

Node version

v18.20.1

Operating System

macOs 14.5
@jan-surincik jan-surincik changed the title Cypress scrollTo() doesn't work properly Cypress scrollTo() & scrollIntoView() doesn't work properly Jul 25, 2024
@jennifer-shehane
Copy link
Member

@jan-surincik It would be helpful if you could provide an example HTML file that shows the styles / elements being used to demonstrate the problem.

Usually when I run into this problem its because I'm trying to scroll the wrong element. Like I think the body has the scroll, but it's really some inner element, but I couldn't tell if this is the case without an example.

@jennifer-shehane jennifer-shehane added stage: needs information Not enough info to reproduce the issue topic: scrolling ↕️ labels Jul 26, 2024
@Hellsfoul
Copy link

Not sure, if the problem is related to my problem. I also cannot make it work, but I assume, that these events are just not supported by scrollTo. Would be nice, if the documentation was more specific about that.
grafik

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
stage: needs information Not enough info to reproduce the issue topic: scrolling ↕️
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@jennifer-shehane @Hellsfoul @jan-surincik