啊,伙计,我已经尝试用这个工作了很久,我很困。
我需要走访一系列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......太混乱了。
我不认为你可以在里面使用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' ] ]