Skip to content

Playwright UtilsPowerful utilities for Playwright testing from SEON

A collection of production-ready utilities from SEON Technologies, designed to make Playwright testing more efficient and maintainable.

Playwright Utils

One Pattern, Two Ways to Use

Every utility follows the same design: functional core, fixture shell.

typescript
// Direct function - explicit dependencies
import { apiRequest } from '@seontechnologies/playwright-utils/api-request'
const result = await apiRequest({ request, method: 'GET', path: '/api/users' })

// Playwright fixture - injected, ready to use
test('example', async ({ apiRequest }) => {
  const result = await apiRequest({ method: 'GET', path: '/api/users' })
})

Use functions for scripts and simple cases. Use fixtures for test suites.

Playwright 1.59 Debugging Flow

  • npm run test:pw:debug opens the Playwright Inspector for step-through debugging
  • npm run test:pw-ui uses Playwright UI Mode for interactive runs and filtering
  • npm run show:trace -- test-results/<run>/trace.zip opens the trace viewer for a captured run
typescript
// Recent Playwright page diagnostics fit nicely alongside playwright-utils helpers
const consoleMessages = await page.consoleMessages({
  filter: 'since-navigation'
})
const pageErrors = await page.pageErrors({
  filter: 'since-navigation'
})
const requests = await page.requests()

Quick Example

typescript
import { test } from '@seontechnologies/playwright-utils/fixtures'

test('API request with schema validation', async ({ apiRequest }) => {
  const { status, body } = await apiRequest({
    method: 'GET',
    path: '/api/users/123'
  }).validateSchema(userSchema)

  expect(status).toBe(200)
})
typescript
import { test } from '@seontechnologies/playwright-utils/network-recorder/fixtures'

test('offline CRUD testing', async ({ page, context, networkRecorder }) => {
  await networkRecorder.setup(context)

  // First run: records network traffic
  // Subsequent runs: plays back from HAR (no backend needed!)
  await page.goto('/')
  await page.fill('#name', 'Test User')
  await page.click('#submit')
})

Fixture Import Options

You can import fixtures in multiple ways:

  • Combined: import { test } from '@seontechnologies/playwright-utils/fixtures' - includes all fixtures
  • Individual: import { test } from '@seontechnologies/playwright-utils/network-recorder/fixtures' - specific utility only
  • Merged: Use mergeTests() to combine fixtures from multiple sources (see Installation)

Released under the Apache 2.0 License.