0
347
ViewsPuppeteer question: How to loop thorough an elementhandle?
I have a function that extracts textContent from a CSS or XPath selector.
Can someone help me to achieve this? I'm confused
const nodes = await page.$$('css selector here');
for (const node of nodes) {
const stuff = await extractText(page, node, 'css selector to extract text') || null;
}so it will extract text only if the node has the specified selector, otherwise output as null.
·
Juan Pablo Isaza
2 answers
Answer question0
Sample HTML:
<ul>
<!-- Nodes you would like to be evaluated -->
<li class="red">Color Red 1</li> <!-- Node you would like not to extractText and get null as result -->
<li class="red">Color Red 2</li> <!-- Node you would like not to extractText and get null as result -->
<li class="blue">Color Blue 1</li> <!-- Node you would like to extractText -->
<li class="blue">Color Blue 2</li> <!-- Node you would like to extractText -->
<!-- Nodes you would not like to be evaluated -->
<li class="green">Color Green 1</li>
<li class="green">Color Green 2</li>
<li class="yellow">Color Yellow 1</li>
<li class="yellow">Color Yellow 2</li>
</ul>
Puppeteer code:
const puppeteer = require('puppeteer');
const extractText = async (page, node, selector) => {
// In complex scenarios use nodeClassName will not be enough
// and you will need to use the Private API of ElementHandle _remoteObject
const nodeClassName = await node.getProperty('className')
const nodeJsonValue = await nodeClassName.jsonValue()
const nodeValueForComparison = '.' + nodeJsonValue
if(nodeValueForComparison === selector){
const text = await page.$eval(selector, element => element.innerText)
console.log(text)
return text
}
return null
}
(async() => {
const url = 'Your URL'
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
await page.goto('url');
// Pass the selectors of Nodes you would like to be evaluated
// separated by a comma
const nodes = await page.$$('.red, .blue', node => node);
const result = [];
for (const node of nodes) {
const stuff = await extractText(page, node, '.blue');
result.push(stuff)
}
console.log(result)
await browser.close();
})();
·
Juan Pablo Isaza
Report
0
If I understand correctly, you can try something like this:
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch();
const html = `
<!doctype html>
<html>
<head><meta charset='UTF-8'><title>Test</title></head>
<body>
<p>Text 1.</p>
<p>Text <span>2</span>.</p>
</body>
</html>`;
try {
const [page] = await browser.pages();
await page.goto(`data:text/html,${encodeURIComponent(html)}`);
const nodes = await page.$$('p');
for (const node of nodes) {
const stuff = await extractText(page, node, 'span') || null;
console.log(stuff);
}
} catch (err) { console.error(err); } finally { await browser.close(); }
function extractText(page, node, selector) {
return page.evaluate(
(node, selector) => node.querySelector(selector)?.innerText ?? null,
node,
selector,
);
}
·
Juan Pablo Isaza
Report
Answer question