使用 puppeteer 在 table 中获取元素句柄

Question

我正在和木偶师一起工作。如屏幕截图所示，我有一个 table。我需要能够在根据左侧的名称列选择行后连续单击正在操作的按钮。

基于

我有：

const parent = await page.$eval('td[title="18to22"]', el => el?.parentElement?.outerHTML)

这确实有效并为父元素提供了 html 但我想获取父元素句柄 (https://puppeteer.github.io/puppeteer/docs/next/puppeteer.elementhandle/ ) 然后是最后一个应该包含可点击视图按钮的子元素句柄。

我试过了：

const parent = await targetPage.$$eval(
  'td[title="18to22"]',
  (el) => el?.parentElement
);

这会产生未定义的结果。

如何获得父元素和最终的子元素句柄？

Answer 1

我相信您无法将已求值的元素转换回 ElementHandle。

我会执行以下操作来实现您的需求：

获取 page.$$eval 行的内容（returns 字符串数组）
使用 Array.findIndex()
现在你知道索引了，你需要用一个数字递增它（因为 CSS 的 nth-child() pseudo-class 使用从 1 开始的数字，而不是像常规的那样从 0 开始JS 数组)
因此您可以使用以下 CSS 选择器来抓取确切的行：tbody > tr:nth-child(${wantedRowIndex + 1})
...第五列包含按钮：> td:nth-child(5)
...按钮在我看来是一个 <a> 元素，因此您可以在选择器末尾添加 > a 以定位要单击的 link
终于可以在page.$eval

HTMLElement.click()

示例：

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())

使用 puppeteer 在 table 中获取元素句柄

Getting element handle within table using puppeteer

javascript

dom

node.js

puppeteer