[Bug]: [MCP] Accessibility tree snapshot includes off-screen/non-viewport elements causing AI agents to generate invalid test cases on unreachable UI elements

[Zayed-Babsail]

Version

1.49.0

Steps to reproduce

1. Set up Playwright MCP and connect an AI agent to it
2. Navigate to https://wearecollins.com/story/TribecaFilm using browser_navigate
3. Call browser_snapshot to get the accessibility tree
4. Observe the snapshot output carefully
5. Notice footer elements like "Case Studies", "Programs", "LinkedIn",
   "Work with us", "Team", "Careers" appear in the snapshot
6. These elements are NOT visible in the current viewport — they are
   hundreds of pixels below the fold
7. An AI agent reads this snapshot and generates test cases for these
   footer elements treating them as directly accessible

Expected behavior

The accessibility tree snapshot should either:

1. Only return elements that are currently visible in the viewport, OR
2. Include a property on each element (e.g. "inViewport: true/false")
   so AI agents can filter elements that are actually reachable
   without scrolling

Elements that are off-screen, inside closed modals, or not reachable
without additional user actions should NOT be treated as directly
interactive elements.

Actual behavior

The MCP accessibility tree snapshot returns ALL elements in the DOM
regardless of whether they are in the current viewport or not.

Example — on page load of https://wearecollins.com/story/TribecaFilm,
the snapshot includes:

• "Case Studies" link ← in footer, not in viewport
• "Programs" link ← in footer, not in viewport
• "Arts & Culture" link ← in footer, not in viewport
• "Work with us" button ← in footer, not in viewport
• "Team" button ← in footer, not in viewport
• "LinkedIn" link ← in footer, not in viewport
• Email input ← in footer, not in viewport

All of these pass through as valid interactive elements in the
accessibility tree even though a real user cannot interact with them
without first scrolling to the bottom of the page.

This causes AI agents to generate invalid test cases for unreachable
elements.

Additional context

This issue directly impacts AI agent workflows built on Playwright MCP
for automated test case generation.

The core problem:

• Accessibility tree is designed to expose ALL elements for screen readers
• Screen readers can navigate non-linearly (jump to any element)
• AI agents need ONLY what a real user can see and click RIGHT NOW
• These two purposes conflict — the accessibility tree is not designed
  for viewport-aware element discovery

Workaround we attempted:
Using page.evaluate() with getBoundingClientRect() to manually filter
viewport-visible elements:

const vh = window.innerHeight;
const vw = window.innerWidth;
Array.from(document.querySelectorAll('*')).filter(el => {
const r = el.getBoundingClientRect();
return r.top >= 0 && r.bottom <= vh && r.left >= 0 && r.right <= vw;
});

This is unreliable and requires manual maintenance per page.

Feature Request:
Add a viewport-only mode to browser_snapshot, for example:
browser_snapshot({ viewportOnly: true })

This would make Playwright MCP significantly more useful for
AI agent test generation use cases.

Environment

System:
    OS: Windows 11 10.0.26200
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-1235U
    Memory: 6.13 GB / 23.69 GB
  Binaries:
    Node: 20.19.6 - C:\nvm4w\nodejs\node.EXE
    npm: 10.8.2 - C:\nvm4w\nodejs\npm.CMD
  IDEs:
    VSCode: 1.110.0 - C:\Users\ZayedBinAliBabsail\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD
    Cursor: 1.7.54 - C:\Program Files\cursor\resources\app\bin\cursor.CMD
  npmPackages:
    @playwright/mcp: ^0.0.51 => 0.0.51
    playwright: ^1.49.0 => 1.57.0

[Skn0tt]

Off-screen elements being included is by design, it means that the agent can understand the entire page without needing to scroll, a massive advantage over screenshot-based approaches. Elements inside closed modals aren't shown, if you're seeing that please report a bug.

You mention your usecase is in generating test cases - can you elaborate on how off-screen elements are a problem here? Playwright scrolls elements into view automatically. Maybe you can elaborate on your usecase.

[Zayed-Babsail]

Thanks for the response.

The specific issue is elements that are PERMANENTLY HIDDEN via CSS styling and are completely unreachable through any normal user interaction — scroll, click, keyboard, or otherwise.

Test page: https://wearecollins.com/story/TribecaFilm

The footer on this page contains elements like "Case Studies", "Programs", "LinkedIn" etc. These elements are not just off-screen they are directly hidden via CSS properties applied to them or their parent containers. No scroll will ever reveal them to a real
user. They are visually and interactively non-existent from the user's perspective.

However, the MCP accessibility tree still returns them as valid interactive elements. An AI agent reading this snapshot generates
test cases like "click Case Studies link" — but this element CANNOT be found or interacted with by a real user under any
circumstances due to the page's CSS.

This is about elements that are:

• Directly hidden via CSS (display:none, visibility:hidden, opacity:0, pointer-events:none)
• Clipped or hidden by parent container styles (overflow:hidden, height:0, clip-path, etc.)
• Impossible to reach through ANY user interaction including scrolling
• Still appearing in the accessibility tree as interactive

When Playwright auto-scrolls to execute a click on these elements, it may technically succeed at the automation level — but the test
itself is INVALID because a real user could never perform that action in a real browser session.

The test cases generated become meaningless because they test interactions that are impossible in the real UI.

Could the MCP snapshot indicate when elements are hidden purely via CSS and not reachable through normal user interaction?
Even a simple "reachable: false" flag would allow AI agents to skip these elements during test generation.

[joelamyman]

Just to pitch in as I was going to raise a similar bug - looking at the site that @Zayed-Babsail shared, the "Tribeca Film Festival x COLLINS" content seems to be opened as a modal dialog, meaning that the content behind it is essentially inert (and therefore not in the accessibility tree).

I've also tried this locally in my own tests, in which I've manually applied the inert attribute to an element so I know it shouldn't be in the accessibility tree, but it is still being reported when checking with locator.ariaSnapshot().

[Skn0tt]

I see, I got confused because I thought I the "Credits" section is what you're referring to as the footer. Chromium's accessibility tree behaves like you explain, let me check what's going on with ours.

[Skn0tt]

We discussed this with the team. It's unclear what the right behaviour is in this case, especially for agent usage there's a trade-off between showing more to give the agent a faster understanding of the page (think about a dialog that's not full-screen) and showing less to give a better understanding of what can be interacted with.

You mention this leads to incorrect tests, which is tangentially related. Playwright's handling of which elements are visible is quirky when a <dialog> is on screen, similarly to our handling of inert (#36938).

I'll mark this issue as P3 so we can collect upvotes and gather feedback.