Puppeteer - 如何遍历 queryObjects 以收集 WebSocket 对象的 url？

问题描述

我在 Node.js 模块中使用 Puppeteer。我用 queryObjects 检索了一个 WebSocket 对象原型，我需要提取 url 属性。

    // Get a handle to the websocket object prototype
    
    const prototypeHandle = await page.evaluateHandle(() => WebSocket.prototype);
    
    // Query all websocket instances into a jsHandle object
    
    const jsHandle = await page.queryObjects(prototypeHandle);
    
    // Count amount of map objects in heap
    
    // const count = await page.evaluate(maps => maps.length,jsHandle); // returns the expected amount (x2)

    // How to iterate through jsHandle to collect the url of each websockets

    await jsHandle.dispose();
    await prototypeHandle.dispose();

解决方法

您没有得到任何响应，因为 WebSocket 不是一个简单的 JSON 对象，当您使用 page.evaluate 进行评估时，它可以被字符串化并返回给您。

要获取页面中连接的websocket的url，可以通过对收集到的websocket实例/对象进行映射，并从中提取url。

const browser = await puppeteer.launch();
const page = (await browser.pages())[0];

// create a dummy websocket connection for testing purpose
await page.evaluate(() => new WebSocket('wss://echo.websocket.org/'));


const wsPrototypeHandle = await page.evaluateHandle(
  () => WebSocket.prototype
);

const wsInstances = await page.queryObjects(wsPrototypeHandle);

const wsUrls = await page.evaluate(
  (e) => e.map((e) => e['url']),// <-- simply access the object here
  wsInstances
);

console.log(wsUrls);

结果如下，

[ 'wss://echo.websocket.org/' ]