Question

我只是尝试使用chrome-remote-interface构建一个爬虫，但我不知道如何获取多个dom元素，如特定目标id，类。

代表：

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

关键是使用returnByValue: true返回JSON对象。

更新：您的表达式中存在错误，)中的结尾...('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();
    });
});

如何使用chrome-remote-interface node js获取多个DOM元素？

1 个答案: