使用操纵符捕获表元素并与之交互

Question

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

我是Java语言的新手，也是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
      }
    }
  }