QuerySelector 在控制台中返回一个空选择，而在浏览器端它包含元素

Question

为了学习使用 puppeteer 进行网络抓取，我开始了一个小项目，旨在从国家电力供应商的网站上提取停电计划。为此，我必须手动更改区域，然后检索 Outage 的节目列表。我在浏览器端使用的 QuerySelector 请求看起来完全没问题，因为它毫无错误地包含了所有显示的中断。但是当我在服务器端使用它时，我收到一个空列表。这是我的代码，可以在其中找到网站的url。提前致谢！

const puppeteer = require('puppeteer');

(async() => {
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
await page.goto('https://alert.eneo.cm/', { waitUntil: 'networkidle0' });

await page.evaluate(() => {
    var region = "Littoral";
    var j = $('#regions option:contains(' + region + ')');
    $('#regions').val(j.val()).change();
});

const outages = await page.evaluate(() => {

    const elements = document.querySelectorAll("#contentdata .outage");
    return elements;
});
console.log(outages);

})();

Answer 1

我看到您要抓取的页面上有停电列表。以下是如何获取第一个 div

的停电数据

(async()=>{
    let browser = await puppeteer.launch();
    let page = await browser.newPage();
    await page.goto('https://alert.eneo.cm/', { waitUntil: 'networkidle0' });
    await page.select('select[name="regions"]', '5')
    const outageData = await page.evaluate( async () => {
      let quartier = document.querySelector('div[class="quartier"]').innerText;
      let ville = document.querySelector('div[class="ville"]').innerText;
      let observations = document.querySelector('div[class="observations"]').innerText;
      let dateAndTime= document.querySelector('div[class="prog_date"]').innerText;
      return {quartier, ville, observations, dateAndTime}
    });
    await browser.close();
    console.log(outageData);
})();

QuerySelector 在控制台中返回一个空选择，而在浏览器端它包含元素

QuerySelector's returning an empty selection in console while on browser side it contains elements

node.js

puppeteer