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