Кукольник: регистрировать HTML-объект DOM в методе оценки () - PullRequest
Новая
       68

Кукольник: регистрировать HTML-объект DOM в методе оценки ()

0 голосов
/ 22 октября 2018

Когда я запускаю скрипт кукловода, если я хочу сделать журнал на странице. Оценить, я могу использовать код, подобный приведенному ниже 

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

К сожалению, он не работает, если я хочу войтиобъект:

Например, приведенный ниже код не регистрирует должным образом js obj: 

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

Отображается:

optionObj: {}

Вы знаете, как справиться с этим, пожалуйста?

1 Ответ

0 голосов
/ 22 октября 2018

Проблема

Если вы откроете 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 последний раз был опубликован на npm 4 годаназад, но все еще работает, чтобы удовлетворить потребности этого вопроса и, вероятно, не представляет никаких серьезных проблем безопасности, также не имеет внешних зависимостей.Их страница github последний раз обновлялась 20 дней назад с несколькими исправлениями.

Примечание:

  • Есть несколько других модулей для работы с dom, таких как jsdom и т. Д.
  • Что бы вы ни делали внутри .evaluate, оно запускается в контексте браузера .
  • Что бы вы ни делали вне этого, оно будет работать в контексте nodeJS .Поэтому вам придется относиться к ним по-разному.Подробнее о контексте здесь .
  • DOM означает HTML DOM (объектная модель документа) , он (только) доступен внутри браузера, поэтому лучше его использоватьтам, если это возможно.
...