feat(browser): add `userEvent.wheel` API
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.yamlunless 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 docscommand.
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:, orchore:.
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)
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...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify project configuration.
Applied the suggestions and split the type (used different interfaces as I was extracting a subtype anyway for the server function)