Puppeteer: Get innerHTML

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!

score 48 · Accepted Answer · answered Oct 04 '17 at 13:11

48

This is how i get innerHTML:

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

answered Oct 04 '17 at 13:11

Ryan

658
6
6

I do this and console log element.innerHTML and it prints out Promise { }. Even though elements have been rendered to browser(headless false). Do you have any idea why this might be happening? – Gaurav Fotedar Jul 13 '18 at 18:34
Please try this as well `await page.goto('https://example.com'); const textContent = await page.evaluate(() => document.querySelector('p').textContent); const innerText = await page.evaluate(() => document.querySelector('p').innerText); console.log(textContent); console.log(innerText);` – Vaishnavi Patel Apr 03 '19 at 07:06

score 33 · Answer 2 · answered Mar 16 '20 at 21:18

Returning innerHTML of an Element

You can use the following methods to return the innerHTML of an element:

page.$eval()

const inner_html = await page.$eval('#example', element => element.innerHTML);

page.evaluate()

const inner_html = await page.evaluate(() => document.querySelector('#example').innerHTML);

page.$() / elementHandle.getProperty() / jsHandle.jsonValue()

const element = await page.$('#example');
const element_property = await element.getProperty('innerHTML');
const inner_html = await element_property.jsonValue();

Clicking an Element with Specific innerHTML

You can use the following methods to click on an element based on the innerHTML that is contained within the element:

page.$$eval()

await page.$$eval('.example', elements => {
  const element = elements.find(element => element.innerHTML === '<h1>Hello, world!</h1>');
  element.click();
});

page.evaluate()

await page.evaluate(() => {
  const elements = [...document.querySelectorAll('.example')];
  const element = elements.find(element => element.innerHTML === '<h1>Hello, world!</h1>');
  element.click();
});

page.evaluateHandle() / elementHandle.click()

const element = await page.evaluateHandle(() => {
  const elements = [...document.querySelectorAll('.example')];
  const element = elements.find(element => element.innerHTML === '<h1>Hello, world!</h1>');
  return element;
});

await element.click();

score 12 · Answer 3 · edited Dec 27 '17 at 14:59

12

This should work with puppeteer:)

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

edited Dec 27 '17 at 14:59

George G

7,443
12
45
59

answered Dec 27 '17 at 14:55

E. Fortes

1,338
12
12

2

You're evaluating twice here. It seems like a bad idea. – pguardiario Jul 24 '19 at 05:55
This could be useful if `await page.$('h1')` was called earlier and you planned on using the element handle multiple times. – ggorlen Nov 20 '20 at 01:30

LeOn - Han Li · Answer 4 · 2017-10-09T04:02:45.660

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;
  }
}

score 4 · Answer 5 · answered Feb 23 '19 at 12:16

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.

score 3 · Answer 6 · answered Mar 02 '18 at 18:32

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.

score 0 · Answer 7 · edited Apr 25 '21 at 17:47

0

You can simply write as below. (no need await sentence in the last part)

const center = await page.$eval('h2.font-34.uppercase > strong', e => e.innerHTML);

edited Apr 25 '21 at 17:47

Subodh Ghulaxe

18,333
14
83
102

answered Dec 01 '18 at 14:06

Naga

10,944
2
21
38

score -15 · Answer 8 · edited Oct 04 '17 at 13:46

-15

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


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

edited Oct 04 '17 at 13:46

Liam

27,717
28
128
190

answered Oct 04 '17 at 13:20

Kapil Kumar

1
2

2

Unrelated answer – Michael Commons Dec 18 '18 at 13:13
2

Must be use puppeteer – Marcos Mendes May 04 '19 at 15:00

Puppeteer: Get innerHTML

8 Answers8

Returning innerHTML of an Element

page.$eval()

page.evaluate()

page.$() / elementHandle.getProperty() / jsHandle.jsonValue()

Clicking an Element with Specific innerHTML

page.$$eval()

page.evaluate()

page.evaluateHandle() / elementHandle.click()

Linked