Cypress and Material UI scroll behavior issue

Material UI components often render nested scroll containers. That is great for UX, but Cypress defaults can target the wrong element when you call scrollIntoView, leading to flaky tests. Here is a short playbook to make those tests deterministic.

Why the scroll target is wrong

MUI components like Dialog, Popover, and Autocomplete can create internal wrappers with overflow: auto. Cypress will try to scroll the window when it should scroll the inner element, so the item is still not visible.

Pin the real scrollable element

Find the element with overflow and explicitly scroll it instead of the window.

cy.get("[data-testid=results-list]")
  .scrollTo("bottom")
  .find("[data-testid=result-row]")
  .contains("Quarterly report")
  .click();

Disable smooth scrolling in tests

Smooth scrolling can be async and time-based. For testing, set the container to instant scrolling:

* {
  scroll-behavior: auto;
}

You can set this in your Cypress support file or inject it using cy.document().

Prefer role-based queries

Many MUI elements map to accessible roles. Use findByRole with @testing-library/cypress so Cypress can retry until the right node exists.

Checklist

• Scroll the actual container, not the window.
• Disable smooth scrolling while tests run.
• Avoid chaining scrollIntoView after complex within blocks.
• Add deterministic data attributes on rows or list items.

Once you apply these, the scroll behavior becomes stable and the tests read like your intent.