如何让Puppeteer不同异步函数在同一浏览器窗口打开页面？

你的问题核心是每个函数都单独调用了puppeteer.launch()，导致每次启动新浏览器进程。要实现多函数共用同一窗口，只需要启动一次浏览器，把浏览器实例传递给各个函数，让它们基于这个实例创建新页面即可。

修改方案 #

1. 先初始化一次浏览器实例，避免重复启动
2. 重构两个函数，让它们接收浏览器实例作为参数，不再自行启动浏览器
3. 确保异步操作正确使用await，避免异步逻辑混乱

修改后的完整代码 #

const puppeteer = require('puppeteer');

// 初始化浏览器实例的函数
const initBrowser = async () => {
  const browser = await puppeteer.launch({
    headless: false,
  });
  // 统一设置默认视口，避免每个页面重复设置
  const defaultViewport = {
    width: 1280,
    height: 800,
    isMobile: false,
  };
  browser.defaultViewport = defaultViewport;
  return browser;
};

// 打开首页的函数，接收browser实例
const openBrowser = async (browser) => {
  const page = await browser.newPage();
  await page.goto("https://youtube.com/");
  return page;
};

// 打开搜索结果页的函数，接收browser实例
const openSearchPage = async (browser) => {
  const page = await browser.newPage();
  await page.goto("https://www.youtube.com/results?search_query=avatar");
  return page;
};

// 主逻辑：启动浏览器，调用两个函数
(async () => {
  const browser = await initBrowser();
  await openBrowser(browser);
  await openSearchPage(browser);

  // 可选：如果需要自动关闭浏览器，可以添加延迟后关闭
  // setTimeout(async () => {
  //   await browser.close();
  // }, 10000);
})();

关键说明 #

• 复用浏览器实例：只通过initBrowser()启动一次浏览器，所有页面都基于这个实例创建，不会打开新窗口
• 统一视口设置：直接给浏览器实例设置默认视口，不需要每个页面重复调用setViewport
• 正确处理异步：主逻辑用自执行异步函数包裹，确保所有异步操作按顺序执行，避免回调地狱
• 避免重复launch：所有页面操作函数都不再调用puppeteer.launch()，而是使用传入的browser实例

如果需要在其他地方复用这个浏览器实例，也可以把它作为全局变量（简单场景可用），或者用依赖注入的方式传递，保证代码的可维护性。

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