Interactivity API for Browser Mode

[sheremet-va]

Clear and concise description of the problem

There are libraries that allow faking events in jsdom/happy-dom environments (e.g., @testing-library/user-event). They are required in Node.js runtime because there is no actual browser, only Web-compatible globals. In Browser Mode, we have access to an actual browser and providers have access to DevTools and Webdriver protocols that could be used to trigger actual events.

Suggested solution

The userEvent API is very well designed and works great with other @testing-library packages. Since we already decided to recommend testing-library in browser mode, I think we should provide our own userEvent implementation that uses DevTools or Webdriver protocol depending on the provider.

Alternative

No response

Additional context

For the preview provider, we can use the userEvent library directly.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[charlieforward9]

If I am understanding this correctly, till this vitest/browser userEvent API is finished we cannot interact with our components in browser mode similar to how we do using the testing-library userEvent API??

Instead we would have to interact with components directly with the DOM API's?

[sheremet-va]

In the latest beta only the click is implemented. There will be a few more APIs from user event before the Vitest 2, but not all of them.

How you implement interaction in the meantime is up to you. You can still use Commands API to communicate with playwright/webdriverio, for example. Or you can use userEvent library directly relying on fake events for now.

[sheremet-va]

v2.0.0-beta.11 should have these API implemented (#5882):

• userEvent.click
• userEvent.dblClick
• userEvent.tripleClick
• userEvent.type (supports user-event syntax like {selectall})
• userEvent.clear
• userEvent.tab
• userEvent.keyboard
• userEvent.hover
• userEvent.unhover
• userEvent.selectOptions
• userEvent.upload

Not all options are supported though.

Not implemented APIs (yet):

• userEvent.pointer
• userEvent.copy
• userEvent.cut
• userEvent.paste

Also it has some non-userEvent APIs:

• userEvent.fill to clear the input and type the value
• userEvent.dragAndDrop for universal support for drag and drop (not supported in preview)

[luc122c]

I wasn't sure if it was worth opening a new issue or adding to this one so apologies if this is in the wrong place. V9 of Webdriver IO seems to break some of these API's.

[sheremet-va]

userEvent.upload is implemented in #6442 and will be available in Vitest 2.1-beta.7

[feryardiant]

Hi, I'm having hard time figuring out the way how userEvent.keyboard works on arrow keys. As per documentation state that I can use user-event keyboard syntax but apparently it's not working when I try something like these

userEvent.keyboard('{ArrowRight}') // OR
userEvent.keyboard('{ArrowLeft}')

To mimic the arrow left and right on the keyboard. If I understanding correctly that {...} is for keydown and {/...} is for keyup. Or if I want to use KeyboardEvent.code I could use [...] like this

userEvent.keyboard('[ArrowRight]') // OR
userEvent.keyboard('[ArrowLeft]')

but still no luck, instead I had to use :

document.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowRight' })) // OR
document.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowLeft' }))

to make it work. Is that expected behaviour or am I doing it wrong?

for context I'm using webdriverio provider.