Playwright · error message

Playwright: Element is outside of the viewport

Permanent - do not retryActionability & click timeouts

Last verified

The exact message
Error: locator.click: Element is outside of the viewport Call log: - waiting for locator('#menu-item') - attempting click action - element is outside of the viewport

What it means

Playwright normally scrolls an element into view before clicking it. This error means it tried, and after scrolling the click point was still outside the visible viewport, so there is no screen coordinate where a real mouse could click. Unlike most actionability problems, Playwright does not keep retrying this one: it is treated as non-recoverable and fails right away.

It usually comes from layouts where scrolling cannot help: an element positioned off-canvas (a slide-out menu at left: -300px), something inside a container with overflow: hidden, a carousel slide that is not the active one, or an element translated out of view by CSS transforms. A very small viewport can also leave the element partly outside even after scrolling.

What is not wrong: the locator. It found exactly the element you meant; the element just is not reachable by pointer in the current layout.

What it looks like

// Open the drawer before clicking an item inside it
await page.getByRole('button', { name: 'Open menu' }).click();
await page.getByRole('navigation').getByRole('link', { name: 'Settings' }).click();

# Python: give desktop-only layouts enough room
context = browser.new_context(viewport={"width": 1440, "height": 900})

Why it happens

  • The element belongs to an off-canvas menu, drawer or sidebar that is closed.
  • A carousel or tab panel moves inactive items out of view with transforms or negative offsets.
  • A parent with overflow:hidden clips the element and is not itself scrollable.
  • The viewport is too small (for example a mobile emulation profile) for the element's position.
  • Coordinates passed through the position option fall outside the element's visible part.

How to fix it

  1. Perform the user step that reveals the element first: open the menu, advance the carousel, select the tab.
  2. Increase the viewport with page.setViewportSize() or the viewport context option if the layout is desktop-only.
  3. Remove any custom position option, or keep its offsets within the element's bounding box.
  4. If the control is decorative and the real action is a form submission or link, act on that element instead.
  5. As a last resort for non-user-facing automation, locator.dispatchEvent('click') fires the event without pointer checks.

How to stop it recurring

Script flows the way a user would move through the interface, revealing hidden regions before interacting with them. Pick a viewport that matches the layout you target, and run mobile emulation as a separate project rather than squeezing desktop flows into it. Avoid hard-coded click coordinates.

Official documentation: playwright.dev/docs/actionability. See all Playwright error messages.

Related errors

Definitions

Quick answers

What does "Element is outside of the viewport" mean in Playwright?

Playwright normally scrolls an element into view before clicking it. This error means it tried, and after scrolling the click point was still outside the visible viewport, so there is no screen coordinate where a real mouse could click. Unlike most actionability problems, Playwright does not keep retrying this one: it is treated as non-recoverable and fails right away.

How do I fix "Element is outside of the viewport"?

1. Perform the user step that reveals the element first: open the menu, advance the carousel, select the tab. 2. Increase the viewport with page.setViewportSize() or the viewport context option if the layout is desktop-only. 3. Remove any custom position option, or keep its offsets within the element's bounding box. 4. If the control is decorative and the real action is a form submission or link, act on that element instead. 5. As a last resort for non-user-facing automation, locator.dispatchEvent('click') fires the event without pointer checks.

Run browser automation you can watch and take over

Autonoly runs each job in a real cloud Chromium browser driven by Playwright. Timeouts and detached elements still happen; the difference is that you can watch the run live, see the step that failed, and take control of the browser to finish it.

Also see Live browser control.