Get table inside a div container - puppeteer

Question

I'm trying to get a table inside a div this is what it looks like in html structure
<div class="table_container">
<table id="main_table">
</table>
</div>
let pageContent = await page.evaluate(() => document.getElementsByClassName("table_container")[0].getElementsByTagName("table")[0].innerHTML);
but this is not working. What's wrong with my code

Answer 1

Your code is "correct", so I will try to explain what is happening here, hope this help you. Looking to your selector:
document.getElementsByClassName("table_container")[0].getElementsByTagName("table")[0].innerHTML
<div class="table_container">
<table id="main_table">#
##</table>
</div>
The result of this will be a string with some spaces (marked as #), or even nothing if the html not have spaces between tags. You are getting this result because you get the first div.table_container and then you get the table at index [0] and then the innerHTML of a empty table. You can add some content to table to retrieve a more "concrete" result, like adding a body to table:
<div class="table_container">
<table id="main_table">
<tbody>
<tr>
<td>Foo</td>
</tr>
</tbody>
</table>
</div>
Result
<tbody>
<tr>
<td>Foo</td>
</tr>
</tbody>
Puppeteer code
const puppeteer = require("puppeteer");
(async function() {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto("http://localhost:5000"); // used a simple npx serve with a static html file
const content = await page.evaluate(() => {
return document.getElementsByClassName("table_container")[0].getElementsByTagName("table")[0].innerHTML;
});
console.log(content);
await browser.close();
})();