Puppeteer中waitForSelector传字符串变量失效问题求助

我在使用Puppeteer时遇到问题：调用waitForSelector方法时，传入字符串变量无法正常工作，但直接传入字符串字面量却可以正常运行。

无法运行的代码 #

let subDomain =  '#yahya\\.infinitystudio\\.pk_lnkRemove' 

await page.waitForSelector(subDomain )
await Promise.all ([
    page.waitForNavigation(),
    page.click(subDomain)
])

可以运行的代码 #

await page.waitForSelector('#yahya\.infinitystudio\.pk_lnkRemove')
await Promise.all ([
    page.waitForNavigation(),
    page.click('#yahya\.infinitystudio\.pk_lnkRemove')
])

问题原因 #

1. 字符串转义规则差异 #

JavaScript对字符串字面量和变量赋值的转义处理逻辑不同：

• 直接传入的字面量#yahya\.infinitystudio\.pk_lnkRemove中，\.属于无效转义序列（.不需要在JavaScript字符串中转义），JavaScript会自动忽略反斜杠，最终传给CSS引擎的选择器是#yahya.infinitystudio.pk_lnkRemove。虽然这个写法不符合CSS规范（.作为ID的一部分需要转义），但部分浏览器的CSS引擎会容错处理，直接匹配ID为yahya.infinitystudio.pk_lnkRemove的元素，因此代码能运行。
• 变量中的#yahya\\.infinitystudio\\.pk_lnkRemove会被JavaScript解析为#yahya\.infinitystudio\.pk_lnkRemove（\\被转义为单个\），这是符合CSS规范的选择器写法，但如果你的环境中存在浏览器兼容性问题，或者元素ID的实际解析逻辑有差异，反而可能无法匹配。

2. 变量字符串末尾的空格（隐蔽错误） #

从你提供的代码来看，变量赋值时字符串末尾带有多余空格（let subDomain = '#yahya\\.infinitystudio\\.pk_lnkRemove' ），这会导致选择器末尾多了一个空格，完全无法匹配目标元素；而字面量代码中没有这个空格，因此能正常运行。

解决方案 #

1. 清理多余空格：检查变量赋值的字符串，确保末尾没有多余空格，保证选择器与字面量完全一致。
2. 统一规范转义：如果目标元素ID包含.，正确的CSS选择器需要用\.转义.，因此在JavaScript中应该用双反斜杠表示转义（即'#yahya\\.infinitystudio\\.pk_lnkRemove'），无论用变量还是字面量传入，都能保证选择器正确。

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