playwright [Bug]: A11y(ai snapshot) doesn't filtered out the elements which not in viewport, cause `locator.click` error

Version

1.55.1

Steps to reproduce

Use playwright-mcp to take the page snapshot
If the elements are visible, enabled and stable, but not in viewport, they will exist in snapshot
If use locator.click() to click it, it will cause an error:

Call log:
  - waiting for locator("body > div.rightPanel-container > div.rightPanel > div.rightPanel-items > div > div > h3")
    - locator resolved to <h3 data-v-1459c0d6="" class="drawer-title" __noxbrowserelementid="e6">系统布局配置</h3>
  - attempting click action
    2 × waiting for element to be visible, enabled and stable
      - element is visible, enabled and stable
      - scrolling into view if needed
      - done scrolling
      - element is outside of the viewport
    - retrying click action
    - waiting 20ms
    2 × waiting for element to be visible, enabled and stable
      - element is visible, enabled and stable
      - scrolling into view if needed
      - done scrolling
      - element is outside of the viewport
    - retrying click action
      - waiting 100ms
    56 × waiting for element to be visible, enabled and stable
       - element is visible, enabled and stable
       - scrolling into view if needed
       - done scrolling
       - element is outside of the viewport
     - retrying click action
       - waiting 500ms

Expected behavior

Snapshot should filter out those elements which not in viewport.

Actual behavior

Snapshot doesn't filtered out those.

Additional context

No response

Environment

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics         
    Memory: 2.97 GB / 15.36 GB
  Binaries:
    Node: 20.12.0 - E:\Program Files\nojs20\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.8.1 - E:\Program Files\nojs20\npm.CMD
  IDEs:
    VSCode: 1.101.2 - E:\Program Files\Microsoft VS Code\bin\code.CMD
  Languages:
    Bash: 5.1.16 - C:\Program Files\Git\usr\bin\bash.EXE
  npmPackages:
    @playwright/test: 1.56.0-alpha-1758750661000 => 1.52.0-alpha-1743163434000 
    playwright: 1.56.0-alpha-1758750661000 => 1.54.1 
    playwright-core: 1.56.0-alpha-1758750661000 => 1.54.1

Sep 28 '25 07:09 Fly-Playgroud

snapshot:

   - generic [active] [elementId=e1]:
 - generic [elementId=e5]:
   - heading "系统布局配置" [level=3] [elementId=e6]
   - generic [elementId=e7]:
     - text: 显示 Logo
     - switch [checked] [elementId=e8]:
       - checkbox [checked]
   - generic [elementId=e10]:
     - text: 开启 多视图
     - switch [checked] [elementId=e11]:
       - checkbox [checked]
   - generic [elementId=e13]:
     - text: 打开 新页签
     - switch [elementId=e14]:
       - checkbox
   - generic [elementId=e16]:
     - text: 显示 设置按钮
     - switch [elementId=e17]:
       - checkbox
   - generic [elementId=e19]:
     - text: 展开一个子菜单
     - switch [checked] [elementId=e20]:
       - checkbox [checked]
 - generic [elementId=e23]:
   - menubar [elementId=e27]:
     - menuitem:
       - generic:
         - img
     - link "首页" [elementId=e29] [cursor=pointer]:
       - /url: "#/dashboard"
       - menuitem "首页" [elementId=e30]:
         - img [elementId=e31]
         - text: 首页
     - menuitem "系统管理 " [elementId=e34]:
       - generic [elementId=e35] [cursor=pointer]:
         - img [elementId=e36]
         - text: 系统管理
         - generic [elementId=e38]: 
     - menuitem "系统监控 " [elementId=e40]:
       - generic [elementId=e41] [cursor=pointer]:
         - img [elementId=e42]
         - text: 系统监控
         - generic [elementId=e44]: 
     - menuitem "系统工具 " [elementId=e46]:
       - generic [elementId=e47] [cursor=pointer]:
         - img [elementId=e48]
         - text: 系统工具
         - generic [elementId=e50]: 
   - generic [elementId=e52]:
     - generic [elementId=e53]:
       - generic [elementId=e54]:
         - img [elementId=e56] [cursor=pointer]
         - navigation "Breadcrumb" [elementId=e58]:
           - link "首页" [elementId=e60]
         - generic [elementId=e61]:
           - generic [elementId=e62]:
             - img [elementId=e63] [cursor=pointer]
             - generic:
               - generic:
                 - textbox "Search Menu"
           - img [elementId=e68] [cursor=pointer]
           - button "系统管理员 " [elementId=e74]:
             - text: 系统管理员
             - img [elementId=e75] [cursor=pointer]
             - generic [elementId=e76] [cursor=pointer]: 
       - generic [elementId=e81] [cursor=pointer]: 首页
     - generic [elementId=e89]:
       - img [elementId=e91]
       - generic [elementId=e93]:
         - generic [elementId=e94]: 待审批
         - link "0" [elementId=e95] [cursor=pointer]:
           - /url: "#/userflow/waitApprove"
           - generic "查看明细" [elementId=e96]: "0"
 - generic: 👆
   ```

Sep 28 '25 07:09 Fly-Playgroud

@Fly-Playgroud I don't think this is a problem of the snapshot itself. It seems like Playwright cannot scroll this element to be in viewport. Perhaps you could share a repro with the page url, so we can take a look at the scrolling issue? Thank you!

Sep 29 '25 11:09 dgozman

@Fly-Playgroud I don't think this is a problem of the snapshot itself. It seems like Playwright cannot scroll this element to be in viewport. Perhaps you could share a repro with the page url, so we can take a look at the scrolling issue? Thank you!

The element heading "系统布局配置" [level=3] [elementId=e6] and its descendants cannot be slid by sliding, as it is wrapped in a drawer component that slides out on the right side, which must be interacted with in several steps before it appears in the viewport

Sep 29 '25 12:09 Fly-Playgroud

@Fly-Playgroud Thank you for the explanation, but we won't be able to fix an issue without a full repro that we can run locally.

Sep 29 '25 12:09 dgozman

@Fly-Playgroud Thank you for the explanation, but we won't be able to fix an issue without a full repro that we can run locally.

url: http://47.114.158.164:8080/yhy/#/dashboard user_name:admin password:123456

Steps:

Run npx @modelcontextprotocol/inspector
Run npx @playwright/mcp@latest --port 8931
Then use brower_navigate tool navigate to the url
Then use the username and password to login
In dashboard,call the browser_snapshot to get snapshot:
Use browser_click to click the element - heading \"系统布局配置\" [level=3] [ref=e45]\:

Actually the element can be find follow below steps:

click this icon:

click the 布局配置 item:

then will be in viewport:

Sep 29 '25 12:09 Fly-Playgroud

Is there any update on this?

Nov 18 '25 09:11 Fly-Playgroud

No update, sorry, I don't think we'll be doing it for now.

Dec 11 '25 17:12 pavelfeldman