Puppeteer: Get inner HTML

Question

does anybody know how to get the innerHTML or text of an element. Or even better; how to click an element with a specific innerHTML. This is how it would work with normal javascript:

var found = false
$(selector).each(function() {
                if (found) return;
                else if ($(this).text().replace(/[^0-9]/g, '') === '5' {
                    $(this).trigger('click');
                    found = true
                }

Thanks in advance for any help!

Answer 1

You can leverage the page.$$(selector) to get all your target elments and then use page.evaluate() to get the content(innerHTML), then apply your criteria. It should look something like:

const targetEls = await page.$$('yourFancySelector');
for(let target of targetEls){
  const iHtml = await page.evaluate(el => el.innerHTML, target); 
  if (iHtml.replace(/[^0-9]/g, '') === '5') {
    await target.click();
    break;
  }
}

Answer 2

<div id="innerHTML">Hello</div>


var myInnerHtml = document.getElementById("innerHTML").innerHTML;
console.log(myInnerHtml);

Answer 3

This should work with puppeteer:)

const page = await browser.newPage();
const title = await page.evaluate(el => el.innerHTML, await page.$('h1'));

Answer 4

I can never get the .innerHtml to work reliable. I always do the following:

let els = page.$$('selector');
for (let el of els) {
  let content = await (await el.getProperty('textContent')).jsonValue();
}

Then you have your text in the 'content' variable.

Answer 5

This is how i get innerHTML:

page.$eval(selector, (element) => {
  return element.innerHTML
})

Answer 6

With regard to this part of your question...

"Or even better; how to click an element with a specific innerHTML."

There are some particulars around innerHTML, innerText, and textContent that might give you grief. Which you can work-around using a sufficiently loose XPath query with Puppeteer v1.1.1.

Something like this:

const el = await page.$x('//*[text()[contains(., "search-text-here")]]');
await el[0].click({     
                button: 'left',
                clickCount: 1,
                delay: 50
            });

Just keep in mind that you will get an array of ElementHandles back from that query. So... the particular item you are looking for might not be at [0] if your text isn't unique.

Options passed to .click() aren't necessary if all you need is a single left-click.