使用Puppeteer无法点击特定JavaScript链接的问题排查

这个问题我之前也碰到过，核心是CSS选择器的引号嵌套语法错误，导致浏览器无法正确解析你的选择器，我来给你拆解一下问题和解决办法：

问题出在哪？ #

你写的选择器代码是：

await page.click('a[href="javascript:OnNextItem("0")"');

这里的问题是：你用双引号包裹了href的属性值，但属性值内部又出现了双引号"0"。浏览器的querySelector会把第一个双引号之后的内容（也就是javascript:OnNextItem(）当成属性值的结束，剩下的"0")"就变成了无效的选择器语法，自然就抛出报错了。

几种正确的写法 #

1. 调整引号嵌套，用单引号包裹href属性值 #

把包裹href属性值的双引号换成单引号，这样内部的双引号就不会冲突：

// 用单引号包裹整个选择器，内部单引号转义
await page.click('a[href=\'javascript:OnNextItem("0")\']');

或者用双引号包裹整个选择器字符串，内部的单引号可以直接使用（内部双引号需要转义）：

await page.click("a[href='javascript:OnNextItem(\"0\")']");

2. 转义属性值内部的双引号 #

如果坚持用双引号包裹href属性值，需要转义内部的双引号（注意在TypeScript里要写双重反斜杠，因为第一个反斜杠会被TypeScript本身解析为转义符）：

await page.click('a[href="javascript:OnNextItem(\\"0\\")"]');

3. 用模板字符串简化写法 #

TypeScript支持模板字符串（用反引号`包裹），这样内部的单双引号都不需要额外转义，写法更清爽：

await page.click(`a[href="javascript:OnNextItem('0')"]`);

（这里对应你提供的原链接里的OnNextItem('0')，如果原链接实际是双引号的0，改成OnNextItem("0")就行）

额外小技巧：换个方式定位元素 #

如果href属性的内容太复杂，也可以通过img的alt或title属性来定位，选择器更简洁：

// 通过子元素img的alt属性定位父级a标签
const imgElement = await page.$('a > img[alt="Next item"]');
await imgElement?.click();

// 或者用:has()选择器直接定位包含指定img的a标签
await page.click('a:has(img[title="Next item"])');

注意:has()选择器需要较新版本的Chrome支持，Puppeteer默认的Chrome版本一般都能兼容。

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