0
146
ViewsGetting element handle within table using puppeteer
I'm working with puppeteer. I have a table as in the screenshot. I need to be able to click on the button under action in a row after selecting the row based on the name column on the left.
Based on html selector using predicate of predicate
I have:
const parent = await page.$eval('td[title="18to22"]', el => el?.parentElement?.outerHTML)
This does work and provides the html for the parent element but I want to get the parent element handle (https://puppeteer.github.io/puppeteer/docs/next/puppeteer.elementhandle/ ) and then the last child element handle which should contain the clickable view button.
I tried:
const parent = await targetPage.$$eval(
'td[title="18to22"]',
(el) => el?.parentElement
);
This yields undefined.
How can I get the parent and ultimately child element handle?
·
Santiago Gelvez
1 answers
Answer question0
I believe you cannot convert the already evaluated element back to ElementHandle.
I'd do the following to achieve what you need:
- get the content of the rows with
page.$$eval(returns an array of strings) - get the index of the row that contains the desired name ('18to22') using
Array.findIndex() - now that you know the index you need to increment it with one number (as CSS's
nth-child()pseudo-class uses numbers starting from 1, and not from 0 like regular JS arrays) - so you can use the following CSS selector to grab the exact row:
tbody > tr:nth-child(${wantedRowIndex + 1}) - ... the fifth column contains the button:
> td:nth-child(5) - ... the button seems to me an
<a>element, so you you can add> aat the end of the selector to target the link you want to click - finally you can apply
HTMLElement.click()in the page function ofpage.$eval
Example:
const rows = await page.$$eval('tbody > tr', elems => elems.map(el => el.innerText))
const wantedRowIndex = rows.findIndex(el => el.includes('18to22'))
await page.$eval(`tbody > tr:nth-child(${wantedRowIndex + 1}) > td:nth-child(5) > a`, el => el.click())
·
Santiago Gelvez
Report
Answer question