使用Puppeteer无法修改页面元素，page.evaluate报student未定义错误

错误原因 #

page.evaluate() 内部的函数是在浏览器隔离环境中运行的，无法直接访问 Node.js 上下文里定义的 student 变量，因此触发未定义报错。

修复方案 #

将 student 作为参数传入 page.evaluate 即可跨上下文传递数据，修改后代码如下：

(async () => { 
  const browser = await puppeteer.launch(); 
  const page = await browser.newPage(); 
  await page.goto(`file://${__dirname}/card/card.html`); 
  console.log(students); 
  for (const student of students) { 
    console.log(student.name);
    // 把student作为evaluate的入参，传给浏览器环境的回调函数
    await page.evaluate((currentStudent) => { 
      document.getElementById("name").innerHTML = currentStudent.name; 
      document.getElementById("id").innerHTML = currentStudent.id; 
      document.getElementById("text").innerHTML = currentStudent.text; 
    }, student); 
    await page.screenshot({ path: `example-${student.id}.png` }); 
  } 
  await browser.close(); 
})();

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