Playwright元素已解析仍抛出TimeoutError点击超时错误

从报错日志可以判断，流程已经走完「元素定位、可见/可用/稳定性校验、滚动到视图」全流程，卡在最终执行点击的环节超时。wait_for_load_state('networkidle')只能覆盖网络请求层面的加载完成，无法感知前端本地渲染、事件绑定、遮挡层这类不触发网络请求的页面变化，常见原因和处理方式如下：

• 存在临时遮挡层
  你定位的元素带_nghost属性，是Angular框架渲染的自定义组件，很多这类项目在网络空闲后，还会在前端本地渲染全局loading遮罩、新手引导浮层、下拉菜单蒙层，这类元素不会触发网络请求，所以networkidle状态触发时遮罩可能还没消失，刚好盖在按钮上方，导致Playwright判定点击点被拦截，反复重试直到超时。
  排查方式：在点击代码前加截图代码await page.screenshot({path: 'click-debug.png', fullPage: true})，运行后看截图里按钮上方有没有半透明/全透明的遮挡元素。
  处理方式：等遮挡元素消失后再执行点击，比如遮罩类名是.global-mask的话，就先执行await page.locator('.global-mask').wait_for({state: 'hidden'})，不要把networkidle作为唯一的页面就绪判断条件。
• 自定义组件内部结构问题
  你定位的<cye-button>是自定义封装组件，不是原生按钮：很多组件库会在外层标签内部嵌套span、icon子节点，点击事件实际绑定在内部子元素上，甚至会给外层标签加内边距、偏移，导致Playwright默认计算的元素中心点击点，落在了没有绑定事件、或者不可点击的区域。
  处理方式：优先定位组件内部的原生可点击节点，比如组件内部渲染原生button标签的话，选择器改成#new-company button再点击；也可以手动指定点击坐标避开偏移区域，比如click({position: {x: 8, y: 8}})点击按钮左上角区域。
• 点击瞬间触发布局位移/动画
  部分Angular应用在网络空闲后，还会执行微任务队列里的位移动画、侧边栏展开、布局重排逻辑，哪怕之前已经校验过元素稳定，刚好在点击执行的瞬间按钮位置发生变化，就会导致点击动作失效重试。
  处理方式：确定元素本身逻辑正常的话，可以加force: true参数跳过点击前的动作校验强制执行点击：page.locator('#new-company').click({force: true})，注意这个参数不要全局滥用，只适合确认元素可点、只是被临时动画/校验逻辑干扰的场景。
• 视口遮挡问题
  如果测试时设置的浏览器视口尺寸过小，按钮虽然被判定滚动到可视区域，但中心位置刚好被固定定位的顶部导航、底部版权栏挡住，也会导致点击失败。可以在启动浏览器时把视口设置为常规桌面尺寸viewport: {width: 1920, height: 1080}再重试排查。

内容的提问来源于stack exchange，提问作者Antongarou