时间戳

首页 > 解决方案 > 如何使用 Puppeteer 将变量定义为抓取的元素

javascript - 如何使用 Puppeteer 将变量定义为抓取的元素

问题描述

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({
        headless: false,
        defaultViewport: null
    })
  const page = await browser.newPage()
  
  await page.goto('https://www.supremenewyork.com/shop/sweatshirts/ftq968f24/lhrblx1z5')
var productName = await page.evaluate(() => {
    document.querySelector('div[id="details"] > p[itemprop="model"]').innerText;
})

console.log(productName);

})()

当我运行应该获取至尊项目名称的代码时，它应该在控制台中记录它时显示未定义。

标签： javascriptnode.jspuppeteer

解决方案

您既没有从 中返回任何东西，page.evaluate也没有设置 的值productName。尝试这样的事情，而不是$eval用来返回innerText匹配元素的：

const puppeteer = require("puppeteer");

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

  await page.goto(
    "https://www.supremenewyork.com/shop/sweatshirts/ftq968f24/lhrblx1z5"
  );

  const productName = await page.$eval(
    'div[id="details"] > p[itemprop="model"]',
    (el) => el.innerText
  );

  console.log(productName);
})();

如果您更喜欢使用evaluate它，它看起来像：

const puppeteer = require("puppeteer");

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

  await page.goto(
    "https://www.supremenewyork.com/shop/sweatshirts/ftq968f24/lhrblx1z5"
  );

  const productName = await page.evaluate(() => {
    // notice the return
    return document.querySelector('div[id="details"] > p[itemprop="model"]').innerText;
  });

  console.log(productName);
})();

如果innerText不返回任何内容，您可能需要使用类似textContent.

希望这会有所帮助！

推荐阅读