使用 puppeteer 抓取表以获取特定数据

Question

<tbody class="ant-table-tbody">
  <tr class="ant-table-row ant-table-row-level-0">
    <td class>
      <span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"</span>
      "Bombay"
      </td>
    <td class>
       <label class="ant-checkbox-wrapper">
         <span class="ant-checkbox ant-checkbox-checked">
           <input type="checkbox" class="ant-checkbox-input" value="on">
       </label>
     </td>
    <td class>
       <div>
         <i class ="anticon anticon-delete">
           ::before
         </i>
       </div>
     </td>
  </tr>
<tr class="ant-table-row ant-table-row-level-0">...<tr>
<tr class="ant-table-row ant-table-row-level-0">...<tr>
<tr class="ant-table-row ant-table-row-level-0">...<tr>
<tr class="ant-table-row ant-table-row-level-0">...<tr>
<tr class="ant-table-row ant-table-row-level-0">...<tr>
<tr class="ant-table-row ant-table-row-level-0">...<tr>

我有这个表结构，其中每个 <tr> 行有三个单独的 <td>。我正在尝试使用 puppeteer 找到以下内容

• 第一个<td>里面的文字
• 计算第二个<td> 标记的数量，该标记具有<span> 元素和类"ant-checkbox-checked"。

现在我可以使用 this 获取所有文本（在所有 tr 和 td 内）

 const data = await page.evaluate(()=>{
            const tds = Array.from(document.querySelectorAll('tbody tr td'));
            return tds.map(td => td.innerText);
        });
        console.log(data);

但这会返回所有我不需要的文本数据，我只需要特定的数据。如何使用 puppeteer 深入了解特定标签？

Answer 1

可以使用page.evaluate()获取第一列的文本内容，然后可以使用page.$$()统计第二列包含ant-checkbox-checked类的span元素个数：

let first_column_text = await page.evaluate(() => Array.from(document.querySelectorAll('.ant-table-tbody > .ant-table-row > td:first-child'), element => element.textContent.trim()));
let second_column_checked_count = (await page.$$('.ant-table-tbody > .ant-table-row > td:nth-child(2) > .ant-checkbox-wrapper > span.ant-checkbox-checked')).length;