使用 Puppeteer 捕获表格元素并与之交互

Question

我正在尝试遍历表格的行，在 column-B 中查找文本，然后单击 column-A 中的复选框。

我对 Javascript 和 Puppeteer 还很陌生，所以如果这很基本，我提前道歉。

我的目标 定位表第 2 列中的所有项目并存储到数组中 找到我的表的第 1 列中的所有项目并存储到一个数组 当在第一个数组中找到我感兴趣的文本时，单击第二个数组相同索引处的元素

我可以通过 css 选择器.column-id 识别表格中第 2 列的所有单元格 我可以通过 css 选择器.select-item

识别表格中第 1 列（复选框）的所有单元格

按照 Puppeteer 文档，我可以执行以下操作来获取找到的元素的数量

const element = '.column-id'
const elementToClick = '.select-item'
const elementCount = await this.page.$$eval(element, (e) => e.length)
const eleToClickCount = await this.page.$$eval(elementToClick, (e) => e.length

尝试遵循我发现的一些示例，我有以下代码可以“使”工作，但我认为它不正确，或者至少不是完成我的工作的最佳方式追赶。

// Loop through elements searching for textToLookFor
    for (let i = 0; i < elementCount; i++) {
      const str = await this.page.$eval(
        `${element}:nth-child(2)`,
        (e) => e.innerText
      )
      // If string found, click element at same index as string
      if (str === textToLookFor) {
        await this.waitAndClick(`${elementToClick}:nth-child(${i + 1})`)
        foundMatch = true
        break
      }
    }

问题

1. 我是否将正确的内容存储到我的初始元素变量中？

2. 使用 :nth-child(#) 是正确的方法吗？还是不适用于我尝试使用它的方式？这似乎是错误的，因为给定行的第 n 个子项将是列 (td)，这不是我想要的，而是通过 for 循环进行迭代时的第 i 行。

   我觉得这应该是一项非常简单的任务，而且显然缺少 东西。

   任何方向都将不胜感激。

Answer 1

我已更改为使用 table tr 选择器而不是类名并稍微修改了代码，现在它可以按我的意愿工作并理解原因。

async selectPresetNamed(name) {
    const tableRows = 'tbody tr'
    const rowCount = await this.page.$$eval(tableRows, (e) => e.length)

    // At least 1 row exists in table body
    if (rowCount == 0) {
        browser.close()
        throw new Error(`no elements found with locator, '${tableRows}'`)
    }
    for (let i = 0; i < rowCount; i++) {
      const str = await this.page.$eval(
        `${tableRows}:nth-child(${i + 1}) td:nth-child(2)`,
        (e) => e.innerText
      )
      if (str === name) {
        await this.page.waitAndClick(
          `${tableRows}:nth-child(${i + 1}) td:nth-child(1)`
        )
        break
      }
    }
  }