如何遍历表，然后将鼠标悬停在 puppeteer 中具有给定列值的特定行上？

Question

该表的列如下所示：

| Organization  | Username      | Option                           |
____________________________________________________________________
| Helloworld    | username1     | delete icon appear here on hover |
| Stackoverflow | test          | delete icon appear here on hover |
| Puppeteer     | username2     | delete icon appear here on hover |
____________________________________________________________________

我想遍历表格并将鼠标悬停在选项上以单击具有用户名值 = test 的列的删除图标。

如何使用 puppeteer 实现这一点？

Answer 1

您可以在特定列上使用nth-childs（如果列号已知，如您的示例所示），它可以在表的行上进行迭代，如下所示：

const numberOfRows = await page.$$eval('table > tbody > tr', rows => rows.length)

for (let n = 1; n < numberOfRows + 1; n++) {
  const currentUser = `table > tbody > tr:nth-child(${n}) > td:nth-child(2)` // nth row 2nd column
  const currentOption = `table > tbody > tr:nth-child(${n}) > td:nth-child(3)` // nth row 3rd column

  const currentUserString = await page.$eval(currentUser, el => el.innerText)

  if (currentUserString === 'test') {
    try {
      await page.hover(currentOption)
      await page.click(currentOption)
    } catch {}
  }
}

Page.hover 和page.click 可用于第三列的tds 以实现用户删除。这部分代码取决于实际页面的行为。