如何在Puppeteer的page.$$eval方法中传入selector参数并绑定到map函数？

错误原因 #

page.$$eval 传入的回调函数会被序列化后放到浏览器上下文执行，Node环境中定义的selector变量如果不通过官方的参数传递通道传入，无法被浏览器侧的回调访问。你使用bind绑定变量的操作仅在Node环境生效，序列化后绑定关系会丢失，因此代码运行失败。

正确写法 #

const selector = '.tile-hover-target';

// $$eval 从第三个参数开始传入自定义参数，会自动传递给回调函数
const prods = await page.$$eval(resultsSelector, function (msgs, selector) {
  return msgs.map(function (msg) {
    return {
      link: msg.querySelector(selector).href.trim(),
    }
  })
}, selector);

// 箭头函数简化写法
const prodsArrow = await page.$$eval(resultsSelector, (msgs, selector) => 
  msgs.map(msg => ({ link: msg.querySelector(selector).href.trim() }))
, selector);

规则说明 #

puppeteer中所有涉及跨上下文执行函数的API（包括$$eval、$eval、evaluate等）都遵循统一传参规则：回调函数需要的外部变量，都要作为API的入参，接在回调函数之后依次传入，puppeteer会自动完成序列化和传递，不需要手动做闭包绑定。

内容的提问来源于stack exchange，提问作者Антон Гюппенен