使用page.waitForSelector和page.click点击提交按钮时选择器报错如何解决

报错原因 #

你收到的报错：

Error: Evaluation failed: DOMException: Failed to execute 'querySelector' on 'Document': '[value=example]' is not a valid selector.

核心原因是CSS属性选择器的语法要求：属性值如果不使用引号包裹，仅支持符合严格CSS标识符规则的内容，部分浏览器DOM解析器对无引号属性值的兼容性较差，统一给属性值添加引号即可解决合法性问题。

精准定位按钮的解决方案 #

因为页面存在多个name=ok的按钮，你可以组合多个属性筛选，同时匹配按钮的type、name、value、class等属性，确保选择器唯一匹配目标提交按钮。

推荐选择器写法 #

组合多个特征，同时规避语法报错：

'input[type="submit"][name="ok"][value="example"]'

如果目标按钮的classibro_schalter_03辨识度更高，也可以加入class进一步缩小范围：

'input.ibro_schalter_03[type="submit"][value="example"]'

代码调用示例 #

// 等待目标按钮加载完成
await page.waitForSelector('input[type="submit"][name="ok"][value="example"]');
// 点击按钮
await page.click('input[type="submit"][name="ok"][value="example"]');

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