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

Scrolling strategy make element cannot click #2302

Closed
Yuyz0112 opened this issue Aug 8, 2018 · 13 comments
Closed

Scrolling strategy make element cannot click #2302

Yuyz0112 opened this issue Aug 8, 2018 · 13 comments
Labels
topic: scrolling ↕️ type: bug type: duplicate This issue or pull request already exists

Comments

@Yuyz0112
Copy link

Yuyz0112 commented Aug 8, 2018

Current behavior:

As the guide documented:

The scrolling algorithm works by scrolling the top, leftmost point of the element we issued the command on to the top, leftmost scrollable point of its scrollable container.

This cause some element cannot be clicked and the "nudge" seems not working.
I've produced a smallest example for the bug on codepen:
https://codepen.io/yuyz0112/pen/jpeZvZ

Cypress code:
cy.contains('3').click();

After execute click command, the item contains '3' scrolled to the top and was covered by the mask element.

image

Desired behavior:

I'm not sure whether this situation should be covered by the scrolling strategy, but I still expect a method to test this without change my code.

Steps to reproduce:

Versions

v3.0.3
@Yuyz0112
Copy link
Author

Yuyz0112 commented Aug 8, 2018

I think this is related to #871 , is there any updates on that issue?

@Yuyz0112
Copy link
Author

Yuyz0112 commented Aug 8, 2018

https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/cy/actionability.coffee#L230
Looks like I can disable the verify process by adding { force: true }?
If I'm right I can close this issue.

@jennifer-shehane
Copy link
Member

Yes, you can disable our checks on whether the element is 'clickable' by just passing { force: true}, but ideally the click here should work without you having to do that.

@jennifer-shehane jennifer-shehane added the stage: needs investigating Someone from Cypress needs to look at this label Aug 8, 2018
@Yuyz0112
Copy link
Author

Yuyz0112 commented Aug 9, 2018

@jennifer-shehane
Ok, so I'm going to keep this issue open.
But what you mean is that Cypress will not scroll automatically since the target element will be covered by another(The mask element is not the ancestor of target element), or Cypress will scroll but can still click when target element was covered?

@brian-mann
Copy link
Member

Cypress is supposed to automatically scroll the element into view - but due to Element#scrollIntoView it is technically possible the browser scrolls the element in a way that is impossible for the user to have done, and it can create situations in which the DOM is completely locked and it is incapable of "scrolling" to get it into view.

This looks like one of these situations. We've internally decided that our algorithms should always scroll (to be deterministic) but we've been reconsidering this since scrolling is a mutation and there have been side effects that cause problems like these.

And/or in addition to, we've been considering just allowing you to pass a { scroll: false } or even change the scrolling strategy to be that of "if-necessary", "middle", "bottom", etc.

@Yuyz0112
Copy link
Author

Yuyz0112 commented Aug 9, 2018

@brian-mann
Yeah, I think cover all the case of scroll into view is really hard, an configurable scrolling strategy may solve most of the problems.
But now { force: true } already help me in this situation, so maybe we can close this issue and keep tracking the configurable strategy implementation in #871?

@szabolcsmaj
Copy link

I'm having the same issue. The problem is that the "changeable scrolling strategy" feature (#871) was discussed about a year ago and nothing has happened so far.

Please don't close this.

@brian-mann brian-mann mentioned this issue Dec 18, 2018
Closed
@kuceb kuceb self-assigned this Dec 18, 2018
@kuceb kuceb added topic: scrolling ↕️ and removed stage: needs investigating Someone from Cypress needs to look at this labels Dec 18, 2018
@kuceb
Copy link
Contributor

kuceb commented Dec 18, 2018 •
edited by jennifer-shehane
Loading

This should be fixed when we change our default scroll strategy to center the element in the viewport, part of 4.0 5.0

@cypress-bot cypress-bot bot added the stage: ready for work The issue is reproducible and in scope label Apr 23, 2019
@TheBestPessimist
Copy link

TheBestPessimist commented Aug 5, 2019 •
edited
Loading

Also having problems with overscrolling elements. Check the video please: #871 (comment)

@lukeapage lukeapage mentioned this issue Oct 14, 2020
Merged
6 tasks
@jennifer-shehane
Copy link
Member

Reproducible example:

spec.js

it('can click the 3 behind masked el', () => {
  cy.visit('index.html')
  cy.contains('3').click()
})

index.html

<html>
  <style>
    .item {
      padding: 15px;
      background: lightsteelblue;
    }
  </style>
  <body>
    <div class="container" style="width: 400px;">
      <div class="mask" style="padding: 15px; background: lightpink; z-index: 2; position: relative;">mask</div>
      <div class="long-list" style=" height: 300px; overflow: auto; margin-top: -48px;">
        <div class="item">placeholder</div>
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
      </div>
    </div>
  </body>
</html>

Screen Shot 2020-10-21 at 12 11 14 PM

@itayod
Copy link

itayod commented Nov 17, 2020

it seems like the problem is that cypress call "scrollIntoView" which hides the element when the element has a parent element with scroll.
if that's the case then:

element.scrollIntoView({block: "end"});

should fix that.

@kuceb
Copy link
Contributor

kuceb commented Nov 23, 2020

closing this as a duplicate of #871, which has an associated PR open

@kuceb kuceb closed this as completed Nov 23, 2020
@kuceb kuceb added the type: duplicate This issue or pull request already exists label Nov 23, 2020
@jennifer-shehane jennifer-shehane removed the stage: ready for work The issue is reproducible and in scope label Nov 24, 2020
@jennifer-shehane
Copy link
Member

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.

@cypress-io cypress-io locked as resolved and limited conversation to collaborators Dec 8, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
topic: scrolling ↕️ type: bug type: duplicate This issue or pull request already exists
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@brian-mann @jennifer-shehane @szabolcsmaj @TheBestPessimist @itayod @Yuyz0112 @kuceb