Mouse & Keyboard Interactions
Practice complex interactions like double click, right click, drag-and-drop, and key presses.
1. Mouse Actions
Challenge Tasks (4)
Tick a task when your script passes it. Tasks with a pass/fail box tick themselves.
Double Click
Right Click (Context Menu)
Hover
Drag & Drop (Simple)
2. Keyboard Actions
Key Event Logger
Focus the input below and press any key to see the event captured.
About this Mouse & Keyboard page
Mouse and keyboard interaction testing means driving drag, hover, context-click and key-press events from a script instead of a person. In Selenium 4 you use the Actions class, for example dragAndDrop, moveToElement and contextClick. In Playwright you call dragTo, hover, click with button right, and keyboard.press. This page gives you each interaction as a task with a result box.
Frequently asked questions
How do you do drag and drop in Selenium 4?
Create an Actions object and call dragAndDrop(source, target).perform(), or chain clickAndHold, moveToElement and release for finer control. If the page uses HTML5 native drag events, the simple call can fail, and you may need clickAndHold with small moves or a JavaScript fallback.
How do you hover over an element in Playwright?
Call await page.locator('selector').hover(). Playwright waits for the element to be visible and stable, scrolls it into view, then moves the mouse over it. Assert on the revealed menu or tooltip with expect(locator).toBeVisible() afterwards.
How do you right-click in Selenium and Playwright?
In Selenium use new Actions(driver).contextClick(element).perform(). In Playwright use locator.click({ button: 'right' }). Both open the page's custom context menu, which you then locate in the DOM like any other element. Native browser menus cannot be automated.
How do you press keyboard shortcuts in automated tests?
In Playwright use page.keyboard.press('Control+S'). In Selenium use Actions.keyDown(Keys.CONTROL).sendKeys('s').keyUp(Keys.CONTROL). In Cypress use cy.get('body').type('{ctrl}s'). Focus the right element first or the page may ignore the keys.
Why does my drag and drop test pass but nothing moves?
The page probably listens for different events than the ones your tool fires. HTML5 drag uses dragstart and drop, while many widgets use mouse or pointer events. Check which one the page uses, then pick dragTo, manual mouse moves, or dispatched DragEvents to match.
Free developer tools on Randomly.online
QA Playground is part of Randomly.online. These tools help while you write and debug tests: