如何使用Puppeteer点击PDF页面的下载按钮 排查元素无法识别问题

常见错误原因 #

• 新标签页未完成加载就执行元素查找：你在获取到tab3后直接调用点击方法，此时PDF页面还未完成渲染，下载按钮对应的DOM节点还未生成，自然会提示元素不存在。
• 硬编码标签页索引不可靠：browser.pages()返回的标签页顺序受打开速度、现有标签页数量影响，你认为新打开的是第三个标签页，实际运行时可能索引并不对应，甚至出现tab3为undefined的情况。
• PDF阅读器元素在Shadow DOM中：大部分浏览器的内置PDF预览器的UI元素都封装在Shadow DOM内部，普通的CSS选择器无法直接穿透Shadow DOM选中内部元素，你直接查找#download自然找不到对应节点。

修复方案 #

1. 正确捕获新打开的标签页 #

不要用索引获取标签页，改用监听popup事件的方式捕获新弹出的标签页，稳定性更高：

// 同时监听弹出事件和执行点击操作，避免时序问题
const [newPdfTab] = await Promise.all([
  page.waitForEvent('popup'),
  page.click('你触发新标签打开的元素选择器')
])
// 等待PDF页面完全加载
await newPdfTab.waitForLoadState('networkidle')

2. 等待元素出现后再点击 #

如果是普通网页的下载按钮，先等待元素加载完成再执行点击：

const downloadBtn = await newPdfTab.waitForSelector('#download', {
  timeout: 5000 // 设置超时时间，避免无限等待
})
await downloadBtn.click()

3. 适配内置PDF阅读器的Shadow DOM场景 #

如果你要点击的是Chrome等浏览器内置PDF预览器的下载按钮，需要先穿透Shadow DOM再查找元素：

// 先获取PDF阅读器的根节点
const pdfViewer = await newPdfTab.waitForSelector('pdf-viewer')
// 获取Shadow Root
const shadowRoot = await pdfViewer.evaluateHandle(el => el.shadowRoot)
// 在Shadow DOM中查找下载按钮
const downloadBtn = await shadowRoot.waitForSelector('#download')
await downloadBtn.click()

替代方案 #

如果你的最终目的是获取PDF文件，还可以直接调用newPdfTab.pdf()方法直接导出当前页面的PDF内容，比模拟点击下载按钮的稳定性更高。

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