Puppeteer:获取内部HTML

Question

有没有人知道如何获取元素的innerHTML或文本.甚至更好; 如何单击具有特定innerHTML的元素.这是如何使用普通的javascript:

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

在此先感谢您的帮助!

Answer 1

这就是我如何获得innerHTML:

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

Answer 2

返回元素的innerHTML

您可以使用以下方法返回innerHTML元素的 ：

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

单击具有特定 innerHTML 的元素

您可以使用以下方法根据元素innerHTML中包含的来单击元素：

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

Answer 3

这应该适合木偶戏:)

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

Answer 4

您可以利用page.$$(selector)来获取所有目标元素，然后使用page.evaluate()来获取内容（innerHTML），然后应用您的标准。它应该看起来像：

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