javascript - Puppeteer 选择表格单元格的第 n 个子级中的链接

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
}

这个函数循环表格的所有单元格，并根据某些条件过滤其中的某些日期。

到目前为止一切顺利。这些单元格包含我要单击的 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

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

您有 2 张 table 。

• 表 1 有 3 个 td。
• 表 2 有 2 个 td。

现在，如果您执行 $('table td:nth-child(2)') 这将意味着 Table 1 的第二个 td，也是 Table 2 秒第二个 td。

<小时/>

你可能可以做两件事，

1. 在遍历 dom 元素时，向元素添加数据属性并使用该数据属性选择它。

   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' )
   

2. 使用此处的解决方案之一 get thee unique selector DOM 元素并将其保存在availableDates 即 availableDates.push(i, uniqPath, dateString, day)。然后像这样使用它:

   await page.focus(`${tableData[0][0]} a`)