在 Puppeteer 中，如何获取选择器的 innerHTML？答案

【问题标题】：In Puppeteer, how do I get the innerHTML of a selector?在 Puppeteer 中，如何获取选择器的 innerHTML？
【发布时间】：2018-09-02 21:36:19
【问题描述】：

目前，我正在尝试以下方法：

const element = await page.$("#myElement");
const html = element.innerHTML;

我希望 HTML 被打印出来，但我得到的是undefined。

我做错了什么？

【问题讨论】：

你能打印element吗？

标签： javascript node.js innerhtml puppeteer

【解决方案1】：

page.evaluate():

您可以使用page.evaluate() 来获取元素的innerHTML：

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

console.log(inner_html);

elementHandle.getProperty() / .jsonValue():

或者，如果您必须使用page.$()，您可以使用elementHandle.getProperty() 和elementHandle.jsonValue() 的组合访问innerHTML：

const inner_html = await (await (await page.$('#myElement')).getProperty('innerHTML')).jsonValue();

console.log(inner_html);

【讨论】：

【解决方案2】：

您可以使用page.$eval 访问innerHTML pf 指定的DOM。

Snippet sing page.$eval

const myContent = await page.$eval('#myDiv', (e) => e.innerHTML);
console.log(myContent);

与jest-puppeter 完美搭配。

【讨论】：

【解决方案3】：

您必须使用异步函数评估。

就我而言，我使用的是 puppeteer/jest 并且所有 await* 解决方案都在使用

error TS2531: Object is possibly 'null'

innerHTML with if 语句对我有用（示例的一部分）我在成员表中搜索第一个未选中的元素

while (n) {

  let elementI = await page.$('div >' + ':nth-child(' + i + ')' + '> div > div div.v-input__slot > div');
  let nameTextI = await page.evaluate(el => el.innerHTML , elementI);
  console.log('Mistery' + nameTextI);

  {...}
  i++;
  {...}
}

【讨论】：

【解决方案4】：

const html = await page.$eval("#myElement", e => e.innerHTML);

【讨论】：