playwrigth-ws-inspector

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"