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

Question

table 的列如下：

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

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

如何使用 puppeteer 实现此目的？

Answer 1

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

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 and page.click 可以用在第 3 列的 td 上来实现用户删除。这部分代码取决于实际页面的行为。