Puppeteer: Get innerHTML

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!

This is how i get innerHTML:

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

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


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

You can leverage the [`page.$$(selector)`](

[To see links please register here]

) to get all your target elments and then use [`page.evaluate()`](

[To see links please register here]

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

This should work with puppeteer:)

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

With regard to this part of your question...

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

There are some [particulars][1] 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][2].

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][3] passed to .click() aren't necessary if all you need is a single left-click.


[1]:

[To see links please register here]

[2]:

[To see links please register here]

[3]:

[To see links please register here]

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.

## Returning innerHTML of an Element

You can use the following methods to return the [`innerHTML`][1] of an element:

### [page.$eval()][2]

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

### [page.evaluate()][3]

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

### [page.$()][4] / [elementHandle.getProperty()][5] / [jsHandle.jsonValue()][6]

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

<hr>

## Clicking an Element with Specific innerHTML

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

### [page.$$eval()][7]

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

### [page.evaluate()][3]

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

### [page.evaluateHandle()][8] / [elementHandle.click()][9]

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();


[1]:

[To see links please register here]

[2]:

[To see links please register here]

[3]:

[To see links please register here]

[4]:

[To see links please register here]

[5]:

[To see links please register here]

[6]:

[To see links please register here]

[7]:

[To see links please register here]

[8]:

[To see links please register here]

[9]:

[To see links please register here]

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