如何全局使用带async/await的变量？解决Puppeteer中page未定义错误

你遇到的ReferenceError: page is not defined问题，根源是变量作用域的限制：你把page和browser定义在了自执行异步函数（IIFE）的内部，这个作用域之外的login函数根本访问不到这些变量。

下面给你几种实用的解决方案，你可以根据自己的代码结构选择：

方案1：将变量提升到全局作用域 #

先在全局层面声明browser和page变量，再在IIFE内部赋值，这样外部函数就能访问到它们：

// 全局声明变量，先不赋值
let browser, page;

(async () => {
  browser = await puppeteer.launch({headless: false});
  page = await browser.newPage();
})();

async function login() {
  // 重要提醒：必须确保page已经完成初始化再调用login！
  // 如果login在IIFE执行完前调用，page还是undefined，依然会报错
  await page.goto(urls.login);
  await page.type('#username', user);
  await page.type('#password', pw);
  await page.click('[type="submit"]'); // 这里建议加await，确保点击操作完成
  await page.waitForNavigation();
}

小提示：如果要避免初始化顺序问题，可以把login的调用放在IIFE内部，或者用一个Promise来标记初始化完成，让login等待这个Promise。

方案2：将函数放在IIFE内部（推荐） #

把login函数直接定义在IIFE里面，这样它就能直接访问内部的page和browser变量，还能避免全局变量污染，安全性更高：

(async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();

  // login函数现在和page在同一个作用域里
  async function login() {
    await page.goto(urls.login);
    await page.type('#username', user);
    await page.type('#password', pw);
    await page.click('[type="submit"]');
    await page.waitForNavigation();
  }

  // 初始化完成后直接调用login
  await login();

  // 后续其他依赖page的函数也可以在这里定义和调用
})();

这个方案不需要担心变量作用域和初始化顺序的问题，是更规范的写法。

额外注意事项 #

• page.click()是异步操作，记得加上await，否则可能会在点击未完成时就执行后续的waitForNavigation，导致逻辑出错。
• 如果你的代码是多文件结构，可以考虑把Puppeteer的初始化逻辑封装成一个模块，导出page和browser对象，在需要的文件里导入使用。

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