為什么我的 querySelector 可以在 Chrome 中工作，但不能在 VS Code 中工作？

Question

Node 新手，所以這可能是一個對 Node 理解不夠好的問題，但基本上我正在嘗試使用 Puppeteer 在頁面上抓取標題列表。 當我在 Chrome 控制台中運行查詢時，我會得到一個標題列表。 哇！

Array.from(document.querySelectorAll('div.description h3.title')).map(partner => partner.innerText)

(12) ["Jellyfish", "MightyHive", "Adswerve", "55 | fifty-five", "E-Nor", "LiveArea", "Merkle Inc.", "Publicis Sapient", "Acceleration Precision", "Resolute Digital", "PMG", "Kepler Group"]

但是當我在 VS Code 中使用 Node.js 測試它時，我得到一個空數組

const browser = await puppeteer.launch();
  const page = await browser.newPage();
  const url =
    "https://marketingplatform.google.com/about/partners/find-a-partner?utm_source=marketingplatform.google.com&utm_medium=et&utm_campaign=marketingplatform.google.com%2Fabout%2F";
  await page.goto(url);

  const titles = await page.evaluate(() => 
    Array.from(document.querySelectorAll("h3.title"))
      .map(partner => partner.innerText.trim())
  )

$ Node google-test.js
[]

我已經嘗試進一步指定選擇器，即使使用檢查“復制選擇器”快捷方式以獲得精確的 select 但仍然得到一個空數組。

如果我更模糊，例如選擇“h2”，我會得到一個結果，但是一旦我進一步指定它對我來說就結束了。 是什么賦予了？

Answer 1

因為網站在使用 XHR 加載頁面后加載內容，所以只需添加以下內容：-

await page.waitFor('h3.title'); 

這會強制頁面等到 h3.title 出現，然后您可以按原樣運行代碼

前

const titles = await page.evaluate(() =>  ...

然后一切都應該運行正常，我使用的完整腳本： -

'use strict';

const puppeteer = require('puppeteer');

(async() => {
    const browser = await puppeteer.launch({
        headless: false, 
        defaultViewport : { width: 1600, height: 1600}
      });
    const page = await browser.newPage();

  const url =
    "https://marketingplatform.google.com/about/partners/find-a-partner";
  await page.goto(url);

  await page.waitFor('h3.title');  //this is the magic!

  const titles = await page.evaluate(() =>
    Array.from(document.querySelectorAll("h3.title"))
      .map(partner => partner.innerText.trim())
  )
  console.log(titles)
  await browser.close();

})();  

注意：我關閉了無頭模式並設置了更寬的視口，這樣我就可以看到發生了什么。 在生產中，您不需要這些設置。

Answer 2

看起來頁面上的合作伙伴列表是通過JS動態加載的； 在 Chrome 上，左鍵單擊並 select “查看源代碼...”以查看開始時實際加載的內容。

合作伙伴列表似乎在滾動上延遲加載......您可能需要以某種方式模擬滾動並等待頁面的延遲部分加載以獲取您想要的數據。