Testing GuidesPlaywright

Playwright Integration

MockMaster integrates with Playwright for end-to-end testing.

npm install -D @playwright/test

Setup

playwright.config.ts

import { defineConfig } from '@playwright/test'
 
export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  use: {
    baseURL: 'http://localhost:3000',
  },
})

Basic Usage

import { test, expect } from '@playwright/test'
import { readScenario } from '@mockmaster/cli'
import { createReplayHandler } from '@mockmaster/msw-adapter'
 
test.describe('User Flow', () => {
  test('displays user profile', async ({ page }) => {
    const scenario = await readScenario('./scenarios', 'user-profile')
    const handler = createReplayHandler(scenario)
 
    await page.route('**/api/users/*', async (route) => {
      const url = new URL(route.request().url())
      const path = url.pathname.replace('/api', '')
 
      const response = handler({
        method: route.request().method(),
        path
      })
 
      if (response) {
        await route.fulfill({
          status: response.status,
          headers: response.headers,
          body: JSON.stringify(response.body)
        })
      }
    })
 
    await page.goto('/profile')
    await expect(page.getByRole('heading')).toBeVisible()
  })
})

Complete Example

See MASTER_DOCUMENTATION.md for complete examples.