使用Puppeteer抓取URL返回Null，如何获取目标页面链接列表？

尝试从类名为.PropertyItem_propertyItem__Fla4I的元素中提取链接并生成数组，但返回结果全为Null，如何从https://landa.app/m/feed页面获取有效的链接列表？

输入代码

const puppeteer = require('puppeteer');

async function getLink(url) {
    const browser = await puppeteer.launch({headless: 'false'});
    const page = await browser.newPage();
    await page.goto(url);
    
    const linksRaw = await page.$$eval(
        '.PropertyItem_propertyItem__Fla4I',
        links => links.map(link => link.getAttribute('data-url'))
    );

    console.log(linksRaw)

    await browser.close();
}

getLink('https://landa.app/m/feed');

输出结果

[
  null, null, null, null,
  null, null, null, null,
  null, null, null, null,
  null, null, null, null,
  null, null, null
]

解决方案 #

1. 确认元素结构与属性 #

实际页面中，.PropertyItem_propertyItem__Fla4I元素本身并没有data-url属性，链接是嵌套在该元素内部的<a>标签中的，需要提取<a>标签的href属性。

2. 等待页面异步加载完成 #

page.goto()默认仅等待初始DOM加载完毕，而页面内容是通过AJAX异步渲染的，必须等待网络空闲或目标元素加载完成，否则提取时元素可能尚未渲染。

修正后的代码 #

const puppeteer = require('puppeteer');

async function getLink(url) {
    const browser = await puppeteer.launch({headless: 'false'});
    const page = await browser.newPage();
    // 等待网络空闲（仅存在2个以下网络连接时视为完成），确保异步内容加载完毕
    await page.goto(url, { waitUntil: 'networkidle2' });

    // 等待目标链接元素加载完成，避免DOM未就绪就执行提取
    await page.waitForSelector('.PropertyItem_propertyItem__Fla4I a');

    const linksRaw = await page.$$eval(
        '.PropertyItem_propertyItem__Fla4I a',
        links => links.map(link => link.getAttribute('href'))
    );

    // 过滤掉可能的空值，输出有效链接
    console.log(linksRaw.filter(link => link));

    await browser.close();
}

getLink('https://landa.app/m/feed');

关键调整说明 #

• waitUntil: 'networkidle2'：确保页面异步数据加载完成，避免过早提取未渲染的内容
• page.waitForSelector：明确等待目标<a>标签出现，保证提取时元素已存在于DOM中
• 调整选择器至.PropertyItem_propertyItem__Fla4I a：直接定位到承载链接的<a>标签，提取其实际存储链接的href属性

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