UI Events Testing Tools

A collection of tools for viewing and testing various UI Events.

To report a bug or a submit feature request for any of these tools, file an issue on Github.

Event Viewers

• Key Event Viewer View KeyboardEvents on a <input type="text"> element. Select which events and attributes to show and control event propagation. keydown, keypress, keyup, textinput, beforeinput, input, compositionstart, compositionupdate, compositionend
• Key Event Viewer (for contenteditable) Same as the standard Key Event Viewer except targetting a <div contenteditable="true"> element.
• Mouse Event Viewer View MouseEvents on a set of overlapping <div>s. mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup
• Mouse Event Viewer (with shadow DOM) Same as the standard Mouse Event Viewer except with additional shadow DOM elements.
• Focus Event Viewer View FocusEvents between two edit fields. blur, focusin, focusout, DOMFocusIn, DOMFocusOut

Manual Keyboard Layout Tests

These manual tests show a keyboard and require that you manually press the indicated keys. The key and code attributes of the KeyboardEvent will be checked against the known correct result for the layout.

Note: Before running these tests, you must manually set your keyboard layout to match the layout being tested.

• English US 101-key layout
• French FR 102-key layout

Other Event Testing Tools

Additional tools for testing events.

• eventTest.html (rbyers) Mouse, Touch, Scroll, Keyboard, Gesture, Drag, Pointer events.
• Event timing test (jakearchibald)