Search code examples
cypress

Cypress scrolling problem in overflow:auto

I am testing a web app which contains a div

<div style="overflow: auto; max-height: 429px;" …

which contains a large table. I see scrollbars around the table. Now I want Cypress to click on an element in the table. If the element is hidden somewhere down, that's fine. Cypress will automatically scroll there. But if the element is hidden somewhere on the right, Cypress won't scroll to the correct place but complains:

CypressError: Timed out retrying after 10050ms: cy.click() failed because the center of this element is hidden from view: `<input type="radio" …

Why is that? What can I do?

I am using the latest Cypress (13.6.2).

Edit: It turns out there were two different problems:

  1. for some elements, Cypress did scroll automatically, but not to the correct position.
  2. for very few elements, Cypress did not scroll automatically at all.

The first problem happened in wide tables inside "overflow: auto". The second problem happened without any overflow context after I switched the displayBehavior from the default "top" to "center".

Solution

  • At first it is important to understand, that normally Cypress automatically scrolls e. g. before a click(). The default scrollBehavior is "top".

    It turns out there were two different problems:

    1. for some elements, Cypress did scroll automatically, but not to the correct position.
    2. for very few elements, Cypress did not scroll automatically at all.

    These two problems need different solutions.

    1. Setting scrollBehavior to "center" in cypress.config.ts solved the first problem.
    2. For the very few elements, where no implicit scrolling happened at all, it indeed helped to do .scrollIntoView() e. g. cy.get("#foo).scrollIntoView().click() …