使用 Puppeteer 从 Google 地图搜索结果链接中选择标题和地址答案

【问题标题】：Selecting title and address from Google maps search result link using Puppeteer使用 Puppeteer 从 Google 地图搜索结果链接中选择标题和地址
【发布时间】：2021-07-31 04:51:20
【问题描述】：

我想从谷歌地图列表中控制台记录“商店名称”和“商店地址”。我在谷歌地图上搜索了“芝加哥花店”并点击了其中一个链接。然后，我尝试控制台登录商店名称和地址。我很难使用 querySelector（css 选择器）来控制台记录我需要的内容。此外，当我复制并粘贴商店的长谷歌地图链接 (https://www.google.com/maps/place/Donna's+Garden+Flower+Shop+-+Chicago,+IL/@41.9898102,-87.7360212,17z/data=!3m1!4b1!4m5!3m4!1s0x880fce639267ed2f:0x3e47d8ddf3040316!8m2!3d41.9898313!4d-87.7338812?authuser=0&hl=en) 时，它会出现错误，但它可以在浏览器上运行。如果我缩短它，它不会给出错误。

如果你能检查我的代码，我会很高兴。谢谢

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('https://www.google.com/maps/place/Donna's+Garden+Flower+Shop+-+Chicago,+IL/@41.9898102,-87.7360212,17z/data=!3m1!4b1!4m5!3m4!1s0x880fce639267ed2f:0x3e47d8ddf3040316!8m2!3d41.9898313!4d-87.7338812?authuser=0&hl=en');
  //await page.screenshot({ path: 'example.png' });

 const shopName = await page.$eval("x3AX1-LfntMc-header-title-title span", span => span.textContent);
 console.log(shopName);

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

【问题讨论】：

标签： node.js web-scraping puppeteer

【解决方案1】：

如果 URL 包含单引号 '，您需要使用双引号 " 或反引号 `。
您需要在选择器中的类名前加一个点。
在您的情况下，您似乎还需要等到元素出现。

这似乎有效：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto("https://www.google.com/maps/place/Donna's+Garden+Flower+Shop+-+Chicago,+IL/@41.9898102,-87.7360212,17z/data=!3m1!4b1!4m5!3m4!1s0x880fce639267ed2f:0x3e47d8ddf3040316!8m2!3d41.9898313!4d-87.7338812?authuser=0&hl=en");
  //await page.screenshot({ path: 'example.png' });

  await page.waitForSelector(".x3AX1-LfntMc-header-title-title span");
  const shopName = await page.$eval(".x3AX1-LfntMc-header-title-title span", span => span.textContent);
  console.log(shopName);

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

【讨论】：