vitest icon indicating copy to clipboard operation
vitest copied to clipboard

feat(browser): add `userEvent.wheel` API

Open macarie opened this issue 4 months ago • 3 comments

Description

Resolves #6936

A couple of notes regarding the API design decision.

Playwright and WebDriverIO both use something like await mouse.wheel(deltaX, deltaY). Their approach isn't tied to any element. Playwright recommends hovering over an element first, then calling this method to trigger a scroll event on it → initial attempt was following that approach with the addition of automatic hover, but this feels very low level.

Another thing worth considering is that one call equals to one event. Usually, testing these interactions require more than that and waiting for a full client-server-client loop, depending on the environment, might be slow.

Landed on something that should provide enough flexibility while keeping a high-level API:

type ScrollOptions = (
  | { direction: 'up' | 'down' | 'left' | 'right' }
  | { delta: { x?: number, y?: number } }
) & { times?: number }

wheel(element: Element, options: ScrollOptions): Promise<void>
wheel(options: ScrollOptions): Promise<void>

[!NOTE] The initially planned element-less version (wheel(options)) was not implemented due to behavior differences between WebDriverIO and Playwright. I'll open a feature request issue to gauge community interest for this addition.

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

  • [ ] It's really useful if your PR references an issue where it is discussed ahead of time. If the feature is substantial or introduces breaking changes without a discussion, PR might be closed.
  • [ ] Ideally, include a test that fails without this PR but passes with it.
  • [ ] Please, don't make changes to pnpm-lock.yaml unless you introduce a new test example.
  • [ ] Please check Allow edits by maintainers to make review process faster. Note that this option is not available for repositories that are owned by Github organizations.

Tests

  • [ ] Run the tests with pnpm test:ci.

Documentation

  • [ ] If you introduce new functionality, document it. You can run documentation with pnpm run docs command.

Changesets

  • [ ] Changes in changelog are generated from PR name. Please, make sure that it explains your changes in an understandable manner. Please, prefix changeset messages with feat:, fix:, perf:, docs:, or chore:.

macarie avatar Dec 05 '25 22:12 macarie

Looks like there's a huge difference in running times between Firefox and Chrome in WebdriverIO:

 ✓  chrome  wheel.test.ts (9 tests) 11175ms
   ✓ fires wheel event multiple times when `times` option is set  10266ms (repeat x50)
 ✓  firefox  wheel.test.ts (9 tests) 1049ms
   ✓ fires wheel event multiple times when `times` option is set  966ms (repeat x50)

In Playwright all timings are roughly aligned, but all are ~4x slower than Firefox in WebdriverIO:

 ✓  webkit  wheel.test.ts (9 tests) 4422ms
   ✓ fires wheel event multiple times when `times` option is set  4080ms (repeat x50)
 ✓  firefox  wheel.test.ts (9 tests) 4460ms
   ✓ fires wheel event multiple times when `times` option is set  4101ms (repeat x50)
 ✓  chromium  wheel.test.ts (9 tests) 4992ms
   ✓ fires wheel event multiple times when `times` option is set  4591ms (repeat x50)

macarie avatar Dec 07 '25 18:12 macarie

Deploy Preview for vitest-dev ready!

Built without sensitive environment variables

Name Link
Latest commit 6fa3a2645b510b2a6c74625b5fed7855836b64eb
Latest deploy log https://app.netlify.com/projects/vitest-dev/deploys/6938a7943433cc0008fec723
Deploy Preview https://deploy-preview-9188--vitest-dev.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify[bot] avatar Dec 08 '25 16:12 netlify[bot]

Applied the suggestions and split the type (used different interfaces as I was extracting a subtype anyway for the server function)

macarie avatar Dec 09 '25 23:12 macarie