Puppeteer：获取 innerHTML答案

【问题标题】：Puppeteer: Get innerHTMLPuppeteer：获取 innerHTML
【发布时间】：2018-03-07 23:06:17
【问题描述】：

有人知道如何获取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
    }
});

提前感谢您的帮助！

【问题讨论】：

标签： javascript node.js selenium webautomation puppeteer

【解决方案1】：

这就是我获得 innerHTML 的方式：

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

【讨论】：

我这样做并控制台记录 element.innerHTML 并打印出 Promise { }。即使元素已经渲染到浏览器（headless false）。您知道为什么会发生这种情况吗？
请也试试这个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);

【解决方案2】：

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


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

【讨论】：

不相关的答案
必须使用puppeteer

【解决方案3】：

您可以利用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;
  }
}

【讨论】：

【解决方案4】：

这应该适用于 puppeteer:)

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

【讨论】：

您在这里进行了两次评估。这似乎是个坏主意。
如果await page.$('h1') 之前被调用并且您计划多次使用元素句柄，这可能很有用。

【解决方案5】：

关于你的这部分问题...

“甚至更好；如何单击具有特定 innerHTML 的元素。”

innerHTML、innerText 和 textContent 周围有一些 particulars 可能会让您感到悲伤。您可以使用带有Puppeteer v1.1.1 的足够松散的XPath 查询来解决这个问题。

类似这样的：

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

请记住，您将从该查询中得到一个 ElementHandles 数组。所以...如果您的文本不是唯一的，您正在寻找的特定项目可能不在 [0] 处。

如果您只需要一次左键单击，则不需要传递给 .click() 的Options。

【讨论】：

【解决方案6】：

你可以简单地写如下。（后半句不用等待）

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

【讨论】：

【解决方案7】：

我永远无法让 .innerHtml 可靠地工作。我总是这样做：

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

然后你的文本在'content'变量中。

【讨论】：

【解决方案8】：

返回元素的 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();

【讨论】：