Puppeteer如何点击无链接submit按钮打开新标签页并爬取页面内容

DevOps 小满

2026-10-13

你可以通过修改表单提交目标+监听Puppeteer新开标签事件实现需求，完整实现逻辑如下：

核心思路

提交按钮属于表单元素，只需修改对应表单的target属性为_blank，即可让表单提交结果在新标签页打开，之后通过Puppeteer的popup事件捕获新标签页，爬取完成后直接关闭即可。

完整代码示例

// 找到提交按钮所属的表单，设置提交后开新标签
await page.evaluate(() => {
  const submitBtn = document.querySelector('#find_button');
  const targetForm = submitBtn.closest('form');
  // 临时修改target属性，后续可以改回原值不影响原页面逻辑
  if (targetForm) targetForm.setAttribute('target', '_blank');
});

// 监听新标签页弹出事件
const newPagePromise = new Promise(resolve => browser.once('popup', resolve));

// 点击提交按钮
try {
  await page.click('#find_button');
} catch (error) {
  console.error('提交按钮点击失败：', error);
  return;
}

// 等待新标签页加载完成
const newPage = await newPagePromise;
// 等待页面网络空闲，确保内容完全加载，可根据页面加载速度调整超时时间
await newPage.waitForLoadState('networkidle2', { timeout: 15000 });

// 此处替换为你自己的爬取逻辑，示例为获取整页HTML内容
const scrapedContent = await newPage.content();
// 也可指定爬取特定元素，如：const result = await newPage.$eval('.result-list', el => el.innerText);

// 爬取完成后关闭新标签页
await newPage.close();

// 后续处理爬取到的内容即可
console.log('爬取内容长度：', scrapedContent.length);