如何在Puppeteer的其他函数中访问page对象？

核心问题 #

1. page未定义：page是main函数内的局部变量，外部的getImageSrc函数无法访问到它，因此触发报错。
2. 异步逻辑未正确等待：调用getImageSrc()时没加await，会直接返回Promise对象而非实际结果；且browser.close()会在图片获取逻辑执行前就运行，导致页面提前关闭，后续操作失败。

修复方案 #

方案一：给getImageSrc传递page参数 #

将page作为参数传入getImageSrc，同时调用时添加await等待异步结果，确保获取到图片后再关闭浏览器：

(async function main() {
  try{
    const browser = await puppeteer.launch({headless:true, 
      args:[ 
        '--start-maximized',
        '--window-size=1920,1080'
      ]
    });
    const page = await browser.newPage();
    await page.goto(site);
    // 添加await等待结果，并传入page参数
    const imgSrc = await getImageSrc(page);
    console.debug(imgSrc);
    await browser.close();
  } catch(err) {
    console.error(err);
  }
})();

// 接收page参数
async function getImageSrc(page) {
  await page.waitForSelector('#sd-current > div > div.sd-message > div > img');
  const imgs = await page.$$eval('#sd-current > div > div.sd-message > div > img', imgs => imgs.map(img => img.getAttribute('src')));
  return imgs.toString();
}

方案二：将getImageSrc作为main的内部函数 #

把getImageSrc定义在main函数内部，这样它就能直接访问main里的page变量：

(async function main() {
  // 内部函数可直接访问外部的page变量
  async function getImageSrc() {
    await page.waitForSelector('#sd-current > div > div.sd-message > div > img');
    const imgs = await page.$$eval('#sd-current > div > div.sd-message > div > img', imgs => imgs.map(img => img.getAttribute('src')));
    return imgs.toString();
  }

  try{
    const browser = await puppeteer.launch({headless:true, 
      args:[ 
        '--start-maximized',
        '--window-size=1920,1080'
      ]
    });
    const page = await browser.newPage();
    await page.goto(site);
    const imgSrc = await getImageSrc();
    console.debug(imgSrc);
    await browser.close();
  } catch(err) {
    console.error(err);
    // 出错时也要关闭浏览器，避免残留进程
    await browser?.close();
  }
})();

额外注意点 #

• 确认site变量已正确赋值，否则page.goto会执行失败。
• 若页面加载缓慢，可给page.goto添加超时参数，例如await page.goto(site, {timeout: 60000})。

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