Intercept websocket message using Playwright

When working with websocket communication in web application, there are times that we need to intercept the sent message and modify the existing content for testing purposes. Let’s see how you can do that using Playwright in this article.

Photo by solitsocial dot com on Unsplash

First, let’s try to run an example websocket application which showing a graph based on random value from the websocket service.

Let’s clone the example app from the websocket-example repo.

git clone https://github.com/cuongld2/websocket-example.git

To bring up the backend service, run below commands.

cd backend
pip install fastapi "uvicorn[standard]"
uvicorn run:app 

To bring up the frontend service, run below commands.

cd frontend
yarn install
yarn start

To intercept the websocket and modify the content then send it back to client, below is sample code to do that.

test('intercept websocket', async ({ page…