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

Question

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

})()

When I run my code that is supposed to grab the name of the supreme item, it says undefined when it's supposed to log it in the console.

Answer 1

You are neither returning anything from the page.evaluate nor are you setting the value of productName . Try something like this instead that uses $eval to return the innerText of the matching element:

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

If you prefer to use evaluate it would look like:

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

If innerText doesn't return anything you may instead need to use something like textContent .

Hopefully that helps!