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 none 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

Not all options are supported though.

Not implemented APIs (yet):

• userEvent.upload
• 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)