Как получить несколько элементов DOM с помощью узла js удаленного интерфейса Chrome?

Question

Я просто пытаюсь создать сканер с chrome-remote-interface, но я не знаю, как получить несколько элементов dom, таких как идентификаторы конкретных целей, классы.

Например:

price = document.getelementbyid('price')

name= document.getelementbyid('name')

Код

    const CDP = require('chrome-remote-interface');
    CDP((client) => {
      // Extract used DevTools domains.
      const {Page, Runtime} = client;

      // Enable events on domains we are interested in.
      Promise.all([
        Page.enable()
      ]).then(() => {
        return Page.navigate({url: 'http://example.com'})
      });

      // Evaluate outerHTML after page has loaded.
      Page.loadEventFired(() => {
        Runtime.evaluate({expression: 'document.body.outerHTML'}).then((result) => {
//How to get Multiple Dom elements
          console.log(result.result.value);
          client.close();
        });
      });
    }).on('error', (err) => {
      console.error('Cannot connect to browser:', err);
    });

Обновить

const CDP = require('chrome-remote-interface');

CDP((client) => {
  // Extract used DevTools domains.
  const {DOM,Page, Runtime} = client;

  // Enable events on domains we are interested in.
  Promise.all([
    Page.enable()
  ]).then(() => {
    return Page.navigate({url: 'https://someDomain.com'});
  })
  Page.loadEventFired(() => {
    const expression = `({
            test: document.getElementsByClassName('rows')),
        })`
    Runtime.evaluate({expression,returnByValue: true}).then((result) => {
      console.log(result.result) // Error
      client.close()
    })
  })
}).on('error', (err) => {
  console.error('Cannot connect to browser:', err);
});

ошибка

{ type: 'object',
  subtype: 'error',
  className: 'SyntaxError',
  description: 'SyntaxError: Unexpected token )',
  objectId: '{"injectedScriptId":14,"id":1}' }

На самом деле я хочу перебрать список элементов, но я не знаю, где это идет не так

Answer 1

Вы не можете переместить объект DOM из контекста браузера в контекст Node.js, все, что вы можете сделать, это передать свойство или все, что можно считать объектом JSON. Здесь я предполагаю, что вы заинтересованы в вычисленном HTML.

Возможное решение:

const CDP = require('chrome-remote-interface');

CDP((client) => {
    // Extract used DevTools domains.
    const {Page, Runtime} = client;

    // Enable events on domains we are interested in.
    Promise.all([
        Page.enable()
    ]).then(() => {
        return Page.navigate({url: 'http://example.com'});
    });

    // Evaluate outerHTML after page has loaded.
    Page.loadEventFired(() => {
        const expression = `({
            name: document.getElementById('name').outerHTML,
            price: document.getElementById('price').outerHTML
        })`;
        Runtime.evaluate({
            expression,
            returnByValue: true
        }).then(({result}) => {
            const {name, price} = result.value;
            console.log(`name: ${name}`);
            console.log(`price: ${price}`);
            client.close();
        });
    });
}).on('error', (err) => {
    console.error('Cannot connect to browser:', err);
});

Ключевым моментом является возвращение объекта JSON с использованием returnByValue: true,

---

Обновление: у вас есть ошибка в вашем выражении, трейлинг ) в ...('rows')),, Но даже если вы исправите это, вы все равно окажетесь в неправильной ситуации, потому что вы пытаетесь передать массив объектов DOM (см. Первый абзац этого ответа). Опять же, если вы хотите только внешний HTML, вы можете сделать что-то вроде:

// Evaluate outerHTML after page has loaded.
Page.loadEventFired(() => {
    const expression = `
        // fetch an array-like of DOM elements
        var elements = document.getElementsByTagName('p');
        // create and return an array containing
        // just a property (in this case `outerHTML`)
        Array.prototype.map.call(elements, x => x.outerHTML);
    `;
    Runtime.evaluate({
        expression,
        returnByValue: true
    }).then(({result}) => {
        // this is the returned array
        const elements = result.value;
        elements.forEach((html) => {
             console.log(`- ${html}`);
        });
        client.close();
    });
});