I'm making a monitoring tool for our blockchain validator.

This tool will crawl HTML from url (example) and check the green span Active exists or not. I'm using puppeteer for crawling but I have a problem.

When I run the code below on my host, it's able to get the element. However, when I run it on a remote server, it shows the error:

    err: {
      "type": "Error",
      "message": "Error: failed to find element matching selector \".cmuk-badge\"",
      "stack":
          Error: Error: failed to find element matching selector ".cmuk-badge"
              at ElementHandle.$eval (/home/ec2-user/validator-crypto-checker/node_modules/puppeteer/src/common/JSHandle.ts:1032:13)
              at processTicksAndRejections (internal/process/task_queues.js:97:5)
    }

Server

Amazon Linux 2
Node v12.22.12
Dependencies installed following: https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md#chrome-headless-doesnt-launch-on-unix

Code:

  const browser = await Puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto(url);

  try {
    const activeElement = ".cmuk-badge";
    const activeStatus = await page.$eval(
      activeElement,
      (node) => (<HTMLElement>node).innerText
    );
    logger.info(activeStatus)
    if (activeStatus !== "Active") throw new Error("Died");
    logger.info("Validator ok");
  } catch (err) {
    logger.error(err);
  }

  await browser.close();

CodePudding user response：

I'm not using JSX, but this works fine for me

import Puppeteer from 'puppeteer';

const url = "https://explorer.persistence.one/validators/persistencevaloper1hndk2s0dx9p0pxd9pxwmls3eywpdu5ha76kpqs";

const browser = await Puppeteer.launch({ headless: true });
const page = await browser.newPage();
await page.goto(url);
const badge = await page.waitForSelector('.cmuk-badge');
const activeStatus = await badge.evaluate(node => node.innerText);
console.log(activeStatus)
await browser.close();

where as when I run the following, nothing is logged.

await page.$eval(
    '.cmuk-badge',
    node => console.log(node)
);

So perhaps you can just use waitForSelector and evaluate instead of $eval.