VocalHyre
Sign up

Playwright · Reliable end-to-end tests

How do you simulate keyboard and mouse input?

MediumkeyboardmouseinputUpdated Oct 2026
Quiz this track

Short answer

Prefer locator methods such as press, hover and dragTo. Use page.keyboard and page.mouse for low-level sequences that have no element-level equivalent.

Most interactions should target an element, because Playwright then performs actionability checks and focuses the right control. Low-level keyboard and mouse APIs are for shortcuts, canvas interaction and drag sequences that cannot be expressed with a locator.

ts
const search = page.getByRole("searchbox", { name: "Search" });

await search.click();
await search.press("Control+A");
await search.pressSequentially("playwright");
await search.press("Enter");
Element-level keyboard actions keep focus and actionability tied to the locator.
ts
const source = page.getByRole("listitem", { name: "Task A" });
const target = page.getByRole("listitem", { name: "Done" });

await source.dragTo(target);

await page.mouse.move(100, 200);
await page.mouse.down();
await page.mouse.move(300, 200, { steps: 10 });
await page.mouse.up();
dragTo is ideal for element-to-element drags; raw mouse moves handle pixel-level interactions.

Which API to reach for

  • locator.press for a key or shortcut on a focused element
  • locator.pressSequentially for typing character by character
  • locator.hover for a hover state
  • locator.dragTo for dragging one element onto another
  • page.keyboard for focus-independent shortcuts
  • page.mouse for canvas drawing and coordinate-based movement

Keyboard shortcuts should use the platform modifier correctly. Control works on Windows and Linux, while macOS commonly uses Meta. If the suite runs on both, define a helper that selects the right modifier instead of hard-coding one.

Low-level mouse events do not perform the same actionability checks as a locator click. A coordinate can land on a different element after a layout shift, so prefer locator methods whenever they express the intent.

Follow-ups you should expect

Interviewers use these to check whether the first answer was understanding or memorisation.

  1. 1What is the difference between press and pressSequentially?
  2. 2How do you handle Control versus Meta on macOS?
  3. 3When is page.mouse necessary?
  4. 4Why is locator.click safer than clicking a coordinate?

Say it in the interview

I prefer locator-level input such as press, hover and dragTo, because Playwright focuses the element and runs actionability checks. I drop to the page keyboard and mouse APIs for canvas drawing, pixel-level drags or shortcuts that are not tied to a specific element. I also handle the macOS Meta versus Control difference instead of hard-coding one. Raw coordinates are the last resort because layout shifts can make them hit the wrong element.

Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.

Related questions

EasyHow do you handle alerts, confirms and prompts?EasyWhat is a locator and why is it better than a raw selector?MediumHow does Playwright auto-waiting work?

Reading is step one

Now say it out loud.

Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live Playwright mock interview and get scored feedback on depth, clarity and confidence.

Start a free Playwright interviewBrowse all questions