遍历Puppeteer元素数组,并进一步解析每个元素。

问题描述 投票:0回答:1

啊,伙计,我已经尝试用这个工作了很久,我很困。

我需要走访一系列DOM对象,并使用XPath选择器从每个对象中提取信息。我的源 HTML 没有任何识别 ID 或元素的类,所以需要走很多路。

下面是一些(非常简化的)示例代码。目标是得到一个LI元素的列表,然后在每个元素上使用更多的选择器来提取跨度内的名称。

简化后的示例代码。(https:/try-puppeteer.appspot.com。)

const html = '
<html> <ul>
    <li>
        <div> <span>Joe</span> </div>
    </li>
    <li>
        <div> <span>Bob</span> </div>
    </li>
</ul> </html>';

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

// now wait for a sec for the list to be populated
let arrayOfNames = await page.evaluate( async ( page ) => {
    let results = [];
    let ulElements = await page.$x( '//ul' );
    // strangely, I get back an object here, though shouldn't I get back an array?

    console.log( 'Got list of UL elements: ', ulElements );

    // loop through each item we found with selector above
    ulElements.forEach( async ( item ) => {
        let oneItem = await item.$x( '//li/div' );

        name = oneItem.$eval( 'span', element => element.innerText );

        console.log( 'We found ' + name );

        results.push( name );
    } );

    return results;
}, page );

// if it worked, arrayOfNames = ['Joe', 'Bob']

(是的,我知道有了这个HTML样本,我可以更容易地完成任务。但我所解析的真正的HTML是非常复杂的。这只是对我的问题进行了简化)。)

上面的代码失败了,说我有某种循环的DOM引用。我不知道为什么... ... 我一直在google...。我都不知道为什么,为什么我在一个地方用eval(),在另一个地方用$eval,然后我还读到evaluateHandler......太混乱了。

javascript puppeteer
1个回答
2
投票

我不认为你可以在里面使用Puppeteer API。page.evaluate():它在纯浏览器上下文中执行其函数参数代码,所以这里尽量只使用Web API。这里有两种等价的方式(使用选择器和XPath)来实现你的目标。

'use strict';

const html = `
<html> <ul>
    <li>
        <div> <span>Joe</span> </div>
    </li>
    <li>
        <div> <span>Bob</span> </div>
    </li>
</ul> </html>`;

const puppeteer = require('puppeteer');

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

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

    const arrayOfNames = await page.evaluate(() => {
      const results1 = Array.from(
        document.querySelectorAll('ul li > div span'),
        span => span.innerText,
      );

      const results2 = [];
      const xpathList = document.evaluate(
        '//ul//li/div//span',
        document.body, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null,
      );
      for (let i = 0; i < xpathList.snapshotLength; i++) {
        results2.push(xpathList.snapshotItem(i).innerText);
      }

      return [results1, results2];
    });

    console.log(arrayOfNames);

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

和两种相同的结果。

[ [ 'Joe', 'Bob' ], [ 'Joe', 'Bob' ] ]
© www.soinside.com 2019 - 2024. All rights reserved.