Puppeteer同平台站点waitForNavigation触发两类报错问题

两个同属Dealer Inspire平台的站点前端加载逻辑存在细微差异，原有代码存在典型的Puppeteer竞态问题：

• page.goto() 本身会等待页面初始加载完成，Naperville站点在初始加载完成后还会触发一次客户端路由级别的二次导航/重渲染，此时如果直接执行DOM查询操作，会因为页面执行上下文被销毁抛出Error: Execution context was destroyed, most likely because of a navigation.错误，必须等待二次导航结束才能操作DOM
• Cedar Park站点在page.goto()完成初始加载后不存在二次导航动作，此时串行调用page.waitForNavigation()会因为等不到新的导航事件，直接触发超时错误
• 原有串行执行page.goto()再调用page.waitForNavigation()的写法本身就存在设计缺陷：如果二次导航在goto执行结束前就完成，后续的waitForNavigation会永久等待新导航事件触发超时；如果二次导航在goto执行结束后才发生，不等待就操作DOM就会触发上下文销毁错误。

不要通过硬编码是否保留waitForNavigation适配单站点，从逻辑上消除竞态，同时兼容两种加载逻辑：

• 用Promise.all同时注册导航监听和发起页面跳转，避免错过导航事件
• 给二次导航等待设置短超时+错误捕获，兜底适配无二次导航的场景
• 放弃用「导航完成」作为页面可操作的判断标准，直接等待需要读取的目标DOM元素加载完成，这是适配不同渲染逻辑站点最稳定的方案

修正后的index.js核心代码如下：

var link = await scraperFunctions.getInventoryLink(page, category);
console.log("Found inventory link:", link);

// 并行发起跳转和导航监听，消除竞态
await Promise.all([
  page.goto(link, {
    waitUntil: 'domcontentloaded',
    timeout: 30000
  }),
  // 等待可能存在的二次导航，5秒超时兜底，无二次导航时静默跳过
  page.waitForNavigation({
    waitUntil: 'domcontentloaded',
    timeout: 5000
  }).catch(() => {})
])

// 直接等待目标元素渲染完成，再执行DOM读取
await page.waitForSelector("span#results-title", { timeout: 30000 })
var postedVehicles = await scraperFunctions.postedVehicles(page, category);
console.log(postedVehicles, ": NUM VEHICLES");

postedVehicles.js逻辑不需要修改，即可同时在两个站点正常运行。

• 客户端渲染站点的导航完成事件不代表业务DOM已经渲染完成，直接等待目标元素出现的稳定性远高于等待导航事件
• Puppeteer官方文档明确不推荐串行调用goto+waitForNavigation的写法，所有需要等待跳转后导航的场景，都应该用Promise.all并行注册监听，避免出现事件监听错过导致的超时问题

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