playwright-ws-inspector

Instalation

npm install playwright-ws-inspector --save-dev

Usage

using fixtures

// Fixture file...

import { intercepWsTraffic, PageWithWsInspector } from 'playwrigth-ws-inspector'

const test = baseTest.extend<CustomFixture>({
    createCustomPage: async ({ context }, use) => {
        const maker = async (options: { name: string }): Promise<PageWithWsInspector<CustomPage>> => {
            let page = await context.newPage()
            await intercepWsTraffic(page)
            return page
        }
        await use(maker)
    })

// Test file
test.describe('Test with WS interceptor', () => {
    const page = await createCustomPage({ name: '[page]' })
    await page.goto(SERVER_URL)

    // reset the traffic data (required for ordered tests, but always a good pratice to reduce the test load)
    page.resetWsTraffic()

    //execute any playwright stuff...

    //Test ws traffic on the page
    page.expectWsTraffic({
      assertations: [
        {
          type: "send",
          name: "connect",
          expect: {
            type: "connect",
            "message.version.major": 4,
          },
        }
      ]
    })
})    

no fixtures

import { intercepWsTraffic, PageWithWsInspector } from 'playwrigth-ws-inspector'

const test = baseTest.extend<CustomFixture>({
    createCustomPage: async ({ context }, use) => {
        const maker = async (options: { name: string }): Promise<PageWithWsInspector<CustomPage>> => {
            let page = await context.newPage()
            await intercepWsTraffic(page)
            return page
        }
        await use(maker)
    })

// Test file
test.describe('Test with WS interceptor', async ({ page }) => {
    
    // call `intercepWsTraffic` before calling `page.goto` 
    await intercepWsTraffic(page)

    await page.goto(SERVER_URL)

    // reset the traffic data (required for ordered tests, but always a good pratice to reduce the test load)
    page.resetWsTraffic()

    //execute any playwright stuff...

    //Test ws traffic on the page
    page.expectWsTraffic({
      assertations: [
        {
          type: "send",
          name: "connect",
          expect: {
            type: "connect",
            "message.version.major": 4,
          },
        }
      ]
    })
})

Assertations

|Property |Descripton | |---------|-----------| |type|'send' or 'recv'| |name|Optional name to help indentify test failures| |expect| Optional record describing the expected payload| |expectNot| Optional record describing the not expected payload|

Payload description

A payload description is a Record entry with "<json.path>: <number> | <string> | Object(deep equals) | RegEx"