网页抓取 - h1 - 字体访问问题答案

【问题标题】：Web scraping - h1 - font access issues网页抓取 - h1 - 字体访问问题
【发布时间】：2024-04-25 04:30:02
【问题描述】：

我是网络抓取的新手，在访问 HTML 和 CSS 代码时遇到了一些问题。

我想抓取以下网站的标题： https://www.leaseplan.com/nl-nl/privatelease/onze-autos/4662/

点击检查后，我发现

<h1 class="u-margin-bottom-none u-margin-bottom@tablet" data-e2e-id="carName"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Fiat 500 - Lounge Hybrid </font></font></h1>

我想取出：Fiat 500 - Lounge Hybrid 并将其放入 excel 文件中。

我用过：

async function getPageData(url, page) {
  await page.goto(url);

  const title = await page.$eval(
    "h1, id=carName",              
    (title) => title.textContent
  );

但是，我不断收到错误：

(node:6216) UnhandledPromiseRejectionWarning: Error: Evaluation failed: DOMException: Failed to execute 'querySelector' on 'Document': 'h1[class=u-margin-bottom-none u-margin-bottom@tablet] .carName' is not a valid selector.
    at __puppeteer_evaluation_script__:1:33

它与“h1, id=carName”有关，但我不确定如何以我的 scaper 能够识别并取出 Fiat 500 - Lounge Hybrid 的方式编写它

【问题讨论】：

h1 没有 id carName，它有属性 data-e2e-id
至于语法错误问题 - 您需要在属性选择器中的值周围加上引号。 h1[class="u-margin-bottom-none u-margin-bottom@tablet"]
@04FS 这似乎是刚刚生成的选择器
@Justinas 你是说 puppeteer 自己生成选择器，基于代码中甚至没有提到的属性？那么它至少可以做到正确，哈哈。

标签： html css web-scraping puppeteer

【解决方案1】：

h1 没有id，它是一个数据attribute。相反，您可以这样做：

async function getPageData(url, page) {
  await page.goto(url);

    const title = await page.$eval(
      'h1[data-e2e-id="carName"]',              
      (title) => title.textContent
    );
}

有多种选择元素的方法，请在此处查看quick reference。

【讨论】：

很高兴能帮上忙！