TESTHEON Practice Lab

Component Lab E · Pointer and keyboard

Interaction Lab

Automate pointer gestures, scrolling, focus order, global shortcuts, menus, listboxes, and autocomplete with one assertion-friendly event log.

Start the fixtureRead the E2E guide

PRACTICE FIXTURE — intentionally built for automation practice

Hover menu

Hover or focus opens the menu; leaving the region closes it.

Accessible tooltip

Pointer hover and keyboard focus reveal the same described tooltip.

Double-click and right-click

Each gesture has a separate target and visible log outcome.

Scroll into view

A distant target reports its intersection and click outcome.

Top of bounded scroll region.

Enter, Tab order, and Escape

Native focus order and keyboard events remain observable in the shared log.

Ctrl/Cmd+K command palette

The platform-neutral shortcut opens a focused dialog and Escape closes it.

Press Ctrl/Cmd + K anywhere on this page.

Command palette

Arrow navigation in a listbox

ArrowDown and ArrowUp move the active option; Enter selects it.

Autocomplete keyboard selection

Filtered suggestions expose active-descendant state and Enter commits the active choice.

    Passing examples

    Start with observable behavior

    These snippets match executable tests stored inexamples/playwright-ts/.

    Keyboard shortcut and Escape
    await page.keyboard.press('ControlOrMeta+K');
await expect(page.getByRole('dialog', { name: 'Command palette' })).toBeVisible();
await page.keyboard.press('Escape');
await expect(page.getByRole('dialog', { name: 'Command palette' })).not.toBeVisible();