使用Puppeteer无法定位点击Thingiverse下载链接问题求助

问题背景 #

• 实现目标：开发Thingiverse平台多文件自动化批量下载功能
• 故障现象：选取测试模型后无法准确定位目标下载链接，无法完成点击及后续下载操作
• 原测试代码：

import puppeteer from 'puppeteer';

async function main() {
    const browser = await puppeteer.launch({
        headless: true,
    });

    const page = await browser.newPage();
    const response = await page.goto('https://www.thingiverse.com/thing:2033856/files');
    const buttons = await page.$x(`//a[contains(text(), 'Download')]`);
    if(buttons.length > 0){
        console.log(buttons.length);
    }  else {
        console.log('no buttons'); 
    }
    await wait(5000);
    await browser.close();
    return 'Finish';
}
async function wait(time: number) {
    return new Promise(function (resolve) {
        setTimeout(resolve, time);
    });
}

function start() {
    main()
        .then((test) => console.log('DONE'))
        .catch((reason) => console.log('Error: ', reason));
}

start();

• 参考截图：
  • 下载页面：
  • 运行结果：

故障原因 #

1. 未等待页面动态渲染完成就执行元素查找：Thingiverse是React单页应用，文件列表、下载按钮均为接口返回数据后前端动态渲染，原代码在页面跳转后立刻查询DOM，此时下载按钮还未挂载到DOM树。
2. XPath写法错误：原写法contains(text(), 'Download')只能匹配a标签直接子文本节点，Thingiverse的Download文本嵌套在按钮内部的子span标签中，该写法无法匹配到对应元素。
3. 无头浏览器默认特征被反爬拦截：默认启动的Puppeteer无头模式请求头、浏览器特征存在明显标识，Thingiverse会拦截这类请求，不返回完整页面内容。

修复方案 #

直接替换为以下可运行代码：

import puppeteer from 'puppeteer';

async function wait(time) {
    return new Promise(function (resolve) {
        setTimeout(resolve, time);
    });
}

async function main() {
    const browser = await puppeteer.launch({
        headless: false, // 调试阶段关闭无头模式，确认功能正常后再开启
        defaultViewport: null,
        args: ['--start-maximized']
    });

    const page = await browser.newPage();
    // 配置正常浏览器UA，绕过基础反爬检测
    await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36');
    
    await page.goto('https://www.thingiverse.com/thing:2033856/files', {
        waitUntil: 'networkidle2' // 等待网络请求空闲，确保动态资源加载完成
    });

    // 修正XPath，等待下载按钮渲染完成后再获取元素
    await page.waitForXPath(`//a[contains(., 'Download')]`, {timeout: 10000});
    const buttons = await page.$x(`//a[contains(., 'Download')]`);
    
    if(buttons.length > 0){
        console.log(`共找到${buttons.length}个下载按钮`);
        // 批量下载逻辑：逐个点击按钮，每次点击后加等待避免触发频率限制
        for (const btn of buttons) {
            await btn.click();
            await wait(2000);
        }
    }  else {
        console.log('未匹配到下载按钮'); 
    }
    await wait(5000);
    await browser.close();
    return 'Finish';
}

function start() {
    main()
        .then(() => console.log('DONE'))
        .catch((reason) => console.log('Error: ', reason));
}

start();

优化提示 #

• 开启无头模式仍被拦截时，可搭配puppeteer-extra的stealth插件隐藏自动化浏览器特征
• 批量下载建议设置1-2秒的点击间隔，频率过高容易触发平台IP封禁
• 需要指定文件下载保存路径时，在浏览器启动配置中添加对应downloadPath参数即可

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