puppeteer trouble. Or, at least, javascript trouble; you decide, please

Question

Can someone please explain what might be going wrong here:

await page.click('some-selector-that-devtools-confirms-is-definitely-there')
let peeps = await page.evaluate(() =>
    {
        document.querySelector('some-selector-that-devtools-confirms-is-definitely-there')
    }
);
console.log('classes: '+peeps.classList)

I've tried page.wait...., to no avail, same error

Error

TypeError: Cannot read property 'classList' of undefined

Incidentally, is there a best practice for finding out if an element has a certain css class?

score 1 · Accepted Answer · answered Aug 14 '20 at 15:01

1

You have two problems here.

You don't return document.querySelector('some-selector-that-devtools-confirms-is-definitely-there') so the variable peeps will be undefined
You expect you can return any value with page.evaluate(). but acutely you can only return a serializable value, so it is not possible to return an element or NodeList back from the page environment using this method.

Example to return classlist by page.evaluate().

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("https://google.com", { waitUntil: "networkidle2" });

  const classList = await page.evaluate(() => {
    return [...document.querySelector("div").classList];
  });

  console.log(classList);

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

answered Aug 14 '20 at 15:01

Ahmed ElMetwally

2,276
3
10
15

Perfect! thanks! what's that ... business about? I am becoming a (from)java convert – HellishHeat Aug 14 '20 at 15:09
This help me to convert DOM list to array to can access it and use all array methods with it. https://stackoverflow.com/questions/2735067/how-to-convert-a-dom-node-list-to-an-array-in-javascript – Ahmed ElMetwally Aug 14 '20 at 15:16
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax – Ahmed ElMetwally Aug 14 '20 at 15:17

score 1 · Answer 2 · answered Aug 14 '20 at 15:04

There are two main problems with your code:

Your evaluate method is not returning anything;
You need to access the classList inside the evaluate method

Here's an example:

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("https://stackoverflow.com/");

  const classes = await page.evaluate(() => {
    return document.querySelector("body").classList;
  });

  console.log(classes);

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

As an alternative approach, you could use getProperty("className"):

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("https://stackoverflow.com/");

  const el = await page.$("body");
  const className = await el.getProperty("className");
  const classes = className._remoteObject.value.split(" ");

  console.log(classes);

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

puppeteer trouble. Or, at least, javascript trouble; you decide, please

2 Answers2