使用 puppeteer 映射 table children 内容

Question

我的目标是从不同的 <td> 标签中获取 .textContent，每个标签位于一个单独的 <tr> 中。

我认为问题出在 table 变量中，因为我没有检查 children 的正确变量。当前，data 变量仅获取第一个 <tr>，因此 price 使用此代码进行评估。但是，volume 和 turnover 没有。我认为这是一个简单的修复，但我就是想不通！

JavaScript:

try {
    const tradingData = await page.evaluate(() => {
      let table = document.querySelector("#trading-data tbody");
      let tableData = Array.from(table.children);
      let data = tableData.map(tradeData => {
        console.log(tradeData);
        let price = tradeData.querySelector(".quoteapi-price").textContent;
        console.log(price);
        let volume = tradeData.querySelector("quoteapi-volume").textContent;
        console.log(volume);
        let turnover = tradeData.querySelector("quoteapi-value").textContent;
        console.log(turnover);
        return { price, volume, turnover };
      })
      return data;
    });

    console.log(tradingData);
  } catch (err) {
    console.log(err);
  }

HTML:

<table id="trading-data" class="qq_table">
    <tbody>
        <tr class="qq_tr_border_bot">
            <td>Price</td>
            <td class="qq_td_right quoteapi-number quoteapi-price" data-quoteapi="price">[=13=].105</td>
        </tr>
        <tr class="qq_tr_border_bot">
            <td>Change</td>
            <td class="qq_td_right pos" data-quoteapi="changeSignCSS">
                <span data-quoteapi="change (signed)" class="quoteapi-number quoteapi-price quoteapi-change">0.005</span>
                <span data-quoteapi="pctChange (pct)" class="quoteapi-number quoteapi-pct-change">(5.00%)</span>
            </td>
        </tr>
        <tr class="qq_tr_border_bot">
            <td>Volume</td>
            <td class="qq_td_right quoteapi-number quoteapi-volume" data-quoteapi="volume scale=false">5,119,162</td>
        </tr>
        <tr>
            <td>Turnover</td>
            <td class="qq_td_right quoteapi-number quoteapi-value" data-quoteapi="value scale=false">0,173</td>
        </tr>
    </tbody>
</table>

比如这个应该returnprice="[=23=].11",volume="3,900,558",turnover="2,187"

Answer 1

只有当您需要多个表或 tbodies 时才需要 map 函数。由于在您的示例中似乎并非如此，您可以这样做：

const tradingData = await page.evaluate(() => {
    let table = document.querySelector("#trading-data tbody");
    let price = table.querySelector(".quoteapi-price").textContent;
    let volume = table.querySelector(".quoteapi-volume").textContent;
    let turnover = table.querySelector(".quoteapi-value").textContent;
    return { price, volume, turnover };
});
console.log(tradingData);

使用 puppeteer 映射 table children 内容

Mapping table children content with puppeteer

javascript

puppeteer