在抓取一些表格数据时得到奇怪的输出

Question

我创建了一个脚本，使用node.js 和puppeteer 从网站上抓取一些表格数据。虽然我追求的数据不是动态生成的，但我还是用了puppeteer。

但是，当我执行脚本时，我会在单个列中而不是列表中获得输出。此外，只有名称被解析，没有其他内容。我在下面举了两个例子来说明我的意思。

Website link

这是我迄今为止尝试过的：

const puppeteer = require("puppeteer");

(async function main() {
  try {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto("https://fantasy.premierleague.com/player-list/");
    page.waitForSelector("table.ism-table");
    const data = await page.$$("table.ism-table tbody tr");
    for (const td of data) {
      const tdata = await td.$eval("td", item => item.innerText);
      console.log(tdata);
    }
    browser.close();
  } catch (e) {
    console.log("Here goes the error ", e);
  }
})();

我目前的输出：

De Gea  
Ederson 
Alisson 
Kepa    
Lloris
Cech    
Schmeichel  
Grant

我期待的输出：

['De Gea', 'Man Utd', '23', '£5.9']
['Ederson', 'Man City', '43', '£5.7']
['Alisson', 'Liverpool', '39', '£5.6']
['Kepa', 'Chelsea', '36', '£5.5']
['Lloris', 'Spurs', '20', '£5.4']

Answer 1

您应该使用elementHandle.$$eval() 而不是elementHandle.$eval() 来获取所有td 元素的数组，而不仅仅是第一个元素。

使用elementHandle.$$eval()，您可以将innerText 映射到td 元素的数组中，并返回结果。

'use strict';

const puppeteer = require('puppeteer');

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

    await page.goto('https://fantasy.premierleague.com/player-list/');

    await page.waitForSelector('table.ism-table');

    const data = await page.$$('table.ism-table tbody tr');

    for (const tr of data) {
      const tdata = await tr.$$eval('td', item => item.map(e => e.innerText));
      console.log(tdata);
    }

    await browser.close();
  } catch (e) {
    console.log('Here goes the error ', e);
  }
})();

注意：确保在page.waitForSelector() 和browser.close() 之前使用await 运算符，因为它们都返回承诺。