[Feature]: Websocket Support for Mock/Intercepting

🚀 Feature Request

My problem is i have a frontend angular that connect with websocket adress x. WS adress x send messages in some format and my frontend will response to it. The messages are really small. Problem i dont have access to the server that send the messages but to a rest api that call it. The post request to that rest api is quite longer and in xml format.

So i need to mock the websocket api and point the frontend to it (websocket adress y) and start the server with the tests in the playwright config...or i need to intercept the connection (websocket adress x) and send my own messages. Both is not possible...

I know that playwright can sniff on websockets in a page and it works as expected. But i cannot find something like page.route() and page.fulfill.

So i would like to have a page.route() AND page.on() where the websocket object has a "send" method so I can mock/intercept websockets

Example

Entire new Mock:

page.route("wss://ownWebsocketUrl")

AND/OR

Intercepting:

page.on('websocket', ws => {
   ws.on('open', () => {
    ws.send('something');
  });
});

So first approach is for reconnect the page entirely to a new mockserver or other websocket server. Then i could send my messages from this server to the frontend.

page.route("wss://localhost:8080")

For Example with this server from ws lib https://github.com/websockets/ws

import { WebSocketServer } from 'ws';

const wss = new WebSocketServer({ port: 8080 });

wss.on('connection', function connection(ws) {
  ws.on('error', console.error);

  ws.on('message', function message(data) {
    console.log('received: %s', data);
  });

  ws.send('something');
});

Motivation

It would increase the api testing capability further.
It would be possible to test the frontend in isolation and just based on the messages recieved.
It would bring the functionality to write(Send) over websockets and not only read messages.

microsoft / playwright