chrome-remote-interfaceノードjsで複数のDOM要素を取得するにはどうすればよいですか？

Question

私はchrome-remote-interfaceでクローラを構築しようとしていますが、特定のターゲットID、クラスなどの複数の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); 
}); 

キーポイントは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(); 
    }); 
});