Say i have this element:
<a href="#" class="employee"
data-id="123"
data-name="john doe"
>
I'd like to get the data attributes via dataset. I can use the code below to get an individual data attribute, but if i want to get both data-* attributes, i'd have to scrape twice.
const person = await page.$eval(".employee", (el) =>
el.getAttribute("data-id")
);
I've tried this, but returns an empty object
const person = await page.$eval(".employee", (el) =>
el.dataset
);
Try using el.attributes which will return all the attributes of the element and then you can get the data from the returned value without having to scrape twice.
Or in general try saving the element and then getting the data from it,
or use regex to select the attributes that starts with data-
Maybe this:
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch();
const html = `
<!doctype html>
<html>
<head><meta charset='UTF-8'><title>Test</title></head>
<body>
<a href='#' class='employee' data-id='123' data-name='john doe'>John Doe</a>
</body>
</html>`;
try {
const [page] = await browser.pages();
await page.goto(`data:text/html,${encodeURIComponent(html)}`);
const data = await page.evaluate(() => {
const dataset = document.querySelector('a').dataset;
return Object.fromEntries(Object.entries(dataset));
});
console.log(data); // { id: '123', name: 'john doe' }
} catch (err) { console.error(err); } finally { await browser.close(); }
Managed to accomplish it with this, but still very open to know how to retrieve the dataset object.
const dataset = await page.$eval(".employee", (el) => {
return {
id: el.getAttribute("data-id"),
name: el.getAttribute("data-name")
}
});