使用Puppeteer爬取动态网站返回空数组如何修复

返回空数组由三个Puppeteer爬取动态站点的常见问题共同导致：

• 选择器不稳定且存在语法错误：你使用的.fs-result-page-3sdl0h是站点接入的FastSimon搜索服务生成的动态类名，类名后缀的哈希值会随服务版本更新变动，根本不适合作为爬取选择器；同时这个选择器前多写了一个前置空格，会导致匹配逻辑失效，进一步提升匹配失败概率。
• 等待逻辑失效：waitUntil: 'networkidle2'只能判定全局网络请求空闲状态，而这个站点的商品列表是局部异步拉取渲染的，全局网络空闲时商品模块还在请求数据、渲染DOM，此时执行DOM查询拿到的要么是空节点列表，要么是还没填充内容的骨架容器。
• 自动化特征被检测：默认启动的Puppeteer会携带明确的自动化标识，被站点反爬规则识别后，不会返回真实的商品数据，只会返回空白的页面骨架。

• 替换所有不稳定的动态类选择器：放弃带随机哈希的fs-开头类名，改用站点主题自带的固定类名选择器，比如商品容器用.product-card，价格元素用.price，这类类名是主题硬编码的，不会随第三方服务变动。
• 增加显式元素等待逻辑：不用依赖networkidle2判断页面加载完成，改用page.waitForSelector等待目标价格元素真实渲染到DOM之后，再执行提取逻辑。
• 启动浏览器时注入反检测参数，隐藏Puppeteer的自动化特征，绕过基础反爬校验。
• 如果需要提取全量商品，额外增加页面自动滚动逻辑，触发商品列表的懒加载。

const puppeteer = require('puppeteer');

async function get401GamesPokemonPrices(){
    const browser = await puppeteer.launch({ 
        headless: false, // 调试阶段保持无头模式关闭，确认功能正常后可改为true
        args: [
            '--disable-blink-features=AutomationControlled',
            '--no-sandbox',
            '--disable-setuid-sandbox'
        ]
    });
    const page = await browser.newPage();
    // 注入脚本隐藏navigator.webdriver自动化标识
    await page.evaluateOnNewDocument(() => {
        Object.defineProperty(navigator, 'webdriver', { get: () => false });
    });
    await page.setViewport({ width: 1280, height: 926 });
    await page.goto("https://store.401games.ca/collections/pokemon-singles",{
        waitUntil: 'domcontentloaded',
        timeout: 60000
    });

    console.log("等待商品列表渲染...")
    // 显式等待价格元素加载，最长等待30秒
    await page.waitForSelector('.product-card .price', { timeout: 30000 });

    const productPrices = await page.evaluate(()=>{
        const productCards = document.querySelectorAll('.product-card');
        const priceList = [] 
        productCards.forEach(card => { 
            const priceEl = card.querySelector('.price');
            const priceText = priceEl?.innerText?.trim();
            if(priceText){
                priceList.push(priceText);
            }
        });
        return priceList
    })

    console.log("提取到的商品价格：", productPrices)
    await browser.close()
} 

get401GamesPokemonPrices();

注意：上述代码默认只提取首屏加载的商品价格，如果需要爬取列表内全部商品，需要在等待首屏加载完成后，循环滚动页面直到所有懒加载商品渲染完成，再执行提取逻辑。如果后续站点主题更新导致选择器失效，直接打开浏览器开发者工具选中目标元素，选择不带随机哈希后缀的固定类名/自定义属性替换即可。

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