Can't get values for a table located inside a frame through Puppeteer - node.js

Question

Below is the error I get when I try to apply the 'table[0].$$eval' method (see code snipped below) :
Failed to execute 'querySelectorAll' on 'Element': '# 297d0e3 > table > tbody > tr:nth-child(1)' is not a valid selector
const puppeteer = require('puppeteer')
const scrape = async () => {
const browser = await puppeteer.launch({headless:false,defaultViewport: null,args: [
'--disable-web-security',
'--disable-features=IsolateOrigins,site-per-process'
]});
const page = await browser.newPage();
await page.goto('https://dealers.carwow.co.uk/dealers/sign_in')
await page.type('#dealer_email', 'email')
await page.type('#dealer_password', 'password')
await page.click('#new_dealer > p > input')
await new Promise(resolve => setTimeout(resolve, 5000));
let xpathArray = await page.$x('//*[#id="dealer-dashboard"]/div[3]/div/div/a')
await xpathArray[0].click()
await new Promise(resolve => setTimeout(resolve, 5000));
const frameHandle = await page.$x('//*[#id="klipfolio-iframe"]');
await new Promise(resolve => setTimeout(resolve, 5000));
const frame = await frameHandle[0].contentFrame();
await frame.waitForXPath('//*[#id="0297d0e3"]/table');
const table = await frame.$x('//*[#id="0297d0e3"]/table');
console.log(table)
browser.close()
};
The above function returns an array containing a ElementHandle (below) rather than an element.
[
ElementHandle {
_disposed: false,
_context: ExecutionContext {
_client: [CDPSession],
_world: [DOMWorld],
_contextId: 17,
_contextName: ''
},
_client: CDPSession {
eventsMap: [Map],
emitter: [Object],
_callbacks: Map(0) {},
_connection: [Connection],
_targetType: 'page',
_sessionId: '326BCCF50B6BBE8CA175CB21AB46C382'
},
_remoteObject: {
type: 'object',
subtype: 'node',
className: 'HTMLTableElement',
description: 'table.layout-grid',
objectId: '3652992625290954585.17.4'
},
_page: Page {
eventsMap: Map(0) {},
emitter: [Object],
_closed: false,
_timeoutSettings: [TimeoutSettings],
_pageBindings: Map(0) {},
_javascriptEnabled: true,
_workers: Map(0) {},
_fileChooserInterceptors: Set(0) {},
_userDragInterceptionEnabled: false,
_client: [CDPSession],
_target: [Target],
_keyboard: [Keyboard],
_mouse: [Mouse],
_touchscreen: [Touchscreen],
_accessibility: [Accessibility],
_frameManager: [FrameManager],
_emulationManager: [EmulationManager],
_tracing: [Tracing],
_coverage: [Coverage],
_screenshotTaskQueue: [ScreenshotTaskQueue],
_viewport: null
},
_frameManager: FrameManager {
eventsMap: [Map],
emitter: [Object],
_frames: [Map],
_contextIdToContext: [Map],
_isolatedWorlds: [Set],
_client: [CDPSession],
_page: [Page],
_networkManager: [NetworkManager],
_timeoutSettings: [TimeoutSettings],
_mainFrame: [Frame]
}
}
]
I have tried iterating over the array then doing applying the method (see below) to extract data from a table (see picture)
What exactly is an Element handle and how do I solve this issue?
table[0].$$eval('#\30 297d0e3 > table > tbody > tr:nth-child(1)', rows => {
return Array.from(rows, row => {
const columns = row.querySelectorAll('td');
return Array.from(columns, column => column.innerText);
});
});

Answer 1

If you need a selector with a number in its id, try this workaround:
table[0].$$eval('[id="the_number"] > table > tbody > tr:nth-child(1)', rows => {