Playwright执行await locator.click()出现超时错误是什么原因？

问题原因及解决方案 #

1. 核心错误：选择器语法不符合Playwright规范

你当前使用的选择器'id="focus-input"'写法错误：

• 如果使用CSS选择器，id选择器正确写法为#focus-input
• 如果使用Playwright内置的id选择器语法，正确写法为id=focus-input，不需要额外加引号包裹属性值
  错误的选择器导致Playwright无法匹配到实际存在的DOM元素，最终触发超时。

2. 其他可能触发该问题的原因

• 元素位于子iframe中：你打印的Locator对象显示当前页面存在2个子iframe，若focus-input元素在子iframe内，直接从顶层page定位会无法匹配，需要先切入对应的iframe再执行定位
• 元素未完成渲染/被动态隐藏：你贴的HTML中存在_ngcontent-c1属性，说明目标站点是Angular开发的，这类单页应用通常存在动态渲染逻辑，可能出现页面load状态完成但目标元素还未插入DOM、或者被CSS设置为不可见的情况
• 元素被其他浮层遮挡：点击操作执行时如果有弹窗、遮罩层挡住了目标输入框，也会导致点击操作超时

修正后的可运行代码

首先尝试修正选择器写法，同时增加显式等待逻辑：

// 写法1：用CSS选择器
const locator = page.locator('#focus-input');
// 写法2：用Playwright内置id选择器
// const locator = page.locator('id=focus-input');
// 显式等待元素可见后再执行点击
await locator.waitFor({ state: 'visible' });
await locator.click();

如果确认元素在iframe中，先切入iframe再定位：

// 匹配到目标iframe后再在iframe上下文内定位元素
const frame = page.frameLocator('iframe[对应iframe的属性匹配规则]');
const locator = frame.locator('#focus-input');
await locator.click();

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