【问题标题】:Puppeteer not able to scrape dynamically generated contentPuppeteer 无法抓取动态生成的内容
【发布时间】:2025-12-30 03:10:16
【问题描述】:

我有以下元素,我想从中提取经度和纬度值:

<span itemprop="geo" itemscope="" itemtype="http://schema.org/GeoCoordinates"> <meta itemprop="latitude" content="-25.5170846"> <meta itemprop="longitude" content="-49.1831061"> </span>.

这就是通过谷歌浏览器访问代码时显示的方式,但是当我尝试使用 Puppeteer 抓取它时,我得到的是以下内容: &lt;script type="jsv/71_"&gt;&lt;/script&gt;。 我认为这应该是一些动态生成的内容。有没有办法呈现这个标签并从这个元标签中提取内容属性? 我尝试使用:

await page.waitForSelector('[itemprop=geo]');

但等待选择器时出现超时错误。

`const page = await browser.newPage();

// await page.setViewport({
//   width: 1920,
//   height: 1080
// });

await page.goto(url, {
  waitUntil: 'networkidle2',
  timeout: 9000000
});
console.log(`Capturando dados da página ${url}`);
await page.waitForSelector('[itemprop=geo]');


const imoveisOnPage = await page.evaluate(() => 
  Array.from(document.querySelectorAll("article.minificha")).map(ficha => {
    const site = document.location.hostname;
    const elementoTitulo = ficha.querySelector('[itemprop="streetAddress"]');
    const elementoCidade = ficha.querySelector('[itemprop="addressLocality"]');
    const elementoEstado = ficha.querySelector('[itemprop="addressRegion"]');
    const elementoBairro = ficha.querySelector('h2 strong');
    const elementoQuartos = ficha.querySelector('li.icone-quartos');//.textContent.trim();
    const elementoPreco = ficha.querySelector('.preco strong');
    const elementoArea = ficha.querySelector('li.icone-area');
    const elementoDescricao = ficha.querySelector('.endereco p');
    const elementoAnuncioUrl = ficha.querySelector('figure > div > a');
    const elementoAnunciante = ficha.querySelector('.anunciante span');
    const elementoLatitude = ficha.querySelector('[itemprop=geo]').children[0].attributes["content"].nodeValue
    const elementoLongitude = ficha.querySelector('[itemprop=geo]').children[1].attributes["content"].nodeValue
    const elementoId = ficha.getAttribute('data-id');


    const resumo = JSON.parse(ficha.getAttribute('data-clickstream'));
    const fotosElement = ficha.querySelector('.carrossel-container').getAttribute('data-fotos');
    const fotosArray = fotosElement.replace('[', '').replace(']', '').split(',');

    let bairro = (elementoBairro !== null) ? elementoBairro.textContent.trim() : resumo.address[3];
    let quartos = (elementoQuartos !== null) ? elementoQuartos.textContent.trim() : resumo.bedrooms;
    let preco = (elementoPreco !== null) ? elementoPreco.textContent.trim() : resumo.salePrice;
    let logradouro = (elementoTitulo !== null) ? elementoTitulo.textContent.trim() : resumo.address[4];
    let cidade = (elementoCidade !== null) ? elementoCidade.textContent.trim() : resumo.address[2];
    let estado = (elementoEstado !== null) ? elementoEstado.textContent.trim() : resumo.address[1];
    let area = (elementoArea !== null) ? elementoArea.textContent.trim() : resumo.areas[0];
    let cep = resumo.address[6] || '';
    let numero = resumo.address[5] || '';
    let descricao = (elementoDescricao !== null) ? elementoDescricao.textContent.trim() : '';
    let fotos = fotosArray;
    let anuncioUrl = (elementoAnuncioUrl !== null) ? elementoAnuncioUrl.href : '';
    let tipo = resumo.unitTypes[0];
    let anunciante = elementoAnunciante.textContent.trim();
    let titulo = `${resumo.unitTypes[0]} ${cidade} - ${estado}`;
    let longitude = (elementoLongitude !== null) ? elementoLongitude.content : '';
    let latitude = (elementoLatitude !== null) ? elementoLatitude.content : '';

    let location = {
      type: 'Point',
      coordinates: [longitude, latitude]
    }

    return {
      titulo, tipo, quartos, preco, logradouro, numero,
      cidade, bairro, estado, area, cep, descricao,
      fotos, resumo, site, anuncioUrl, location
    }
  })

);
await page.close();`

【问题讨论】:

  • 你的代码是什么样的?
  • 我用我正在使用的简化代码编辑了这个问题。
  • 这看起来不像是有效的代码。您在某处缺少page.evaluate。哪个变量包含“”信息?
  • @ThomasDondorf 我试图简化代码并忘记了一些部分,用脚本的重要部分进行了编辑。该代码不需要标签脚本,但它需要一个标签跨度,其中脚本标签正在运行。

标签: node.js web-scraping puppeteer


【解决方案1】:

&lt;span itemprop="geo"&gt;...&lt;/span&gt; 中似乎有一个脚本标签。此外,您希望等到元标记真正出现。

代码如下:

// Wait for meta tags to appear
await page.waitForSelector('[itemprop=geo] meta');

// query both meta elements
const metaElements = ficha.querySelectorAll('[itemprop=geo] meta');

const elementoLatitude = metaElements[0].attributes["content"].nodeValue;
const elementoLongitude = metaElements[1].attributes["content"].nodeValue;

【讨论】:

  • 感谢您的帮助,但它不起作用。标签跨度未在页面上呈现,这就是我无法获取内容的原因。我认为标签 负责渲染我想要的内容,但是当我通过 puppeteer 访问时,它不会被渲染。
  • 我明白了,我为此更新了答案。您可以为此使用 waitForSelector。