table 单元格的第 n 个子单元中的 Puppeteer select link

Question

我有一个功能：

const tableData = await page.evaluate(() => {
 const tds = Array.from(document.querySelectorAll('table tbody tr td'))
 for (var i = 0; i < tds.length; i++) {
 ...
 ...
  availableDates.push([i,dateString,day])
 }
 return availableDates
}

并且此函数循环 table 的所有单元格，我根据某些条件过滤一些日期。

到目前为止一切顺利。这些单元格包含一个我想单击的 href。该数组包含我想在第一个数组项上单击的单元格的编号，所以我尝试过：

await page.focus('table tbody tr td:nth-child('+tableData[0][0]+') a' )
    await page.keyboard.type('\n');

但运气不好。我收到以下错误消息：

(node:81325) UnhandledPromiseRejectionWarning: Error: No node found for selector: table tbody tr td:nth-child(109) a
.......

我必须改变什么？谢谢。

Answer 1

CSS 选择器不是这样工作的。您不能执行 td:nth-child(109) 并期望选择不同 table 行中的元素。我会尝试通过 page.click 或 page.evaluate(() => element.click);

使用 .click()

输入 \n 似乎是一个错误的方向，明确调用 click - 这是我的建议。

Api 对于 page.click: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageclickselector-options

当谈到实际找到正确的单元格时，我会在更高的范围（闭包）中使用辅助数组，将所有内容添加到那里（一维数组）然后你可以通过数字引用它们，比如你尝试使用 nth-child 方法。

Answer 2

这行不通，因为，让我解释一下原因：

您有 2 张桌子。

Table 1 有 3 个 tds。
Table 2 有 2 个 tds。

现在，如果你做 $('table td:nth-child(2)') 这将意味着 Table 1s 2nd td，也就是 Table 2 第 2 个 td.

你大概可以做两件事，

在遍历 dom 元素时，向元素添加数据属性，并 select 使用该数据属性。

const tableData = await page.evaluate(() => {
  const tds = Array.from(document.querySelectorAll('table tbody tr td'))
  for (var i = 0; i < tds.length; i++) {
    // ...
    tds[i].setAttribute('data-td-index', i);
    // ...
    availableDates.push([i, dateString, day])
  }
  return availableDates;
}

然后，使用该数据属性。

await page.focus('table tbody tr td[data-td-index='+tableData[0][0]+'] a' )

使用DOM元素这里get thee unique selector的其中一种解决方案，保存在 availableDates 即 availableDates.push(i, uniqPath, dateString, day)。然后像这样使用它：
```
await page.focus(`${tableData[0][0]} a`)
```

table 单元格的第 n 个子单元中的 Puppeteer select link

Puppeteer select link in nth child of table cell

javascript

node.js

puppeteer