Невозможно напечатать ответ кукловода на консоли node.js

Question

Я очищаю веб-сайт для практики и использую Puppeteer для безголового браузера.Моя проблема - запись в консоли ответа кукловода на консоли node.js.

Я нацеливаюсь на родительский элемент в DOM для продуктов и получаю определенную информацию из каждого элемента.Используя Google Dev Tools, все мои querySelectors верны, и я могу напечатать нужные данные без проблем.Однако при попытке печати на моей консоли node.js я всегда получаю пустой массив в качестве ответа.

const puppeteer = require('puppeteer');



let scrape = async () => {

  const masterList = [];

  const browser = await puppeteer.launch({headless: true});
  const page = await browser.newPage();

  await page.goto('https://www.fschumacher.com/catalog/Wallcoverings?sid=0.07316907031133635');

  const result = await page.evaluate(() => {
    return document.querySelector('.search-results-parent').querySelectorAll('.product-preview');
  });


  [].forEach.call(result, (el) =>{
    let thumbnail = el.querySelector('.product-thumb')
                      .querySelector('a')
                      .querySelector('img')
                        .src;

    let product_info = el.querySelector('.product-info').querySelector('div');

    let product_name = product_info.querySelector('a').querySelector('div').innerText;

    let product_id = product_info.querySelector('.product-id');

    let product_color = product_id.querySelector('.product-color').innerText;
    let product_sku = product_id.querySelector('.product-sku').innerText;

    let product_price = product_info.querySelector('.product-price')
                                    .querySelector('span')
                                      .innerText;

    let whole = {
      thumbnail,
      product_name,
      product_color,
      product_sku,
      product_price
    };

    masterList.push(whole);

  });



  browser.close();

  return masterList;
};

scrape().then((res) => {
  console.log(res);
});

Я ожидаю, что данные, увиденные в Goggle Dev Tools, появятся на моей консоли node.js.

Answer 1

Проблема в том, что все, что вы запускаете после [].forEach.call(result, (el) =>{, выполняется в вашем процессе Node, а не в Chromium. Таким образом, такие вещи, как el.querySelector('.product-thumb'), не будут работать, поскольку в этот момент вы «отключены» от Chromium.

Хорошая новость заключается в том, что вы можете решить эту проблему, переместив больше кода в сторону Chromium:

const mainResult = await page.evaluate(() => {
    const masterList = [];
    var result = document.querySelector('.search-results-parent').querySelectorAll('.product-preview');

    [].forEach.call(result, (el) =>{
    let thumbnail = el.querySelector('.product-thumb')
                        .querySelector('a')
                        .querySelector('img')
                        .src;

    let product_info = el.querySelector('.product-info').querySelector('div');

    let product_name = product_info.querySelector('a').querySelector('div').innerText;

    let product_id = product_info.querySelector('.product-id');

    let product_color = product_id.querySelector('.product-color').innerText;
    let product_sku = product_id.querySelector('.product-sku').innerText;

    let product_price = product_info.querySelector('.product-price')
                                    .querySelector('span')
                                        .innerText;

    let whole = {
        thumbnail,
        product_name,
        product_color,
        product_sku,
        product_price
    };

    masterList.push(whole);

    });

    return masterList;
});
browser.close();  
return mainResult;