为什么我的 querySelector 在 Chrome 中有效，但在 VS Code 中无效？

Question

Node 新手，所以这可能是一个对 Node 理解不够好的问题，但基本上我正在尝试使用 Puppeteer 来抓取页面上的标题列表。当我在 Chrome 控制台中运行查询时，我会得到一个标题列表。哇！

\n\n

Array.from(document.querySelectorAll(\'div.description h3.title\')).map(partner => partner.innerText)\n\n(12)\xc2\xa0["Jellyfish", "MightyHive", "Adswerve", "55 | fifty-five", "E-Nor", "LiveArea", "Merkle Inc.", "Publicis Sapient", "Acceleration Precision", "Resolute Digital", "PMG", "Kepler Group"]\n

\n\n

但是当我使用 Node.js 在 VS Code 中测试它时，我得到一个空数组

\n\n

const browser = await puppeteer.launch();\n  const page = await browser.newPage();\n  const url =\n    "https://marketingplatform.google.com/about/partners/find-a-partner?utm_source=marketingplatform.google.com&utm_medium=et&utm_campaign=marketingplatform.google.com%2Fabout%2F";\n  await page.goto(url);\n\n  const titles = await page.evaluate(() => \n    Array.from(document.querySelectorAll("h3.title"))\n      .map(partner => partner.innerText.trim())\n  )\n\n$ Node google-test.js\n[]\n

\n\n

我已经尝试进一步指定选择器，甚至使用检查“复制选择器”快捷方式进行精确选择，但仍然得到一个空数组。

\n\n

如果我更模糊，例如选择“h2”，我会得到一个结果，但一旦我进一步指定，它对我来说就结束了。是什么赋予了？

\n

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

})();  

注意：我已关闭无头模式并设置更宽的视口，以便我可以看到发生了什么。在生产中您不需要这些设置。