How does vitest browser mode scroll the browser page when searching for a matching element?

[tommilimmot]

Can vitest browser scroll an element into view if it's within a fixed height column container with overflow:scroll or does it attempt to scroll the whole page down?

I have an issue selecting a combobox option that is likely below fold. I can see from the test print out that vitest is trying to scroll the option element into view before clicking it. I know that vitest browser will try to scroll the whole page down to be able to interact with the matching element, but in this case it still fails. The only thing I can come up with could be that because the combobox and option are in a column container that has a max-height and overflow:scroll, vitest fails to scroll the option element visible to be able to interact with it. How does the autoscroll feature actually work?

The failing test code is

...
await screen.getByRole('combobox', { name: 'something' }).fill('fra')
await screen.getByRole('option', { name: 'frank' }).click()
...

The printout is

• waiting for locator('[data-vitest="true"]').contentFrame().locator('body').getByRole('option', { name: 'frank' })
  • locator resolved to <div role="option" ...
• attempting click action
  • waiting for element to be visible, enabled and stable
  • element is visible, enabled and stable
  • scrolling into view if needed
  • done scrolling
  • performing click action

Failing in
await screen.getByRole('option', { name: 'frank' }).click…

Edit: packages currently in use...

• "@vitest/browser": "3.2.4"
• "playwright": "1.51.1"
• "vitest": "3.2.4"
• "vitest-browser-react": "1.0.1"

[Icaro0310]

Vitest calls element.scrollIntoView() on the target before dispatching the click, and that scrolls every scrollable ancestor, not just the page. So an overflow:scroll column should be handled.

When this fails with comboboxes it's usually one of two things: the option is rendered in a portal that isn't a scrollable ancestor of the trigger, or the listbox is virtualized so the node doesn't exist in the DOM until you scroll. Check if the option is actually mounted before the click.

If it's virtualized, keyboard navigation is the easiest workaround since most combobox libs scroll the active option into view themselves:

await userEvent.keyboard('{ArrowDown}{Enter}')

Or grab the listbox element and set scrollTop manually, then click the option.

—
Check out my Repositories: github.com/Icaro0310 · Website: icaro0310.github.io