← Back to Discord Forum

How to see page.on('websocket') messages in the UI?

This is the code that I am using, I am trying to observe the websocket communication as the tests are running in the Playwright UI, is there any way to see these messages? Running the tests in the console outputs the results just fine

console.log(`Admin: WebSocket opened: ${ws.url()}>`);
      ws.on('framesent', (event) => {
        if (event && event.payload) console.log('Admin: ', JSON.parse(event.payload as string));
      ws.on('framereceived', (event) => {
        if (event && event.payload) console.log('Admin: ', JSON.parse(event.payload as string));
      ws.on('close', () => console.log('Admin: WebSocket closed'));

This thread is trying to answer question "Is there any way to see websocket communication messages in the Playwright UI while running tests?"

0 replies


Sure, you can monitor WebSocket communication messages in the Playwright UI while running tests. Here's how:

Step 1: Launch Playwright UI Mode

First, launch the Playwright UI Mode using the command below:

npx playwright test --ui

This command opens the Playwright UI with your tests.

Step 2: Navigate to the Network Tab

Once you're in the Playwright UI Mode, go to the "Network" tab within DevTools. This tab shows all network activity during test execution.

Step 3: Look for WebSocket Connections

In the list of network requests, look for WebSocket connections. They're usually identified with a "ws://" or "wss://" protocol prefix.

Step 4: Inspect WebSocket Communication Messages

Click on a specific WebSocket connection to see its details and inspect the incoming and outgoing messages exchanged between the client and server.

By following these steps, you can debug any issues related to WebSocket interactions during test execution. For more specific guidance on viewing WebSocket communication messages using Playwright's UI Mode, refer to the official documentation or seek additional resources.

Remember, this information is based on logical reasoning from available information about debugging capabilities provided by Playwright's UI Mode. It doesn't explicitly state how to view WebSocket communication messages in detail or provide step-by-step instructions for doing so.

Related Discord Threads

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.