[Bug]: Using $eval or evaluate selector to get child elements results in missing HTML properties #9382
Comments
|
@JohnnyRacer you'd need to serialize the data inside the evaluate functions yourself ( |
|
@OrKoN Could you explain what you mean by serialize the data? The docs doesn't really cover anything on properly handling child elements. I've looked at some Stack Overflow solutions but none seem to address the issue I'm facing. For this example below (a static HTML file named <!DOCTYPE html>
<html lang="en">
<body>
<div class="container">
<div class="child">A</div>
<div class="child">B</div>
<div class="child">C</div>
</div>
<body>
</html>Using the following snippet : (async () => {
const browser = await puppeteer.launch({
headless: true,
executablePath: executablePath(),
});
const page = await browser.newPage();
await page.goto('http://localhost:5000/test_child.html',{
waitUntil: 'networkidle2',
});
let child = await page.$eval('.container', e =>e.children);
console.log(child)
await browser.close();
})() I'm getting the following as the output, from { '0': {}, '1': {}, '2': {} }There are no properties that are accessible within the objects. Using evaluate with the following snippet : (async () => {
const browser = await puppeteer.launch({
headless: true,
executablePath: executablePath(),
});
const page = await browser.newPage();
await page.goto('http://localhost:5000/test_child.html',{
waitUntil: 'networkidle2',
});
await page.evaluate(() => {
let element = document.querySelector('.container');
let child = element?.children;
console.log(element);
console.log(child);
})
await browser.close();
})() The element itself is null. |
|
What I mean is otherwise you get the default representation of the DOM Element as a string. |
|
Can you explain why there is a |
|
@JohnnyRacer it's just easier so that I don't need to create an HTML for every bug report. Should be no difference whether you navigate or setContent. |
|
Oh I see, thank you for the explanation. I just tested your snippet and it's worked as intended! |
|
@OrKoN For nested HTML elements how would I be able to recurse through to obtain the inner elements. For example getting the properties of <div class="child">
<div class="nested-child">
nested A
<div class="inner-nested-child">
inner nested A
</div>
</div>
<div class="nested-child">
nested B
<div class="inner-nested-child">
inner nested B
</div>
</div>
<div class="nested-child">
nested C
<div class="inner-nested-child">
inner nested C
</div>
</div>
</div> |
|
@JohnnyRacer better ask on StackOverflow. Short answer: the same way, either using selectors or DOM APIs in the evaluated function. |
Bug description
Hello, when I try to use
await page.$eval('.container', e => e.children)to select a nested element like the one below:I do not get the element's available properties. For example , when I selected an element with children and want to get its innerHTML or innerText. All I end up with is after converting to an array from a HTMLCollection is:
This is a list of buttons for a paginated navigation element and I would like to get the innerText properties for each element so I can access the page numbers, but only the onClick event handler property is accessible. Selecting the elements using the selector individually I am able to access all of its properties. I've also tried using
But this just returns undefined for the children. Any help would be greatly appreciated!
Puppeteer version
19.4.0
Node.js version
v18.12.1
npm version
9.1.3
What operating system are you seeing the problem on?
Linux, Windows
Configuration file
No response
Relevant log output
No response
The text was updated successfully, but these errors were encountered: