代码之家 › 专栏 › 技术社区 › Pipo

puppeteer:在evaluate()中记录HTML DOM对象

google-chrome-headless puppeteer node.js javascript

Pipo · 技术社区 · 6 年前

当我运行一个puppeteer脚本时,如果我想在page.evaluate中做一个日志,我可以使用下面这样的代码

page.on('console', consoleObj => console.log(consoleObj.text()));

不幸的是,如果我想记录一个对象,它将不起作用:

例如,下面的代码没有正确记录JS对象:

page.on("console", log => {
   console[log._type](log.text());
});

await pageBis.evaluate(() => {
   let selector = `select.form1 option[value="optionToSelect"]`;
   let optionObj = document.querySelectorAll(selector)[0];
   console.log(`optionObj : ${JSON.stringify(optionObj)}`);
});

它显示:

optObj:{}

你知道怎么办吗?

1 回复 | 直到 6 年前

Md. Abu Taher 6 年前

问题

如果你打开 about:blank 在默认浏览器上运行以下命令,

console.log(JSON.stringify(document.querySelector('body')))

它会回来的 {} ,因为它试图将HTML元素转换为不可能的字符串。

解决方案: domjson

有很多方法可以做到这一点。您可以在浏览器内使用此类库 addScriptTag 你可以随意使用。

用途:

// add the script to the window like <script src="...">
await page.addScriptTag({url:"https://www.unpkg.com/domjson"})

// run the code inside browser, we have domJSON available on window now
await page.evaluate(()=>{

  // use it
  const bodyJson = domJSON.toJSON(document.querySelector('body'));

  // log it
  console.log(JSON.stringify(bodyJson, true, 2))
})

结果:

{
  "meta": {
    "href": "about:blank",
    "userAgent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.67 Safari/537.36",
    "version": "0.1.2",
    "clock": 1,
    "date": "2018-10-22T15:08:03.973Z",
    "dimensions": {
      "inner": {
        "x": 1920,
        "y": 476
      },
      "outer": {
        "x": 1920,
        "y": 993
      }
    },
...

domjson 是4年前在NPM上发表的,但仍在努力满足这个问题的需要,可能不会造成任何重大的安全问题,也没有外部依赖性。他们的Github页面上一次更新是在20天前,有几个修复程序。

注: