Кукольник: page.evaluate кидает TypeError: невозможно прочитать innerText of null

Question

Я пытаюсь научиться кукловоду и хотел почистить эту веб-страницу ММА по номеру https://www.tapology.com/regions.

Я хотел очистить все названия регионов, такие как "США МИДВЕСТ, СЕВЕРО-ВОСТОК, США ЮГО-ЗАПАД ... и т. Д."

Я пытался использовать await page.waitForSelector, чтобы дождаться загрузки селекторовв но страница просто зависает.

Я также пытался использовать innerHTML, но результат тот же.

Пробовал использовать страницу. $$ eval (selector, pageFunction [, ... args]), новозвращает пустой массив.

Попытка с использованием точного селектора CSS из инструментов разработчика Google, но безуспешно.Пробовал различные комбинации выбора CSS, но я до сих пор не могу почистить тексты h4.

const puppeteer = require('puppeteer');
const REGIONS_URL = 'https://www.tapology.com/regions';

async function getRegionsNames(url) {
    const browser= await puppeteer.launch();
    const page= await browser.newPage();

  await (async ()=>{
  const MIDWEST_SELECTOR = "#content > div.regionIndex > h4:nth- child(1) > a";
  //await page.waitForSelector(MIDWEST_SELECTOR);  //hangs if used

  const mid = await page.evaluate((sel)=>{         //trying to grab 'MIDWEST'
    return document.querySelector(sel).innerText;
  },MIDWEST_SELECTOR);
 console.log(mid);      //throws error
 await browser.close();
}
getRegionsNames(REGIONS_URL);

(узел: 23646) UnhandledPromiseRejectionWarning: Ошибка: Ошибка оценки: Ошибка типа: Ошибка чтения свойства 'innerText' из null

Answer 1

попробуйте это:

app.get('/testing',function(req,res){
    (async () => {

        const browser = await puppeteer.launch({
            headless: true
        });
        const page = await browser.newPage();
        await page.goto('https://www.tapology.com/regions',{waitUntil: 'domcontentloaded'});
        const example  = await page.$('.regionIndex');
        const scrapedData = await page.evaluate(() =>
        Array.from(document.querySelectorAll('h4 a'))
          .map(link => ({
            title: link.innerHTML,
            link: link.getAttribute('href')
          }))
      )
      console.log('scrapedData',scrapedData);
        await page.close();
        await browser.close();
        return res.send(scrapedData);

    })();
});

вы получите:

[
{
title: "US Midwest",
link: "/regions/us-midwest"
},
{
title: "US Northeast",
link: "/regions/us-northeast"
},
{
title: "US Southeast",
link: "/regions/us-southeast"
},
{
title: "US Southwest",
link: "/regions/us-southwest"
},
{
title: "US West",
link: "/regions/us-west"
},
{
title: "Asia Central",
link: "/regions/central-asia"
},
{
title: "Canada",
link: "/regions/canada"
},
{
title: "Europe Balkans",
link: "/regions/europe-balkans"
},
{
title: "Europe Eastern",
link: "/regions/europe-eastern"
},
{
title: "Europe Western",
link: "/regions/western-europe"
},
{
title: "Latin America",
link: "/regions/latin-america"
},
{
title: "Middle East",
link: "/regions/middle-east"
}
]