Кукольник очищает динамический контент

Я пытаюсь получить данные из отчета веб-страницы Looker Studio с помощью Puppeteer в Node.js, но сталкиваюсь с проблемами, поскольку отчет является динамическим. Когда я получаю данные, тело пусто. Вот

import puppeteer from 'puppeteer';

async function fetchData() {
  try {
    const url = 'https://lookerstudio.google.com/u/0/reporting/e36054dd-ffc0-4ef4-b8ab-4d10f7ab4cda/page/wmP0D';
    const options = {
      args: [
        '--no-sandbox',
        '--disable-setuid-sandbox',
        '--disable-dev-shm-usage',
        '--disable-accelerated-2d-canvas',
        '--no-first-run',
        '--no-zygote',
        '--single-process',
        '--disable-gpu'
      ],
      headless: true
    };
    const browser = await puppeteer.launch(options);
    const page = await browser.newPage();

    await page.setUserAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36');
    await page.setViewport({width: 1920, height: 1080});
    await page.setRequestInterception(true);
    page.on('request', (req) => {
      if (req.resourceType() === 'stylesheet' || req.resourceType() === 'font' || req.resourceType() === 'image') {
        req.abort();
      } else {
        req.continue();
      }
    });

    await page.goto(url, {waitUntil: 'networkidle0'});

    await page.waitForSelector('.looker-report', { timeout: 60000 });

    const text = await page.evaluate(() => {
      return document.body.innerText;
    });

    console.info(text);  // This logs an empty string

    await page.close();
    await browser.close();
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData();

Проблема, с которой я столкнулся, заключается в том, что текст всегда пуст, хотя я вижу данные, когда открываю URL-адрес в браузере. Как я могу изменить свой скрипт Puppeteer, чтобы успешно очищать динамически загружаемый контент из этого отчета Looker Studio?

Любая помощь или руководство будут очень признательны. Спасибо!

Я пробовал:

  1. Ожидание селектора .looker-report
  2. Использование networkidle0 в качестве условия ожидания
  3. Установка более длительного тайм-аута

Что я хочу сделать: если вы откроете ссылку, на странице есть таблица, я пытаюсь получить строки таблицы. Первые несколько строк таблицы.

Однако ни один из этих подходов не сработал. Кажется, страница загружает свое содержимое динамически, и я не знаю, как захватить эти данные.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
64
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Это может быть связано с несколькими причинами, главным образом из-за конфигурации меньшего тайм-аута. Эту проблему можно решить, увеличив период ожидания, пока определенная страница не загрузит свое содержимое полностью. Во-вторых, вместо того, чтобы ждать элемента .looker-report, определите только то, что нужно дождаться, пока данные не будут отображены или извлечены после успешного завершения, только извлеките данные. Наконец, вы можете использовать page.setRequestInterception(true), чтобы дождаться явного завершения определенных операций/действий.

Обратитесь к приведенному ниже коду для вышеупомянутых модификаций:

import puppeteer from 'puppeteer';

async function fetchData() {
  try {
    const url = 'https://lookerstudio.google.com/u/0/reporting/e36054dd-ffc0-4ef4-b8ab-4d10f7ab4cda/page/wmP0D';
    const options = {
      args: [
        '--no-sandbox',
        '--disable-setuid-sandbox',
        '--disable-dev-shm-usage',
        '--disable-accelerated-2d-canvas',
        '--no-first-run',
        '--no-zygote',
        '--single-process',
        '--disable-gpu'
      ],
      headless: true
    };
    const browser = await puppeteer.launch(options);
    const page = await browser.newPage();

    await page.setUserAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36');
    await page.setViewport({ width: 1920, height: 1080 });


    await page.setRequestInterception(true);     // Introduce Intercept network requests
    page.on('request', (req) => {
      if (req.resourceType() === 'stylesheet' || req.resourceType() === 'font' || req.resourceType() === 'image') {
        req.abort();
      } else {
        req.continue();
      }
    });

    await page.goto(url, { waitUntil: 'networkidle0', timeout: 60000 });

    
    await page.waitForSelector('.looker-report', { timeout: 60000 }); // Wait for a specific DOM element to appear and rendered

    
    await page.waitForFunction(() => { // Wait for a custom condition or specific data to appear    
    const dataElement = document.querySelector('.data-element');  //  Wait until a .data element is populated
      return dataElement && dataElement.textContent.trim() !== '';
    }, { timeout: 60000 });

    const text = await page.evaluate(() => {
      return document.body.innerText;
    });
    console.info(text);
    await browser.close();
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData();

Надеюсь, поможет :-)

Превышено время ожидания навигации 60000 мс. Вероятно, контент не загружается

chenzen 14.07.2024 21:44
Ответ принят как подходящий

Я просмотрел возвращенный документ и не увидел элемента .looker-report. Я покопался и обнаружил, что в таблице есть класс table, так что я жду этого.

import puppeteer from 'puppeteer';

async function fetchData() {
  try {
    const url = 'https://lookerstudio.google.com/u/0/reporting/e36054dd-ffc0-4ef4-b8ab-4d10f7ab4cda/page/wmP0D';
    const options = {
      args: [
        '--no-sandbox',
        '--disable-setuid-sandbox',
        '--disable-dev-shm-usage',
        '--disable-accelerated-2d-canvas',
        '--no-first-run',
        '--no-zygote',
        '--single-process',
        '--disable-gpu'
      ],
      // Show the browser window.
      headless: false
    };
    const browser = await puppeteer.launch(options);
    const page = await browser.newPage();

    await page.setUserAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36');
    await page.setViewport({width: 1920, height: 1080});
    await page.setRequestInterception(true);
    page.on('request', (req) => {
      if (req.resourceType() === 'stylesheet' || req.resourceType() === 'font' || req.resourceType() === 'image') {
        req.abort();
      } else {
        req.continue();
      }
    });

    // Use networkidle2 rather than networkidle0.
    await page.goto(url, {waitUntil: 'networkidle2'});

    await page.waitForSelector('.table', { timeout: 60000 });

    const text = await page.evaluate(() => {
      return document.body.innerText;
    });

    console.info(text);

    await page.close();
    await browser.close();
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData();

Выход:

DLMM Max Fees Opportunities
Reset
Share
arrow_drop_down
DLMM Max Fees Opportunities
Pair Name
DEX
Meteora
Bin Step
TVL
FDV
24hr Changes
Max 1d Fees
Max 1d Fees / TVL
▼
Dog-SOL
400
5.3K
794.4K
-0.46%
$38,745
736.31%
FIST-SOL
80
2.2K
140.7K
-0.92%
$9,527
425.47%
BOB-SOL
80
4.8K
1.6M
4.66%
$20,169
417.32%
EAR-SOL
200
4.5K
3.7M
-0.81%
$3,732
82.10%
KENZO-SOL
100
2.4K
336.1K
0.75%
$1,839
78.08%
EAR-SOL
400
107.5K
3.7M
-0.82%
$76,579
71.26%
SARB-BOB
400
4.5K
399.1K
0.06%
$3,118
68.69%
SIGMA-SOL
250
1.7K
1.9M
0.10%
$977
56.83%
EAR-SOL
80
6.2K
3.9M
-0.82%
$2,958
47.66%
MOB-SOL
100
50.9K
5.2M
0.82%
$21,076
41.42%
1 - 50 / 97
<
>
Data Last Updated: 15/07/2024 06:08:33
Privacy Policy

Кажется, вы не получили всего ожидаемого контента, но, по крайней мере, получили что-то!

Эй, работает отлично. Он не показывался целиком, потому что вы использовали внутренний текст. Я просто настроил функцию оценки, чтобы она перебирала строки таблицы и извлекала данные. Большое спасибо.

chenzen 15.07.2024 20:39

Другие вопросы по теме