I get the href of a elements by

const hrefs = await page.evaluate(() => 
Array.from(document.body.querySelectorAll('a'), ({ href }) => href));

but when I try to get aria-label or data-xx of div elements, this method does not work.

Why is that and how can I get aria-label or data-xx attributes of div elements?

HTML

<div class="test" arial-label="something" data-all="something">
</div>

I get the href of a elements by

const hrefs = await page.evaluate(() => 
Array.from(document.body.querySelectorAll('a'), ({ href }) => href));

but when I try to get aria-label or data-xx of div elements, this method does not work.

Why is that and how can I get aria-label or data-xx attributes of div elements?

HTML

<div class="test" arial-label="something" data-all="something">
</div>

• javascript
• node.js
• puppeteer

1 Answer 1

Problem: DOM node attribute ≠ HTML element attribute

Only some of the HTML attributes are exposed on the DOM node. And even the exposed one might contain a different value: The href attribute of the DOM node is not the same as the attribute written into the HTML (<a href="..."></a>). To give an example:

<a id="link" href="test.html">Link</a>

Accessing document.querySelector('#link').href will return the full path (e.g. http://example./test.html) instead of test.html. To get the original element attribute you have to use the function getAttribute.

Solution

Coming back to your code, that means you can read aria-label and data-all by using getAttribute like this:

Array.from(document.body.querySelectorAll('div'), (el) => el.getAttribute('aria-label'));

Array.from(document.body.querySelectorAll('div'), (el) => el.getAttribute('data-all'));

For accessing the data attribute, there is an additional solution available. You can access the data values by using a special attribute called dataset, which allows to read the value of data-xx like this:

Array.from(document.body.querySelectorAll('div'), (el) => el.dataset.xx);