New option: autoFocusDocumentBeforeTyping to reduce real browser testing flakiness

[KevinBon]

What:

Adding a new optional option, autoFocusDocumentBeforeTyping, to fix tests running against a real browser (e.g: jasmine-browser-runner) that may be interfered with a real user interacting with their system.

Why:

My company's front-end integration tests can be run against a headless or a real browser context.

We noticed that during a real browser test, users can interfere negatively with the test result, simply by focusing the Chrome dev tools or on another software while and before the test is running. When the .keyboard interaction is being called, the element won't receive the key events.

How:
Send an event to refocus the currently active element or config.document before sending keyboard events.

Checklist:

• Documentation
• Tests: I didn't find a testing strategy that could replicate the issue
• Ready to be merged
  

** Additional comments **

A similar issue was experienced by #553, but I couldn't replicate locally the issue against .focus()

Example

The test is using .type against an input.

1. Run with the page being focused
2. Click on the Chrome Devtools
3. F5, to re-run the test, the test is now failing

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 7b91c2f:

Sandbox	Source
userEvent-dom	Configuration
userEvent-react	Configuration