Hello:
I need some code sample on how to detect WebSocket (wss) requests by Playwright.
Basically, I can visit this URL with Chrome: https://www.websocket.org/echo.html
And click on “Connect” button to connect with the WebSocket server: wss://echo.websocket.org
Then type something in the message box, or using the default text in the message box “Rock it with HTML5 WebSocket”, then click on “Send” button, then I can see the messages on the “log” textbox, like this:
CONNECTED
SENT: Rock it with HTML5 WebSocket
RECEIVED: Rock it with HTML5 WebSocket

Then open Developer Tools from Chrome, on “Network” tab, I can see there is only one WS (WebSocket) request with the following headers:
Request URL:
wss://echo.websocket.org/?encoding=text
1. Request Method:
GET
2. Status Code:
101 Web Socket Protocol Handshake

However, I want to use Playwright in Node JS to simulate the above procedure, the following is my script and result (nothing shown up), and information about Node JS and NPM packages.

C:\playwright>type wss_echo.js
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch()
const context = await browser.newContext()
const page = await context.newPage()

await page.goto('https://www.websocket.org/echo.html')

await page.setViewportSize({ width: 1920, height: 937 })

await page.waitForSelector('.container #connect')
await page.click('.container #connect')

await page.waitForSelector('.container #sendMessage')
await page.click('.container #sendMessage')

await page.waitForSelector('.container #sendMessage')
await page.click('.container #sendMessage')

await page.waitForSelector('.container #sendMessage')
await page.click('.container #sendMessage')

await page.waitForSelector('.container #send')
await page.click('.container #send')

page.on('websocket', ws => {
console.log(WebSocket opened: ${ws.url()}>);
ws.on('framesent', event => console.log(event.payload));
ws.on('framereceived', event => console.log(event.payload));
ws.on('close', () => console.log('WebSocket closed'));
})

await browser.close()
})();

C:\playwright>node wss_echo.js

C:\playwright>

C:\playwright>npm list
playwright@1.0.0 C:\playwright
+-- playwright@1.12.3
`-- websocket@1.0.34

C:\playwright>node --version
v16.4.0

C:\playwright>
In short, find WebSocket in Chrome with help of DevTools works, but using Playwright (Node JS), I don’t know how to sniff the WebSocket requests, by the way, I also want to get some useful information in the WSS request header, like: Sec-WebSocket-Key, for example: its value is: pqs8t5+Rpq+VJS5hegaLfg==
How I can get all those information by using Playwright? (My OS: Windows 10)
Thanks,