Scroll element into view when using .should('be.visible')

[suchipi]

If you have a scrollable list of items, and want to verify that one of the items is in the list, the following isn't sufficient in all cases because it doesn't cause Cypress to scroll the element into view:

cy.contains('Hi').should('be.visible');

However, you can work around this by triggering an event on the element, which activates the scroll algorithm documented here:

cy.contains('Hi').trigger('dummy-event').should('be.visible');

Would the Cypress team be interested in a PR making a change such that this scroll algorithm is called when .should is called with 'be.visible'?

Current behavior:

Automatic scrolling does not occur when using .should('be.visible').

Desired behavior:

Automatic scrolling occurs when using .should('be.visible').

Versions

Cypress 3.1.1, macOS 10.13.6, Chrome 70

[andezzat]

I've had this 'issue' when doing a set of asserts on multiple list/item els inside a parent container.
I had a workaround, which was to issue cy.scrollIntoView() every time...

Before interacting with an element, we will always scroll it into view (including any of its parent containers). Even if the element was visible without scrolling, we perform the scrolling algorithm in order to reproduce the same behavior every time the command is run.
Source: https://docs.cypress.io/guides/core-concepts/interacting-with-elements.html#Scrolling

The question then becomes, does a should assert count as an 'interaction'. If so, then it SHOULD scroll into view before asserting; otherwise, it's working as expected...

@jennifer-shehane Can you advise please?

[suchipi]

After thinking about this some more, I realized this could be undesirable in situations where you want to assert that the app itself scrolls the content into view.

I didn't know that there was a scrollIntoView command; with that in mind, I don't think we should change this.

[jennifer-shehane]

@andezzat The list of commands here are what we consider an 'interaction'.

@suchipi Yes, we did refactor our visibility assertions over a year ago to only take into account the current viewport, so that scrolling to the element is first required before Cypress determining it as visible.

[croraf]

I hope that a similar command can be introduced in Cypress api, like .should('be.scrollVisible') or .should('be.scrollable') or similar, which would assert that you can make the element visible after scrolling, and which would scroll to it if so. What do you think?