获取量角器中的所有 websocket 消息答案

【问题标题】：Get all websocket messages in protractor获取量角器中的所有 websocket 消息
【发布时间】：2020-05-03 02:44:26
【问题描述】：

我有一个 react 项目，我在其中与 websocket 通信，并根据消息做一些事情。我有时会更新 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 的东西。这意味着我不想更改实际的应用程序。

【问题讨论】：

标签： javascript node.js websocket protractor webdriver-io

【解决方案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'],
    // ...
};

希望这会有所帮助。

【讨论】：