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?

CodePudding user response：

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 > a at the end of the selector to target the link you want to click
• finally you can apply HTMLElement.click() in the page function of page.$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())