在Puppeteer瀏覽器中，點選Cookie接受按鈕後的意外關閉行為

Question

我正在嘗試使用node.js和puppeteer爬取一個網站以獲取實時足球信息，但是在console.log("trying to select team element")之後，我的瀏覽器立即關閉。

const puppeteer = require("puppeteer");

async function openPage() {
  const browser = await puppeteer.launch( {headless: true} );
  const page = await browser.newPage();
  
  await page.setViewport({ width: 1000, height: 926 });
  await page.goto("https://www.livescore.com/en/");

  // 接受cookies
  const button = await page.waitForSelector('#onetrust-accept-btn-handler');
  if (button) {
    await button.click();
    console.log("clicked cookie button");
  };
  
  return page;
}

async function scrapeData(page) {
  let content = [];

  // 取得比賽元素
  let elements = await page.waitForSelector(".Ip")
  console.log("trying to select team element")


  for (let i=0; i < elements.length; i ) {
    let homeTeamElement = await elements[i].$(".Ip")
    if (homeTeamElement) {
      const homeTeamText = await homeTeamElement.evaluate(node => node.textContent);
      content.push(homeTeamText);
    }
  };

  return content;
};

(async () => {
  const page = await openPage();
  const dataScraped = await scrapeData(page);
  console.log(dataScraped)

  await page.browser().close();
})();

對於為什麼會這樣以及對我的程式碼的進一步批評，歡迎提出任何想法！

Answer 1

await page.waitForSelector(".Ip")只回傳一個元素，而不是一個數組，所以無法循環遍歷。應該有一個清晰的錯誤訊息來解釋這個問題。相反，可以使用page.$$eval（或者如果你想嘗試最新的定位器 API）來提取資料。

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());

註：

• 關閉cookie橫幅對於爬取來說並不是必要的，但如果你使用它，沒有必要檢查waitForSelector的回傳值。它保證是該元素，否則如果在規定時間內找不到它，它會拋出異常。
• await elements[i].$(".Ip")不會幫助你存取任何內容，因為在你已經持有的.Ip元素內部沒有.Ip。
• 避免使用ElementHandles，它們速度慢、不可靠且冗長。