Puppeteer报错Execution context已销毁，如何确保页面重载完成后操作？

针对CentOS 7无头模式下Puppeteer页面重载后page.waitForNavigation未按预期工作、元素查找报错的问题，你可以从以下几个方向调整代码：

1. 修正page.reload()与waitForNavigation的绑定逻辑 #

你当前用Promise.all同时触发重载和等待导航，这在无头模式下可能因为事件触发时机差导致监听错过。正确的做法是先监听导航事件，再执行重载：

// 先注册导航等待
const navigationPromise = page.waitForNavigation({
  waitUntil: ['domcontentloaded', 'networkidle2'], // 放宽网络等待条件
  timeout: 30000 // 设置超时时间，避免无限等待
});
// 再触发重载
await page.reload();
// 等待导航完成
await navigationPromise;

networkidle0要求所有网络连接完全断开，很多页面会有长连接（如WebSocket），导致永远达不到这个状态，换成networkidle2（仅允许2个活跃网络连接）更实用，同时结合domcontentloaded确保DOM加载完成。

2. 替换固定延迟为元素状态等待 #

你代码中的await wait(500)完全依赖固定时间，无头模式下加载速度波动大，容易导致元素还未渲染就执行后续逻辑。应该改为等待目标元素出现，或者等待加载状态元素消失：

// 替换原spinner处理逻辑
const spinnerExists = await checkElementExist(page, ".spinner");
if (spinnerExists) {
  console.log("spinner detected, waiting for it to disappear");
  try {
    // 等待spinner消失，超时则重试重载
    await page.waitForSelector(".spinner", { hidden: true, timeout: 15000 });
  } catch (e) {
    console.log("spinner timed out, reloading page");
    const navPromise = page.waitForNavigation({ waitUntil: ['domcontentloaded', 'networkidle2'] });
    await page.reload();
    await navPromise;
  }
}

3. 优化无头模式启动参数 #

CentOS 7的无头环境缺少部分浏览器渲染依赖，添加以下启动参数可以模拟更接近有头模式的环境，减少加载异常：

const browser = await puppeteer.launch({
  headless: "new", // 用新版无头模式（Puppeteer v19+支持）
  args: [
    '--no-sandbox',
    '--disable-setuid-sandbox',
    '--disable-dev-shm-usage', // 解决内存不足问题
    '--disable-gpu',
    '--window-size=1920,1080', // 固定窗口尺寸，避免响应式布局影响元素选择
    '--user-agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36' // 模拟真实UA
  ]
});

4. 优化元素等待逻辑 #

确保waitForEl函数是基于Puppeteer的waitForSelector实现，而不是自定义的简陋等待，比如：

async function waitForEl(page: Page, selector: string) {
  return page.waitForSelector(selector, {
    visible: true, // 确保元素可见
    timeout: 20000
  });
}

优化后的完整函数代码 #

async function isLogin(page: Page) {
  try {
    const element = await page.$("#kc-session-limits-form");
    let dashboardSelector: string = "";
    if (element) {
      const navPromise = page.waitForNavigation({ waitUntil: ['domcontentloaded', 'networkidle2'] });
      await page.click("#btn-submit");
      await navPromise;
      console.log("limited session");
    } else {
      console.log("not limited");
    }

    await waitLoaded(page);
    console.log("Redirecting");

    // 第一次重载
    let navPromise = page.waitForNavigation({ waitUntil: ['domcontentloaded', 'networkidle2'], timeout: 30000 });
    await page.reload();
    await navPromise;

    // 处理spinner
    const spinnerExists = await checkElementExist(page, ".spinner");
    if (spinnerExists) {
      console.log("spinner detected");
      try {
        await page.waitForSelector(".spinner", { hidden: true, timeout: 15000 });
      } catch (e) {
        console.log("spinner timed out, reloading");
        navPromise = page.waitForNavigation({ waitUntil: ['domcontentloaded', 'networkidle2'] });
        await page.reload();
        await navPromise;
      }
    }
    console.log("check error");

    // 处理网络错误
    const networkError = await checkElementExist(
      page,
      ".list-group-item.list-group-item-action.bb-select-context__item.first.last"
    );
    if (networkError) {
      console.log("network error detected, reloading");
      navPromise = page.waitForNavigation({ waitUntil: ['domcontentloaded', 'networkidle2'] });
      await page.reload();
      await navPromise;
    }

    await waitForEl(page, localeSelector);
    locale = await page.$eval(
      localeSelector,
      (e) => (e as HTMLElement).innerText
    );
    dashboardSelector = locale === "VN" ? "aria/Tổng quan" : "aria/Dashboard";
    await waitForEl(page, dashboardSelector);
    return await checkElementExist(page, dashboardSelector);
  } catch (error) {
    console.error("Error in isLogin function:", error);
    return false;
  }
}

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