如何在Headless Chrome的Puppeteer中获取验证码图片的src

方法1：直接复用控制台的DOM操作代码 #

用page.evaluate方法在页面上下文执行代码，和Chrome控制台的运行环境完全一致，直接复用你已验证有效的逻辑即可：

const captchaBase64 = await page.evaluate(() => {
  return document.getElementsByClassName("mb-16")[1].firstElementChild.src;
});

方法2：用合法CSS选择器配合Puppeteer API #

如果想用page.$系列方法，必须传入标准CSS选择器而非DOM操作语句。针对你的场景，第二个.mb-16元素下的img可以这样定位：

// 定位目标img元素
const captchaImg = await page.$('.mb-16:nth-of-type(2) img');
// 获取src属性的base64值
const srcProp = await captchaImg.getProperty('src');
const captchaBase64 = await srcProp.jsonValue();

原报错原因 #

page.$()仅接受合法CSS选择器字符串（如.mb-16、div:nth-child(2)），如果你传入了document.getElementsByClassName("mb-16")[1].firstElementChild这类DOM执行代码，会因为不是标准选择器而触发报错。

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