从 tbody puppeteer 页面评估获取 td dataname href答案

【问题标题】：Get td dataname href from tbody puppeteer page evaluate从 tbody puppeteer 页面评估获取 td dataname href
【发布时间】：2020-07-11 11:11:47
【问题描述】：

<tbody>
  <tr>
    <td data-name="Name"><a href="https://test.ca">test</a></td>
    <td data-name="Active Ingredients"><a href="http://test1.ca">test13</a></td>
    <td data-name="Strength"><a href="http://test3.ca">20mg</a></td>
    <td data-name="Picture">
      <a href="">
        <img src="" />
      </a>
    </td>
  </tr>
</tbody>

我有以下 html。

如何通过 puppeteer 页面评估获取所有带有值名称的 tdata-name 及其 href 值

非常感谢任何帮助。

【问题讨论】：

标签： javascript node.js puppeteer

【解决方案1】：

一个变种：

'use strict';

const puppeteer = require('puppeteer');

(async function main() {
  try {
    const browser = await puppeteer.launch();
    const [page] = await browser.pages();

    const html = `
      <!doctype html>
      <html>
        <head><meta charset='UTF-8'><title>Test</title></head>
        <body>
          <table><tbody>
            <tr>
              <td data-name="Name"><a href="https://test.ca">test</a></td>
              <td data-name="Active Ingredients"><a href="http://test1.ca">test13</a></td>
              <td data-name="Strength"><a href="http://test3.ca">20mg</a></td>
              <td data-name="Picture"><a href=""><img src=""></a>
          </tbody></table>
        </body>
      </html>`;

    await page.goto(`data:text/html,${html}`);

    const data = await page.evaluate(() => Array.from(
      document.querySelectorAll('td'),
      td => ({ [td.dataset.name]: td.querySelector('a[href]').href }),
    ));

    console.log(data);

    await browser.close();
  } catch (err) {
    console.error(err);
  }
})();

输出：

[
  { Name: 'https://test.ca/' },
  { 'Active Ingredients': 'http://test1.ca/' },
  { Strength: 'http://test3.ca/' },
  { Picture: '' }
]

【讨论】：