Puppeteer Getting the text within all the elements with <span> tag in DOM only if it has a <sup> child tag

user_13906039 0
Viewed 257

Newbie here. Experimenting with puppeteer. I have my HTML as given below

<html>
<div id="container">
      <span >
        Parent Text
        <sup name="20">Child Text</sup>  
      </span>
      <span >
       Parent Text
        <sup name="20">Child Text</sup>  
      </span>
      <span >
        Parent Text
        <sup name="20">Child Text</sup>  
      </span>

    </div>
</html>

JS File

const list = await page.evaluate(() => {
     const spans = document.getElementsByTagName("span")[0];
     let data=[];
    for (var i = 0; i < spanEntity.children.length; ++i){
      if(spanEntity.children[i].innerText ==="Child Text"){
        data.push(spans.innerText);
      }
    }
})

This works for first span element. But how can I do this for all the span elements in DOM. I know we can use querySelectorAll to check for all span elements in DOM. But I'm not aware how to check the for child nodes .Any help will be greatly appreciated. Thank You in advance!!.

puppeteer javascript
2 Answers

With map and filter:

let data = await page.$$eval('span', spans => spans
  .filter(span => span.querySelector('sup'))
  .map(span => span.innerText)
)
user_9660230

Adjust the code like below and you will traverse through all the span elements:

const spans = document.getElementsByTagName("span");
let data=[];

for (var i = 0; i < spans.length; ++i){
    var sup = spans[i].getElementsByTagName("sup");

  if(sup[0].innerText ==="Child Text"){
    data.push(spans[i].innerText);
  }
}

console.log(data);

https://jsfiddle.net/praveen_tamil/6fL2wbkt

user_163512480
Related