Puppeteer with document.querySelector() returning null

Question

I am trying to get a button from the page. I am printing all of the classes and then trying to get an element of one of those classes. My code is below:

const classes = await page.evaluate( () => {
    var allClasses = [];

    var allElements = document.querySelectorAll('*');

    for (var i = 0; i < allElements.length; i++) {
      var classes = allElements[i].className.toString().split(/\s+/);
      for (var j = 0; j < classes.length; j++) {
        var cls = classes[j];
        if (cls && allClasses.indexOf(cls) === -1)
          allClasses.push(cls);
      }
    }

    return allClasses;
  });

  const chevron = await page.evaluate( () => {
    const c = document.querySelector('coreSpriteRightChevron');
    return c;
  })
  console.log(classes);
  console.log(chevron);

This logs:

[
  'js',
  'not-logged-in',
  'client-root',
  'js-focus-visible',
  'sDN5V',
  '_9eogI',
  'E3X2T',
  'SCxLW',
  'o64aR',
  'Kj7h1',
  'ltEKP',
  'QBXjJ',
  'M9sTE',
  'L_LMM',
  'JyscU',
  'Tgarh',
  'ePUX4',
  'Ppjfr',
  'UE9AK',
  'wdOqh',
  'RR-M-',
  'h5uC0',
  'mrq0Z',
  'CfWVH',
  '_2dbep',
  '_6q-tv',
  'o-MQd',
  'z8cbW',
  'PQo_0',
  'RqtMr',
  'e1e1d',
  'BrX75',
  'FPmhX',
  'notranslate',
  'nJAzx',
  'mewfM',
  'Szr5J',
  'coreSpriteVerifiedBadgeSmall',
  'bY2yH',
  'RPhNB',
  'oW_lN',
  'sqdOP',
  'yWX7d',
  'y3zKF',
  'M30cS',
  'JF9hh',
  '_97aPb',
  'wKWK0',
  'rQDP3',
  'pR7Pc',
  'tR2pe',
  'tN4sQ',
  'zRsZI',
  'NgKI_',
  'MreMs',
  'qqm6D',
  'YlNGR',
  '_-1_m6',
  'bsGjF',
  'ZyFrc',
  'eLAPa',
  'RzuR0',
  'KL4Bh',
  'FFVAD',
  '_9AhH0',
  '_6CZji',
  'coreSpriteRightChevron',
  'JSZAJ',
  '_3eoV-',
  'IjCL9',
  'WXPwG',
  'Yi5aA',
  'XCodT',
  'eo2As',
  'ltpMr',
  'Slqrh',
  'fr66n',
  'dCJp8',
  'afkep',
  'glyphsSpriteHeart__outline__24__grey_9',
  'u-__7',
  '_15y0l',
  'glyphsSpriteComment__outline__24__grey_9',
  '_5e4p',
  'glyphsSpriteShare__outline__24__grey_9',
  'wmtNn',
  'glyphsSpriteSave__outline__24__grey_9',
  'EDfFK',
  'ygqzn',
  'Igw0E',
  'IwRSH',
  'eGOV_',
  'ybXk5',
  'vwCYk',
  'Nm9Fw',
  '_8A5w5',
  'EtaWk',
  'XQXOT',
  'gElp9',
  'rUo9f',
  ... 111 more items
]
null

Which is a list of all classes that contains the class that I am trying to get with document.querySelector() . The class is printed out in the list, but trying to get the button form the class coreSpriteRightChevron returns null.

Any help is greatly appreciated. Thank you

Answer 1

Maybe this will work?

  const chevron = await page.evaluate( () =>
      document.querySelector('.coreSpriteRightChevron')
  )