Puppeteer执行evaluate时报page未定义错误如何解决

Puppeteer 的 page.evaluate() 方法内的代码运行在浏览器沙箱环境中，仅能访问浏览器端的全局对象（比如 document、window），而 page 是 Node.js 运行环境下的实例对象，无法直接传递到浏览器上下文，因此才会报 page is not defined 的错误。

你不需要也无法将 page 实例传入 evaluate 函数，正确解法是拆分逻辑：DOM 读取操作放在 evaluate 内执行，页面交互、元素等待等操作放在 Node.js 侧通过 page 实例执行。

const variations = [];
// 第一步：在浏览器侧拿到所有下拉选项的值，跳过第一个默认选项
const optionValues = await page.evaluate(() => {
  const selectEl = document.getElementById('variante');
  return Array.from(selectEl.options).slice(1).map(opt => opt.value);
});

product['Variations'] = optionValues.length || 1;

// 第二步：在Node.js侧循环操作页面，逐个选择选项读取变体信息
for (const optionValue of optionValues) {
  // 若必须点击按钮才会触发下拉展开，可放开下一行注释
  // await page.click('.flaticon-bottom4');

  // 选择当前变体选项
  const selectEl = await page.waitForSelector('#variante');
  await selectEl.select(optionValue);
  
  // 等待动态加载的变体信息渲染完成，避免拿到旧数据
  await page.waitForSelector('.woocommerce-variation-description p', { timeout: 3000 });
  await page.waitForSelector('.woocommerce-variation-price', { timeout: 3000 });
  
  // 读取当前渲染的变体信息
  const variantInfo = await page.evaluate((currentOptName) => {
    const description = document.querySelector('.woocommerce-variation-description p')?.innerText || 'N/A';
    const price = document.querySelector('.woocommerce-variation-price')?.innerText || 'N/A';
    return {
      'Variation name': currentOptName,
      'Variation price': price,
      'Variation description': description
    };
  }, optionValue); // 浏览器侧需要的参数可通过evaluate的入参传递
  
  variations.push(variantInfo);
}

• 你原有代码存在变量名拼写错误：声明的变量是variationtName，赋值时误用为variantName，会导致变体名称永远返回N/A，上述代码已修复该问题
• 下拉框选择器优先用ID #variante，比class选择器更稳定，不会因为元素新增其他class导致匹配失败

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