Node.js同步使用Puppeteer调用page.click()报undefined错误如何解决

报错由Promise链式调用的传值断裂直接导致：

• page.waitForTimeout(3000) 执行后返回Promise<void>，resolve时不传递任何有效值，因此后续.then((page) => page.click(...))中接收到的page形参为undefined，对undefined调用click方法就会触发TypeError: Cannot read properties of undefined (reading 'click')错误。
• 现有代码还存在隐藏隐患：_page = browser.newPage()行赋值的是newPage()返回的Promise对象，并非真实的Page实例，依赖外部变量暂存异步实例的写法很容易出现状态不同步问题。

JavaScript中编写Puppeteer逻辑最接近同步代码体验的方案是使用async/await语法，可完全规避Promise链传值丢失的问题，逻辑执行顺序和同步代码完全一致，可读性与可维护性更高，修正后的可运行代码如下：

const puppeteer = require('puppeteer');

(async () => {
  // 按顺序逐行执行异步操作，写法与同步逻辑无明显差异
  const browser = await puppeteer.launch({ headless: false, defaultViewport: null });
  const page = await browser.newPage();
  await page.goto('https://instagram.com');
  await page.waitForTimeout(3000);
  // page始终为有效实例，不会出现undefined问题
  await page.click('button[class="aOOlW   HoLwm "]');
  await browser.close();
})();

如果需要保留Promise链式写法，只需要修复传值逻辑、修正实例赋值时机即可，修复后代码如下：

let _browser;
let _page;

puppeteer
  .launch({ headless: false, defaultViewport: null })
  .then((browser) => {
    _browser = browser;
    return browser.newPage();
  })
  .then((page) => {
    _page = page; // 等newPage执行完成后再赋值，_page才是真实可用的Page实例
    return page.goto('https://instagram.com');
  })
  .then(() => _page.waitForTimeout(3000))
  .then(() => _page.click('button[class="aOOlW   HoLwm "]')) // 直接使用已存储的有效实例，不依赖链式传值
  .then(() => _browser.close());

补充提示：新版本Puppeteer已将waitForTimeout标记为废弃，生产环境建议使用waitForSelector等明确等待目标元素状态的API替代固定时长等待，脚本稳定性会更高。

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