Dalam pelayar Puppeteer, tingkah laku penutupan yang tidak dijangka selepas mengklik butang Terima Kuki

Question

Saya cuba menggunakan node.js dan puppeteer untuk merangkak tapak web untuk maklumat bola sepak masa nyata, tetapi selepas console.log("cuba memilih elemen pasukan"), penyemak imbas saya ditutup serta-merta.

const puppeteer = memerlukan("puppeteer");

fungsi async openPage() {
  pelayar const = menunggu puppeteer.launch( {tanpa kepala: benar} );
  halaman const = tunggu browser.newPage();
  
  tunggu page.setViewport({ lebar: 1000, tinggi: 926 });
  tunggu page.goto("https://www.livescore.com/en/");

  //Terima kuki
  butang const = tunggu page.waitForSelector('#onetrust-accept-btn-handler');
  jika (butang) {
    tunggu butang.klik();
    console.log("butang kuki diklik");
  };
  
  kembali halaman;
}

fungsi async scrapeData(halaman) {
  biarkan kandungan = [];

  // Dapatkan elemen pertandingan
  biarkan elemen = menunggu halaman.waitForSelector(".Ip")
  console.log("cuba memilih elemen pasukan")


  untuk (biar i=0; i < elemen.panjang; i++) {
    biarkan homeTeamElement = menunggu elemen[i].$(".Ip")
    jika (homeTeamElement) {
      const homeTeamText = menunggu homeTeamElement.evaluate(node ​​=> node.textContent);
      content.push(homeTeamText);
    }
  };

  mengembalikan kandungan;
};

(async () => {
  halaman const = tunggu openPage();
  const dataScraped = menunggu scrapeData(halaman);
  console.log(dataScraped)

  tunggu page.browser().close();
})();
Sebarang idea tentang mengapa ini berlaku dan kritikan lanjut terhadap kod saya adalah dialu-alukan! 
            

Answer 1

await page.waitForSelector(".Ip")只返回一个元素，而不是一个数组，所以无法循环遍历。应该有一个清晰的错误消息来解释这个问题。相反，可以使用page.$$eval (atau jika anda ingin mencuba Locator API) terkini untuk mengekstrak data.

const puppeteer = require("puppeteer"); // ^21.0.2

const url = "";

let browser;
(async () => {
  browser = await puppeteer.launch();
  const [page] = await browser.pages();
  await page.setViewport({width: 1000, height: 926});
  await page.goto(url, {waitUntil: "domcontentloaded"});

  // not really necessary
  const button = await page.waitForSelector("#onetrust-accept-btn-handler");
  await button.click();

  await page.waitForSelector(".Ip");
  const content = await page.$$eval(".Ip", els =>
    els.map(e => {
      const text = id =>
        e.querySelector(`[id*=${id}]`).textContent.trim();
      return {
        time: text("status-or-time"),
        home: text("home-team-name"),
        away: text("away-team-name"),
        homeTeamScore: +text("home-team-score"),
        awaitTeamScore: +text("away-team-score"),
      };
    })
  );
  console.log(content);
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

Nota:

• Mematikan sepanduk cookie tidak perlu untuk merangkak, tetapi jika anda menggunakannya, tidak perlu menyemak nilai pulangan waitForSelector. Ia dijamin sebagai elemen, jika tidak, ia akan membuang pengecualian jika ia tidak dijumpai dalam masa yang ditentukan.
• await elements[i].$(".Ip")不会帮助你访问任何内容，因为在你已经持有的.Ip元素内部没有.Ip.
• Elakkan menggunakan ElementHandles, ia lambat, tidak boleh dipercayai dan bertele-tele.