使用Puppeteer(Firefox)访问Twitter后代码无法执行的解决方法

问题根源 #

Twitter作为动态单页应用，页面加载完成后会持续发起实时数据请求（比如推文流更新），而Firefox版本的Puppeteer对waitUntil参数的处理逻辑和Chromium存在差异——即使设置了domcontentloaded或networkidle2，也可能因为页面持续的网络活动，导致page.goto一直处于等待状态，无法执行后续代码。

可行解决办法 #

1. 等待页面核心元素加载完成（最推荐）

放弃依赖page.goto的waitUntil，转而等待Twitter首页的标志性元素出现，直接判断页面已可用：

const browser = await puppeteer.launch({
  product: 'firefox',
  headless: false,
  userDataDir: './dataDir' 
});
const page = await browser.newPage();
await page.setDefaultNavigationTimeout(0); 
// 发起请求，仅等待DOM加载完成
await page.goto('https://twitter.com/home', { waitUntil: 'domcontentloaded' });
// 等待首页核心内容栏加载完成，超时时间设为30秒
await page.waitForSelector('[data-testid="primaryColumn"]', { timeout: 30000 });
console.log("hi");

2. 调整waitUntil为多条件组合

尝试同时监听domcontentloaded和networkidle0的组合，给页面足够时间完成关键资源加载：

const browser = await puppeteer.launch({
  product: 'firefox',
  headless: false,
  userDataDir: './dataDir' 
});
const page = await browser.newPage();
await page.setDefaultNavigationTimeout(60000); // 延长全局超时到60秒

await page.goto('https://twitter.com/home', { 
  waitUntil: ['domcontentloaded', 'networkidle0']
});
console.log("hi");

3. 拦截非必要资源，减少网络阻塞

拦截图片、视频、字体等非核心资源，减少页面加载时的网络请求数量，避免持续请求导致page.goto无限等待：

const browser = await puppeteer.launch({
  product: 'firefox',
  headless: false,
  userDataDir: './dataDir' 
});
const page = await browser.newPage();
await page.setDefaultNavigationTimeout(0); 

// 启用请求拦截
await page.setRequestInterception(true);
page.on('request', (req) => {
  const blockedTypes = ['image', 'media', 'font'];
  if (blockedTypes.includes(req.resourceType())) {
    req.abort();
  } else {
    req.continue();
  }
});

await page.goto('https://twitter.com/home');
console.log("hi");

4. 确保Puppeteer与Firefox版本兼容

旧版本的Puppeteer和Firefox可能存在兼容性bug，更新到最新稳定版：

npm install puppeteer@latest

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