在量角器中获取所有websocket消息

Question

我有一个react项目，其中我与网络套接字进行通信，并根据消息进行操作。我有时会更新UI或什么都不做。

[编写e2e测试时，我可以像这样测试UI中的组件：

When(/^I update the list "(\d+)"$/, (listNumber) => {
  const elements = browser.$$('div.list_id')[listNumber];
  browser.call(() => (
    // I make the websocket call based on the listNumber to update the list
  ));
});

效果很好。

我的问题是我想拥有一种与e2e测试相关的方法，该方法可以跟踪来自客户端的所有websocket消息。我确实有一个自定义的轮询逻辑，该逻辑可跟踪UI中的更改，但在这种情况下不能使用它。

例如：考虑以下来自websocket的消息

{"adding_item":"ListItem 1 with id 123"}
{"adding_item":"ListItem 2 with id 345"}
{"bonus_item":"BonusItem 1 with id 1"}
{"adding_item":"ListItem 3 with id 124"}

对于所有adding_item消息，我更改UI，但对于bonus_item，我不更改UI！如何在e2e测试中检测到已从WebSocket收到bonus_item？

我运行的npm命令："automation": "node node_modules/webdriverio/bin/wdio --host=localhost --baseUrl=http://localhost:9000 automation/wdio.conf.js"

几件事：我不想更改服务器/ websocket逻辑。除了e2e东西，我不想更改任何东西。表示我不想更改实际的应用程序。

Answer 1

要拦截WebSocket消息，必须安装devtools（https://webdriver.io/docs/devtools-service.html-请注意，这仅适用于Chrome浏览器）。安装后，您将可以使用Chrome DevTools协议（https://chromedevtools.github.io/devtools-protocol/tot/Network/#type-WebSocketFrame）截取websocket框架。

browser.cdp('Network', 'enable');
browser.on('Network.webSocketFrameReceived', (params) => {
    console.log(params.response.payloadData);
};

还请注意，您必须在wdio-conf.js中激活devtools：

export.config = {
    // ...
    services: ['devtools'],
    // ...
};

希望这会有所帮助。