Puppeteer遍历来自page。$$选择器的elementHandles

时间:2018-04-11 20:06:35

标签: javascript puppeteer

我正在构建一个刮刀,但我仍然坚持迭代通过elementHandles。

我需要获取我成功完成的行元素列表。在那之后每行我需要捕获tds text / innerHTML(不确定哪个是哪个)。现在,只需在stdout中打印它们就好了。

我得到的错误是UnhandledPromiseRejectionWarning: TypeError: tds.forEach is not a function,我在谷歌上搜索告诉我tds不是数组。

我能够在python和selenium中实现这一点,但由于我是一个javascript新手,我预计我会做一些非常错误的事情。

从我的理解element.$$('td')返回一个Promise,但如果我等待,我会得到SyntaxError: await is only valid in async function

  const selectors = await page.$$('#transactionItems > tbody > tr');
  console.log(selectors.length); // outputs 31 which is the right number
  selectors.forEach( (element) => {
    let tds = element.$$('td');
    console.log(tds);
    tds.forEach( (element) => { 
      console.log(element.innerText)
    });
  });

编辑:

我尝试过以下代码,然后成功打印出来,但这仍然不是我想要的。

const selectors = await page.$$('#transactionItems > tbody > tr ');
console.log(selectors.length);
for(let tr of selectors){
  const trText = await page.evaluate(el => el.innerHTML, tr);
  console.log(trText)
}

它输出以下内容:

<td> T737410C - <a class="pointer" target="_blank" onclick="openAPRImageWindow(&quot;T071835642571&quot;,&quot;112255603963&quot;);">Image</a></td>
<td>02/05/2018 06:48:06</td>
<td>DRPA</td>
<td> 07W - CBB</td>
<td>OPEN</td>
<td>$5.00</td>
<td>$25.00</td>
<td>$0.00</td>
<td>$30.00</td>

理想情况下我需要的输出是什么 ['T737410C', '02/05/2018 06:48:06', 'OPEN', '5.00', '25.00']

1 个答案:

答案 0 :(得分:2)

试试这个脚本: -

const puppeteer = require('puppeteer');

const html = `
<html>
    <body>
    <table>
    <tr><td> T737410C - <a href=".">Image</a></td>
        <td>02/05/2018 06:48:06</td><td>DRPA</td>
        <td> 07W - CBB</td><td>OPEN</td></tr>
    </table>
    </body>
</html>`;

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(`data:text/html,${html}`);

  const data = await page.evaluate(() => {
      const tds = Array.from(document.querySelectorAll('table tr td'))
      return tds.map(td => {
         var txt = td.innerHTML;
         return txt.replace(/<a [^>]+>[^<]*<\/a>/g, '').trim();
      });
  });

  //You will now have an array of strings
  console.log(data);
  await browser.close();
})()

但值得一提的是,您可能需要进行一些额外的替换以删除尾部破折号等。

输出

enter image description here