({
25 | request: context,
26 | method: 'POST',
27 | path: '/auth/identity-token',
28 | baseUrl: API_URL,
29 | body: {
30 | username,
31 | password,
32 | userIdentifier
33 | }
34 | })
35 |
36 | if (status !== 200) {
37 | throw new Error(`Failed to create ephemeral test user ${username}`)
38 | }
39 |
40 | return {
41 | token: body.token,
42 | userId: body.identity.userId,
43 | username: body.identity.username,
44 | password
45 | }
46 | } finally {
47 | await context.dispose()
48 | }
49 | }
50 |
51 | const generateUsername = (userIdentifier: string) =>
52 | `${userIdentifier}-${Date.now()}`
53 | const generatePassword = () =>
54 | `pwd-${Math.random().toString(36).substring(2, 10)}`
55 |
56 | export const generateUserData = (userIdentifier: string) => ({
57 | username: generateUsername(userIdentifier),
58 | password: generatePassword(),
59 | userIdentifier
60 | })
61 |
62 | export type UserData = {
63 | token: string
64 | userId: string
65 | username: string
66 | password: string
67 | }
68 |
--------------------------------------------------------------------------------
/sample-app/frontend/src/components/movie-form/movie-form.tsx:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 | import MovieInput from './movie-input'
3 | import ValidationErrorDisplay from '@components/validation-error-display'
4 | import { useMovieForm } from '@hooks/use-movie-form'
5 | import { SButton } from '@styles/styled-components'
6 |
7 | export default function MovieForm() {
8 | const {
9 | movieName,
10 | setMovieName,
11 | movieYear,
12 | setMovieYear,
13 | movieRating,
14 | setMovieRating,
15 | handleAddMovie,
16 | movieLoading,
17 | validationError,
18 | movieDirector,
19 | setMovieDirector
20 | } = useMovieForm()
21 |
22 | return (
23 |
24 | Add a New Movie
25 |
26 | {/* Zod key feature 4: use the validation state at the component */}
27 |
28 |
29 | setMovieName(e.target.value)}
34 | />
35 | setMovieYear(Number(e.target.value))}
40 | />
41 | setMovieRating(Number(e.target.value))}
46 | />
47 | setMovieDirector(e.target.value)}
52 | />
53 |
58 | {movieLoading ? 'Adding...' : 'Add Movie'}
59 |
60 |
61 | )
62 | }
63 |
64 | const SSubtitle = styled.h2`
65 | color: #333;
66 | font-size: 2rem;
67 | margin-bottom: 10px;
68 | `
69 |
--------------------------------------------------------------------------------
/playwright/support/auth/token/is-expired.ts:
--------------------------------------------------------------------------------
1 | import { log } from '@seontechnologies/playwright-utils/log'
2 |
3 | /**
4 | * Extracts the expiration timestamp from a JWT token payload
5 | *
6 | * Handles base64url encoding (replacing '-' with '+' and '_' with '/').
7 | * Adds padding as needed before decoding.
8 | * Returns the 'exp' claim from the JWT payload which represents the expiration timestamp in seconds since Unix epoch.
9 | *
10 | * @param token - Raw JWT token string in format header.payload.signature
11 | * @returns The expiration timestamp in seconds since epoch, or null if unable to extract
12 | */
13 | const extractJwtExpiration = (token: string): number | null => {
14 | if (typeof token !== 'string' || token.split('.').length !== 3) {
15 | return null
16 | }
17 |
18 | try {
19 | const [, payload] = token.split('.')
20 | if (!payload) {
21 | log.debugSync('Invalid JWT token format; no payload')
22 | return null
23 | }
24 | const base64 = payload.replace(/-/g, '+').replace(/_/g, '/')
25 | const padded = base64.padEnd(
26 | base64.length + ((4 - (base64.length % 4)) % 4),
27 | '='
28 | )
29 | const decoded = JSON.parse(Buffer.from(padded, 'base64').toString('utf-8'))
30 | return decoded.exp || null
31 | } catch (err) {
32 | log.debugSync(`Error parsing JWT token: ${err}`)
33 | return null
34 | }
35 | }
36 |
37 | /**
38 | * Check if a token is expired
39 | * @param rawToken JWT token or stringified storage state
40 | * @returns true if token is expired or invalid, false if valid
41 | */
42 | export const isTokenExpired = (rawToken: string): boolean => {
43 | const expiration = extractJwtExpiration(rawToken)
44 | if (expiration !== null) {
45 | const currentTime = Math.floor(Date.now() / 1000)
46 | const isExpired = expiration < currentTime
47 | if (isExpired) {
48 | log.infoSync('JWT token is expired based on payload expiration claim')
49 | }
50 | return isExpired
51 | }
52 |
53 | log.infoSync('Could not determine token expiration - assuming expired')
54 | return true
55 | }
56 |
--------------------------------------------------------------------------------
/sample-app/backend/src/events/movie-events.test.ts:
--------------------------------------------------------------------------------
1 | import { produceMovieEvent } from './movie-events'
2 | import { Kafka } from 'kafkajs'
3 | import { generateMovieWithId } from '../../../../playwright/support/utils/movie-factories'
4 | import type { Movie } from '@shared/types/movie-types'
5 |
6 | // Mock kafkajs
7 | jest.mock('kafkajs', () => ({
8 | Kafka: jest.fn().mockImplementation(() => ({
9 | producer: jest.fn(() => ({
10 | connect: jest.fn().mockResolvedValue(undefined),
11 | send: jest.fn(),
12 | disconnect: jest.fn()
13 | }))
14 | }))
15 | }))
16 |
17 | // Mock fs
18 | jest.mock('node:fs/promises', () => ({
19 | appendFile: jest.fn().mockResolvedValue(undefined)
20 | }))
21 |
22 | // Mock console.table and console.error
23 | global.console.table = jest.fn()
24 | global.console.error = jest.fn()
25 |
26 | describe('produceMovieEvent', () => {
27 | const mockMovie: Movie = generateMovieWithId()
28 | const key = mockMovie.id.toString() // the key is always a string in Kafka
29 |
30 | beforeEach(() => {
31 | jest.clearAllMocks()
32 | })
33 |
34 | it('should produce a movie event successfully', async () => {
35 | const kafkaInstance = new Kafka({
36 | clientId: 'test-client',
37 | brokers: ['localhost:9092']
38 | })
39 | const event = {
40 | topic: 'movie-created',
41 | messages: [{ key, value: JSON.stringify(mockMovie) }]
42 | }
43 | const producer = kafkaInstance.producer()
44 | await producer.connect()
45 | await producer.send(event)
46 | await producer.disconnect()
47 |
48 | const result = await produceMovieEvent(mockMovie, 'created')
49 |
50 | expect(Kafka).toHaveBeenCalledWith(expect.any(Object))
51 | expect(producer.connect).toHaveBeenCalled()
52 | expect(producer.send).toHaveBeenCalledWith(event)
53 | expect(producer.disconnect).toHaveBeenCalled()
54 | expect(console.table).toHaveBeenCalled()
55 | expect(result).toEqual(
56 | expect.objectContaining({
57 | topic: 'movie-created',
58 | messages: [{ key, value: mockMovie }]
59 | })
60 | )
61 | })
62 | })
63 |
--------------------------------------------------------------------------------
/src/log/utils/playwright-step-utils.ts:
--------------------------------------------------------------------------------
1 | /** The main purpose is to make it possible to use Playwright's step reporting
2 | * in both test and non-test contexts without causing errors. */
3 |
4 | // Store reference to the test object if available
5 | let testObj:
6 | | { step: (title: string, body: () => Promise) => Promise }
7 | | undefined
8 |
9 | // Try to load Playwright test, but handle gracefully if unavailable
10 | try {
11 | // This will succeed in test files but might fail in utility files
12 | // eslint-disable-next-line @typescript-eslint/no-require-imports
13 | const { test } = require('@playwright/test')
14 | testObj = test
15 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
16 | } catch (_error) {
17 | // We'll handle this gracefully - testObj will remain undefined
18 | console.info(
19 | 'Note: Running in non-test context, Playwright test API is not available'
20 | )
21 | }
22 |
23 | /**
24 | * Checks if the Playwright test step API is available in the current context
25 | */
26 | const isPlaywrightStepAvailable = (): boolean => !!testObj?.step
27 |
28 | /** Executes a Playwright test step with error handling */
29 | const executePlaywrightStep = async (stepMessage: string): Promise => {
30 | if (!testObj) return
31 |
32 | try {
33 | // We're using an empty function because we just want to mark the step in the report
34 | // The actual work should happen outside this step
35 | await testObj.step(stepMessage, async () => {
36 | // This is intentionally empty - we're just using test.step for reporting,
37 | // not for actual execution control, as we've already processed the step
38 | })
39 | } catch (error) {
40 | // If test.step fails, don't crash - just skip using it
41 | console.debug('Failed to execute Playwright test.step:', error)
42 | }
43 | }
44 |
45 | /** Attempts to execute a Playwright test step if the test API is available */
46 | export const tryPlaywrightStep = async (stepMessage: string): Promise => {
47 | if (isPlaywrightStepAvailable()) {
48 | await executePlaywrightStep(stepMessage)
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/playwright/tests/auth-session/auth-session-sanity.spec.ts:
--------------------------------------------------------------------------------
1 | import { log } from '../../../src/log'
2 | import { test, expect } from '../../support/merged-fixtures'
3 |
4 | /**
5 | * Create a preview of a token that's safe for logging
6 | * @param token - The full token
7 | * @returns A shortened preview with the middle part replaced by '...'
8 | */
9 | const createTokenPreview = (token: string): string =>
10 | token.substring(0, 10) + '...' + token.substring(token.length - 5)
11 |
12 | // Configure tests to run in serial mode (sequentially, not in parallel)
13 | // This is required for properly testing auth token reuse between tests
14 | test.describe.configure({ mode: 'serial' })
15 | test.describe('Auth Session Example', () => {
16 | // This test just demonstrates that we get a token
17 | test('should have auth token available', async ({ authToken }) => {
18 | // Token is already obtained via the fixture
19 | expect(authToken).toBeDefined()
20 | expect(typeof authToken).toBe('string')
21 | expect(authToken.length).toBeGreaterThan(0)
22 |
23 | // Log token for debugging (shortened for security)
24 | const tokenPreview = createTokenPreview(authToken)
25 | await log.info(`Token available without explicit fetching: ${tokenPreview}`)
26 | })
27 |
28 | // This test will reuse the same token without making another request
29 | test('should reuse the same auth token', async ({
30 | authToken,
31 | apiRequest
32 | }) => {
33 | // The token is already available without making a new request
34 | expect(authToken).toBeDefined()
35 | expect(typeof authToken).toBe('string')
36 |
37 | // We can use the token for API requests
38 | const { status } = await apiRequest({
39 | method: 'GET',
40 | path: '/movies',
41 | headers: {
42 | Authorization: authToken // Use the token directly as the CRUD helpers do
43 | }
44 | })
45 |
46 | expect(status).toBe(200)
47 |
48 | // Log token for debugging (shortened for security)
49 | const tokenPreview = createTokenPreview(authToken)
50 | await log.step(
51 | `Second test reuses the token without fetching again: ${tokenPreview}`
52 | )
53 | })
54 | })
55 |
--------------------------------------------------------------------------------
/playwright/config/base.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig, devices } from '@playwright/test'
2 | import { config as dotenvConfig } from 'dotenv'
3 | import path from 'path'
4 |
5 | // the default settings turn on console logging
6 | // this is just to show that we can set things here
7 | // Both configuration styles are supported:
8 |
9 | // Boolean style (simple):
10 | // log.configure({
11 | // console: false
12 | // })
13 |
14 | // Object style (with additional options):
15 | // log.configure({
16 | // console: {
17 | // enabled: false,
18 | // colorize: true,
19 | // timestamps: true
20 | // }
21 | // })
22 |
23 | dotenvConfig({
24 | path: path.resolve(__dirname, '../../.env')
25 | })
26 |
27 | export const baseConfig = defineConfig({
28 | globalSetup: path.resolve(__dirname, '../support/global-setup.ts'),
29 |
30 | testDir: './playwright/tests',
31 |
32 | testMatch: '**/*.spec.ts',
33 |
34 | fullyParallel: true,
35 |
36 | forbidOnly: !!process.env.CI,
37 |
38 | retries: process.env.CI ? 2 : 1,
39 |
40 | workers: process.env.CI
41 | ? undefined // Let playwright use default (50% of CPU cores) in CI
42 | : '100%', // Use all CPU cores for local runs
43 |
44 | reporter: process.env.CI
45 | ? [
46 | ['line'],
47 | ['html'],
48 | ['blob'],
49 | ['json', { outputFile: 'test-results.json' }],
50 | ['junit', { outputFile: 'test-results.xml' }]
51 | ]
52 | : [['list'], ['html', { open: 'never' }]],
53 |
54 | timeout: 90000,
55 |
56 | expect: {
57 | timeout: 15000
58 | },
59 |
60 | /* Shared settings for all the projects below */
61 | use: {
62 | trace: 'retain-on-first-failure',
63 | testIdAttribute: 'data-testid'
64 | },
65 |
66 | projects: [
67 | {
68 | name: 'chromium',
69 | use: { ...devices['Desktop Chrome'] }
70 | },
71 |
72 | // Only enable Google Chrome when multi-browser is explicitly enabled
73 | ...(process.env.PW_MULTI_BROWSER === 'true'
74 | ? [
75 | {
76 | name: 'google-chrome',
77 | use: { ...devices['Desktop Chrome'], channel: 'chrome' }
78 | }
79 | ]
80 | : [])
81 | ]
82 | })
83 |
--------------------------------------------------------------------------------
/sample-app/backend/prisma/client.ts:
--------------------------------------------------------------------------------
1 | import { PrismaClient } from '@prisma/client'
2 |
3 | const globalForPrisma = global as unknown as {
4 | prisma: PrismaClient | undefined
5 | }
6 |
7 | export const prisma =
8 | globalForPrisma.prisma ??
9 | new PrismaClient({
10 | log: ['query']
11 | })
12 |
13 | if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma
14 |
15 | // Prisma notes
16 | /*
17 | To connect our applications to a database, we often use an Object-relational
18 | Mapper (ORM). An ORM is a tool that sits between a database and an application.
19 | It’s responsible for mapping database records to objects in an application.
20 | Prisma is the most widely-used ORM for Next.js (or Node.js) applications.
21 |
22 | 1. **Define Models**: To use Prisma, first we have to define our data models.
23 | These are entities that represent our application domain, such as User,
24 | Order, Customer, etc. Each model has one or more fields (or properties).
25 |
26 | `npx prisma init` , and then at `./prisma/schema.prisma` create your models.
27 |
28 | > We want to match these with our Zod types, ex: `./app/api/users/schema.ts`, `./app/api/products/schema.ts`
29 |
30 | 2. **Create migration file**: Once we create a model, we use Prisma CLI to
31 | create a migration file. A migration file contains instructions to generate
32 | or update database tables to match our models. These instructions are in SQL
33 | language, which is the language database engines understand.
34 |
35 | `npx prisma migrate dev`
36 |
37 | 3. **Create a Prisma client**: To connect with a database, we create an instance
38 | of PrismaClient. This client object gets automatically generated whenever we
39 | create a new migration. It exposes properties that represent our models (eg
40 | user).
41 |
42 | At `./prisma/client.ts` copy paste this code
43 |
44 | ```ts
45 | import {PrismaClient} from '@prisma/client'
46 |
47 | const globalForPrisma = global as unknown as {
48 | prisma: PrismaClient | undefined
49 | }
50 |
51 | export const prisma =
52 | globalForPrisma.prisma ??
53 | new PrismaClient({
54 | log: ['query'],
55 | })
56 |
57 | if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma
58 | */
59 |
--------------------------------------------------------------------------------
/sample-app/frontend/src/test-utils/vitest-utils/utils.tsx:
--------------------------------------------------------------------------------
1 | import type { FC, ReactNode } from 'react'
2 | import { Suspense } from 'react'
3 | import type { RenderOptions } from '@testing-library/react'
4 | import { render } from 'vitest-browser-react'
5 | import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
6 | import { ErrorBoundary } from 'react-error-boundary'
7 | import { MemoryRouter, Routes, Route } from 'react-router-dom'
8 | import ErrorComponent from '@components/error-component'
9 | import LoadingMessage from '@components/loading-message'
10 | import { describe, it, expect, beforeEach, beforeAll, afterAll } from 'vitest'
11 | import userEvent from '@testing-library/user-event'
12 |
13 | interface WrapperProps {
14 | children: ReactNode
15 | route?: string
16 | path?: string
17 | }
18 |
19 | const AllTheProviders: FC = ({
20 | children,
21 | route = '/',
22 | path = '/'
23 | }) => {
24 | return (
25 |
26 | }>
27 | }>
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | )
37 | }
38 |
39 | /**
40 | * Custom render function that wraps component with all necessary providers:
41 | * - QueryClientProvider
42 | * - ErrorBoundary
43 | * - Suspense
44 | * - MemoryRouter with Routes
45 | */
46 | export function wrappedRender(
47 | ui: ReactNode,
48 | {
49 | route = '/',
50 | path = '/',
51 | ...options
52 | }: Omit & {
53 | route?: string
54 | path?: string
55 | } = {}
56 | ) {
57 | return render(ui, {
58 | wrapper: ({ children }) => (
59 |
60 | {children}
61 |
62 | ),
63 | ...options
64 | })
65 | }
66 |
67 | // re-export everything
68 | export * from '@testing-library/react'
69 | export * from './msw-setup'
70 | export { describe, it, expect, userEvent, beforeEach, beforeAll, afterAll }
71 |
--------------------------------------------------------------------------------
/playwright/tests/sample-app/frontend/movie-crud-e2e-network-record-playback.spec.ts:
--------------------------------------------------------------------------------
1 | import { expect, test } from '@playwright/support/merged-fixtures'
2 | import { addMovie } from '@playwright/support/ui-helpers/add-movie'
3 | import { editMovie } from '@playwright/support/ui-helpers/edit-movie'
4 | import { log } from 'src/log'
5 |
6 | process.env.PW_NET_MODE = 'playback'
7 |
8 | test.describe('movie crud e2e - browser only (network recorder)', () => {
9 | test.beforeEach(async ({ page, networkRecorder, context }) => {
10 | // Setup network recorder based on PW_NET_MODE
11 | await networkRecorder.setup(context)
12 | await page.goto('/')
13 | })
14 |
15 | test('should add, edit and delete a movie using only browser interactions', async ({
16 | page,
17 | interceptNetworkCall
18 | }) => {
19 | const { name, year, rating, director } = {
20 | name: 'centum solutio suscipit',
21 | year: 2009,
22 | rating: 6.3,
23 | director: 'ancilla crebro crux'
24 | }
25 |
26 | await log.step('add a movie using the UI')
27 | await addMovie(page, name, year, rating, director)
28 | await page.getByTestId('add-movie-button').click()
29 |
30 | await log.step('click on movie to edit')
31 | await page.getByText(name).click()
32 |
33 | await log.step('Edit the movie')
34 | const { editedName, editedYear, editedRating, editedDirector } = {
35 | editedName: 'angustus antepono crapula',
36 | editedYear: 2002,
37 | editedRating: 3.4,
38 | editedDirector: 'cognatus avarus aeger'
39 | }
40 |
41 | const loadUpdateMovie = interceptNetworkCall({
42 | method: 'PUT',
43 | url: '/movies/*'
44 | })
45 | await log.step('edit movie using the UI')
46 | await editMovie(page, editedName, editedYear, editedRating, editedDirector)
47 | await loadUpdateMovie
48 |
49 | // Go back and verify edit
50 | await page.getByTestId('back').click()
51 | await expect(page).toHaveURL('/movies')
52 | await page.getByText(editedName).waitFor()
53 |
54 | await log.step('delete movie from list')
55 | await page.getByTestId(`delete-movie-${editedName}`).click()
56 | await expect(
57 | page.getByTestId(`delete-movie-${editedName}`)
58 | ).not.toBeVisible()
59 | })
60 | })
61 |
--------------------------------------------------------------------------------
/sample-app/frontend/src/components/movie-details/movie-edit-form.tsx:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 | import { useMovieEditForm } from '@hooks/use-movie-edit-form'
3 | import { SButton } from '@styles/styled-components'
4 | import type { Movie } from '@shared/types/movie-types'
5 | import ValidationErrorDisplay from '@components/validation-error-display'
6 | import { MovieInput } from '@components/movie-form'
7 |
8 | type MovieEditFormProps = Readonly<{
9 | movie: Movie
10 | onCancel: () => void
11 | }>
12 |
13 | export default function MovieEditForm({ movie, onCancel }: MovieEditFormProps) {
14 | const {
15 | movieName,
16 | setMovieName,
17 | movieYear,
18 | setMovieYear,
19 | movieRating,
20 | setMovieRating,
21 | handleUpdateMovie,
22 | movieLoading,
23 | validationError,
24 | movieDirector,
25 | setMovieDirector
26 | } = useMovieEditForm(movie)
27 |
28 | return (
29 |
30 | Edit Movie
31 |
32 |
33 |
34 | setMovieName(e.target.value)}
39 | />
40 | setMovieYear(Number(e.target.value))}
45 | />
46 | setMovieRating(Number(e.target.value))}
51 | />
52 | setMovieDirector(e.target.value)}
57 | />
58 |
63 | {movieLoading ? 'Updating...' : 'Update Movie'}
64 |
65 |
66 | Cancel
67 |
68 |
69 | )
70 | }
71 |
72 | const SSubtitle = styled.h2`
73 | color: #333;
74 | font-size: 2rem;
75 | margin-bottom: 10px;
76 | `
77 |
--------------------------------------------------------------------------------
/playwright/tests/network-error-monitor/basic-detection.spec.ts:
--------------------------------------------------------------------------------
1 | import { expect, test } from '@playwright/support/merged-fixtures'
2 |
3 | /**
4 | * Tests for Network Error Monitor fixture
5 | *
6 | * Note: merged-fixtures.ts already includes networkErrorMonitorFixture,
7 | * so all tests here automatically have network monitoring enabled.
8 | */
9 |
10 | test.describe('Network Error Monitor - Basic Functionality', () => {
11 | test('should allow successful requests without failing', async ({ page }) => {
12 | const loadGetMovies = page.waitForResponse(
13 | (response) =>
14 | response.url().includes('/movies') &&
15 | response.request().method() === 'GET'
16 | )
17 |
18 | await page.goto('/')
19 |
20 | const response = await loadGetMovies
21 | const responseStatus = response.status()
22 |
23 | expect(responseStatus).toBeGreaterThanOrEqual(200)
24 | expect(responseStatus).toBeLessThan(400)
25 | })
26 | })
27 |
28 | test.describe('Network Error Monitor - Opt-out Mechanism', () => {
29 | test(
30 | 'should not fail test when opt-out annotation is used',
31 | { annotation: [{ type: 'skipNetworkMonitoring' }] },
32 | async ({ page }) => {
33 | // This test verifies that the skipNetworkMonitoring annotation works
34 | // Without the annotation, any 404 would fail the test
35 | // With the annotation, the test should pass even if errors occur
36 |
37 | await page.goto('/')
38 |
39 | // Trigger a 404 by trying to fetch a non-existent resource
40 | // The network monitor should ignore this due to the annotation
41 | await page.evaluate(() => {
42 | const img = document.createElement('img')
43 | img.src = '/definitely-non-existent-image-12345.png'
44 | document.body.appendChild(img)
45 | })
46 |
47 | // Wait for the 404 response deterministically (expected to fail)
48 | await page
49 | .waitForResponse(
50 | (response) =>
51 | response.url().includes('definitely-non-existent-image-12345.png'),
52 | { timeout: 2000 }
53 | )
54 | .catch(() => {
55 | // Expected to fail - we're testing the annotation prevents failure
56 | })
57 |
58 | // Test passes - annotation prevents network errors from failing the test
59 | expect(true).toBe(true)
60 | }
61 | )
62 | })
63 |
--------------------------------------------------------------------------------
/src/auth-session/apply-user-cookies-to-browser-context.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Utility to apply user authentication to a browser context
3 | *
4 | * This utility takes a user's token and applies it to a browser context
5 | * without persisting it to disk, making it ideal for ephemeral test users.
6 | */
7 | import type { BrowserContext } from '@playwright/test'
8 | import { log } from '../log'
9 | import { getAuthProvider } from './internal/auth-provider'
10 | /**
11 | * Apply a user's authentication token to a browser context
12 | * Uses the auth provider to extract and apply cookies to a browser context
13 | *
14 | * @param context The browser context to apply the auth token to
15 | * @param tokenData The storage state object or user data containing the token
16 | * @returns The context with auth applied
17 | */
18 | export async function applyUserCookiesToBrowserContext(
19 | context: BrowserContext,
20 | tokenData: Record
21 | ): Promise {
22 | try {
23 | // Get cookies from the auth provider
24 | const authProvider = getAuthProvider()
25 |
26 | try {
27 | const cookies = authProvider.extractCookies(tokenData)
28 |
29 | // Log what we're doing
30 | await log.info(`Applying user auth with ${cookies.length} cookies`)
31 |
32 | if (cookies.length > 0) {
33 | try {
34 | // Apply the cookies to the browser context
35 | await context.addCookies(cookies)
36 | await log.info('Successfully applied auth cookies to browser context')
37 | } catch (cookieError) {
38 | await log.error(
39 | `Failed to apply auth cookies to browser context: ${String(cookieError)}`
40 | )
41 | throw new Error(
42 | `Failed to apply auth cookies: ${String(cookieError)}`
43 | )
44 | }
45 | } else {
46 | await log.warning('No auth cookies found to apply')
47 | }
48 | } catch (extractError) {
49 | await log.error(
50 | `Failed to extract auth cookies from token data: ${String(extractError)}`
51 | )
52 | throw new Error(`Failed to extract auth cookies: ${String(extractError)}`)
53 | }
54 | } catch (error) {
55 | await log.error(
56 | `Error in applyUserCookiesToBrowserContext: ${String(error)}`
57 | )
58 | throw error
59 | }
60 |
61 | // Always return the context if no errors
62 | return context
63 | }
64 |
--------------------------------------------------------------------------------
/playwright/support/auth/token/extract.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Token utility functions for authentication
3 | * These functions handle token extraction and validation for the auth session management
4 | */
5 |
6 | // Cookie type definition matching Playwright's expectations
7 | type Cookie = {
8 | name: string
9 | value: string
10 | domain?: string
11 | path?: string
12 | expires?: number
13 | httpOnly?: boolean
14 | secure?: boolean
15 | sameSite?: 'Strict' | 'Lax' | 'None'
16 | }
17 |
18 | /**
19 | * Extract JWT token from Playwright storage state format
20 | * @param tokenData Storage state object containing cookies
21 | * @returns JWT token value or null if not found
22 | */
23 | export const extractToken = (
24 | tokenData: Record
25 | ): string | null => {
26 | // If it's a storage state with cookies, extract the auth token value
27 | if (
28 | tokenData?.cookies &&
29 | Array.isArray(tokenData.cookies) &&
30 | tokenData.cookies.length > 0
31 | ) {
32 | // Find the auth cookie
33 | const authCookie = tokenData.cookies.find(
34 | (cookie) => cookie.name === 'seon-jwt'
35 | )
36 |
37 | // Return the token value if found
38 | if (authCookie?.value) {
39 | return authCookie.value
40 | }
41 | }
42 |
43 | // Try to extract token from direct API format (in case it's not in cookie format)
44 | if (typeof tokenData.token === 'string') {
45 | return tokenData.token
46 | }
47 |
48 | return null
49 | }
50 |
51 | /**
52 | * Extract cookies from various token formats
53 | * Returns cookies ready to be applied to a browser context
54 | *
55 | * @param tokenData Storage state or user data object
56 | * @returns Array of cookie objects ready for browser context
57 | */
58 | export const extractCookies = (
59 | tokenData: Record
60 | ): Cookie[] => {
61 | // If it's already a storage state with cookies, return them directly
62 | if (
63 | tokenData?.cookies &&
64 | Array.isArray(tokenData.cookies) &&
65 | tokenData.cookies.length > 0
66 | ) {
67 | return tokenData.cookies
68 | }
69 |
70 | // If it's a string token, convert it to a cookie
71 | const token = extractToken(tokenData)
72 | if (token) {
73 | return [
74 | {
75 | name: 'seon-jwt',
76 | value: token,
77 | domain: 'localhost',
78 | path: '/'
79 | }
80 | ]
81 | }
82 |
83 | // Return empty array if no cookies found
84 | return []
85 | }
86 |
--------------------------------------------------------------------------------
/src/burn-in/runner.ts:
--------------------------------------------------------------------------------
1 | import { execSync } from 'node:child_process'
2 | import { BurnInAnalyzer } from './core/analyzer'
3 | import { loadConfig } from './core/config'
4 | import type { BurnInOptions, BurnInConfig } from './core/types'
5 |
6 | // Internal type with config override capability
7 | type InternalBurnInOptions = BurnInOptions & {
8 | config?: BurnInConfig
9 | }
10 |
11 | export class BurnInRunner {
12 | private analyzer: BurnInAnalyzer
13 |
14 | constructor(private options: InternalBurnInOptions = {}) {
15 | const config = options.config || loadConfig(options.configPath)
16 | this.analyzer = new BurnInAnalyzer(config, options)
17 | }
18 |
19 | async run(): Promise {
20 | const baseBranch = this.options.baseBranch || 'main'
21 |
22 | console.log('🔍 Smart Burn-in Test Runner')
23 | console.log(`🌳 Base branch: ${baseBranch}`)
24 |
25 | // Get changed files
26 | const changedFiles = this.analyzer.getChangedFiles(baseBranch)
27 |
28 | if (changedFiles.all.length === 0) {
29 | console.log('✅ No changes detected. Nothing to burn-in.')
30 | return
31 | }
32 |
33 | console.log(`📝 Found ${changedFiles.all.length} changed file(s)`)
34 |
35 | // Analyze and create test plan
36 | const plan = await this.analyzer.analyzeTestableDependencies(changedFiles)
37 | const command = this.analyzer.buildCommand(plan)
38 |
39 | console.log('\n🎯 Test execution plan:')
40 | console.log(` ${plan.reason}`)
41 |
42 | if (!command) {
43 | console.log('ℹ️ No tests need to be run based on the changes.')
44 | return
45 | }
46 |
47 | if (plan.tests !== null) {
48 | console.log(` Tests to run: ${plan.tests.length}`)
49 | plan.tests.forEach((test) => console.log(` - ${test}`))
50 | }
51 |
52 | console.log('\n📦 Command to execute:')
53 | console.log(` ${command.join(' ')}`)
54 |
55 | // Set burn-in environment variable
56 | process.env.PW_BURN_IN = 'true'
57 |
58 | console.log('\n🚀 Starting burn-in tests...\n')
59 |
60 | try {
61 | execSync(command.join(' '), {
62 | stdio: 'inherit',
63 | env: process.env
64 | })
65 | console.log('\n✅ Burn-in tests completed successfully!')
66 | } catch {
67 | console.error('\n❌ Burn-in tests failed')
68 | process.exit(1)
69 | }
70 | }
71 | }
72 |
73 | export async function runBurnIn(options?: BurnInOptions): Promise {
74 | const runner = new BurnInRunner(options)
75 | await runner.run()
76 | }
77 |
--------------------------------------------------------------------------------
/.github/actions/install/action.yml:
--------------------------------------------------------------------------------
1 | name: 'Setup Node and Install Dependencies'
2 | description: 'Sets up Node.js and installs dependencies with npm/pnpm caching'
3 |
4 | inputs:
5 | install-command:
6 | description: 'The install command to run (e.g., "npm ci" or "pnpm install")'
7 | required: true
8 | node-version-file:
9 | description: 'Path to file containing Node.js version'
10 | required: false
11 | default: '.nvmrc'
12 |
13 | runs:
14 | using: 'composite'
15 | steps:
16 |
17 | # Node.js setup
18 | - name: Setup Node.js
19 | uses: actions/setup-node@v4
20 | with:
21 | node-version-file: ${{ inputs.node-version-file }}
22 |
23 | # Detect package manager from install command
24 | - name: Detect package manager
25 | id: detect-pm
26 | shell: bash
27 | run: |
28 | INSTALL_CMD="${{ inputs.install-command }}"
29 |
30 | if [[ "$INSTALL_CMD" == *"pnpm"* ]]; then
31 | echo "detected=pnpm" >> $GITHUB_OUTPUT
32 | else
33 | echo "detected=npm" >> $GITHUB_OUTPUT
34 | fi
35 | echo "Using package manager: $(cat $GITHUB_OUTPUT | grep detected | cut -d= -f2)"
36 |
37 | # Cache dependencies based on package manager
38 | - name: Cache dependencies
39 | id: deps-cache
40 | uses: actions/cache@v4
41 | with:
42 | path: |
43 | ${{ steps.detect-pm.outputs.detected == 'npm' && '~/.npm' || '' }}
44 | ${{ steps.detect-pm.outputs.detected == 'pnpm' && '~/.local/share/pnpm/store' || '' }}
45 | key: |
46 | ${{ steps.detect-pm.outputs.detected }}-${{ runner.os }}-
47 | ${{ steps.detect-pm.outputs.detected == 'npm' && hashFiles('**/package-lock.json') || '' }}
48 | ${{ steps.detect-pm.outputs.detected == 'pnpm' && hashFiles('**/pnpm-lock.yaml') || '' }}
49 | restore-keys: |
50 | ${{ steps.detect-pm.outputs.detected }}-${{ runner.os }}-
51 |
52 | # Install dependencies
53 | # Note: Still need to run install even with cache hit to run scripts, lifecycle hooks, and build binaries
54 | - name: Install dependencies
55 | shell: bash
56 | run: |
57 | # First ensure the package manager is installed if using pnpm
58 | if [ "${{ steps.detect-pm.outputs.detected }}" == "pnpm" ] && ! command -v pnpm &> /dev/null; then
59 | echo "Installing pnpm..."
60 | npm install -g pnpm
61 | fi
62 |
63 | # Then run the provided install command
64 | ${{ inputs.install-command }}
--------------------------------------------------------------------------------
/playwright/tests/external/network-mock-original.spec.ts:
--------------------------------------------------------------------------------
1 | import { test, expect } from '../../support/merged-fixtures'
2 |
3 | // Disable auth session for external tests that don't need authentication
4 | // This prevents navigation errors when applying auth to non-auth URLs
5 | test.use({
6 | authSessionEnabled: false
7 | })
8 |
9 | test.describe('describe network interception - original', () => {
10 | test('Spy on the network - original', async ({ page }) => {
11 | // Set up the interception before navigating
12 | await page.route('*/**/api/v1/fruits', (route) => route.continue())
13 |
14 | await page.goto('https://demo.playwright.dev/api-mocking')
15 |
16 | // Wait for the intercepted response
17 | const fruitsResponse = await page.waitForResponse('*/**/api/v1/fruits')
18 | // verify the network
19 | const fruitsResponseBody = await fruitsResponse.json()
20 | const status = fruitsResponse.status()
21 | expect(fruitsResponseBody.length).toBeGreaterThan(0)
22 | expect(status).toBe(200)
23 | })
24 |
25 | test('Stub the network - original', async ({ page }) => {
26 | const fruit = { name: 'Guava', id: 12 }
27 |
28 | // Set up the interception before navigating
29 | await page.route('*/**/api/v1/fruits', (route) =>
30 | route.fulfill({
31 | json: [fruit]
32 | })
33 | )
34 |
35 | await page.goto('https://demo.playwright.dev/api-mocking')
36 |
37 | // Wait for the intercepted response
38 | const fruitsResponse = await page.waitForResponse('*/**/api/v1/fruits')
39 | // verify the network
40 | const fruitsResponseBody = await fruitsResponse.json()
41 | expect(fruitsResponseBody).toEqual([fruit])
42 |
43 | await expect(page.getByText(fruit.name)).toBeVisible()
44 | })
45 |
46 | test('Modify the API response - original', async ({ page }) => {
47 | const fruitResponse = page.route(
48 | '*/**/api/v1/fruits',
49 | async (route, _request) => {
50 | // Get the response and add to it
51 | const response = await route.fetch()
52 | const json = await response.json()
53 | // Modify the JSON by adding a new item
54 | json.push({ name: 'MAGIC FRUIT', id: 42 })
55 | // Fulfill using the original response, while patching the response body
56 | // with the given JSON object.
57 | await route.fulfill({ response, json })
58 | }
59 | )
60 |
61 | await page.goto('https://demo.playwright.dev/api-mocking')
62 | await fruitResponse
63 | await expect(page.getByText('MAGIC FRUIT')).toBeVisible()
64 | })
65 | })
66 |
--------------------------------------------------------------------------------
/sample-app/frontend/src/components/login/login-form.vitest.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | wrappedRender,
3 | screen,
4 | waitFor,
5 | worker,
6 | http,
7 | describe,
8 | it,
9 | expect,
10 | userEvent
11 | } from '@vitest-utils/utils'
12 | import LoginForm from './login-form'
13 |
14 | // Setup user event
15 | const user = userEvent.setup()
16 |
17 | describe('LoginForm', () => {
18 | it('should validate required fields', async () => {
19 | worker.use(
20 | http.post('/auth/identity-token', () => {
21 | return new Response(JSON.stringify({ message: 'Success' }), {
22 | status: 200
23 | })
24 | })
25 | )
26 | wrappedRender()
27 | expect(screen.getByPlaceholderText('Username')).toBeInTheDocument()
28 | expect(screen.getByPlaceholderText('Password')).toBeInTheDocument()
29 | expect(screen.getByTestId('user-identity-select')).toBeInTheDocument()
30 | expect(screen.getByText('Log In')).toBeInTheDocument()
31 |
32 | // Test 1: Submit with empty fields
33 | await user.click(screen.getByText('Log In'))
34 | expect(await screen.findByText('Username is required')).toBeInTheDocument()
35 | expect(screen.queryByText('Password is required')).toBeInTheDocument()
36 |
37 | // Test 2: Fill username only and submit again
38 | await user.type(screen.getByPlaceholderText('Username'), 'testuser')
39 | await user.click(screen.getByText('Log In'))
40 | expect(await screen.findByText('Password is required')).toBeInTheDocument()
41 |
42 | // Test 3: only password
43 | await user.clear(screen.getByPlaceholderText('Username'))
44 | await user.type(screen.getByPlaceholderText('Password'), 'testpass')
45 | await user.click(screen.getByText('Log In'))
46 | expect(await screen.findByText('Username is required')).toBeInTheDocument()
47 | })
48 |
49 | it('should submit form with credentials and redirect on success', async () => {
50 | worker.use(
51 | http.post('/auth/identity-token', () => {
52 | return new Response(JSON.stringify({ message: 'Success' }), {
53 | status: 200
54 | })
55 | })
56 | )
57 |
58 | wrappedRender()
59 |
60 | await user.type(screen.getByPlaceholderText('Username'), 'testuser')
61 | await user.type(screen.getByPlaceholderText('Password'), 'password123')
62 | await user.click(screen.getByText('Log In'))
63 |
64 | // verify that the form submission completed
65 | await waitFor(() => {
66 | expect(screen.queryByText('Loading')).not.toBeInTheDocument()
67 | })
68 | })
69 | })
70 |
--------------------------------------------------------------------------------
/playwright/support/utils/parse-kafka-event.ts:
--------------------------------------------------------------------------------
1 | import { promises as fs } from 'fs'
2 | import { logFilePath } from '../../../sample-app/backend/src/events/log-file-path'
3 | import type { MovieEvent, MovieAction } from '../../../sample-app/shared/types'
4 |
5 | /**
6 | * Reshapes the Kafka event entry into a simplified format for easier processing.
7 | *
8 | * @param {MovieEvent} entry - The Kafka event entry containing topic and message details.
9 | * @returns {{ topic: string; key: string; movie: Movie }} - Returns a simplified object with the topic, key, and movie details.
10 | */
11 | const reshape = (entry: MovieEvent) => ({
12 | topic: entry.topic,
13 | key: entry.messages[0]?.key,
14 | movie: JSON.parse(entry.messages[0]?.value as unknown as string)
15 | })
16 |
17 | /**
18 | * Filters Kafka event entries by topic and movieId.
19 | *
20 | * @param {number} movieId - The ID of the movie to filter by.
21 | * @param {string} topic - The Kafka topic to filter by.
22 | * @param {Array>} entries - The list of reshaped Kafka event entries.
23 | * @returns {Array} - Filtered entries based on the topic and movieId.
24 | */
25 | const filterByTopicAndId = (
26 | movieId: number,
27 | topic: string,
28 | entries: ReturnType[]
29 | ) =>
30 | entries.filter(
31 | (entry) => entry.topic === topic && entry.movie?.id === movieId
32 | )
33 |
34 | /**
35 | * Parses the Kafka event log file and filters events based on the topic and movieId.
36 | *
37 | * @param {number} movieId - The ID of the movie to filter for.
38 | * @param {`movie-${MovieAction}`} topic - The Kafka topic to filter by.
39 | * @param {string} [filePath=logFilePath] - Optional file path for the Kafka event log file.
40 | * @returns {Promise} - A promise that resolves to the matching events.
41 | */
42 | export const parseKafkaEvent = async (
43 | movieId: number,
44 | topic: `movie-${MovieAction}`,
45 | filePath = logFilePath
46 | ) => {
47 | try {
48 | // Read and process the Kafka log file
49 | const fileContent = await fs.readFile(filePath, 'utf-8')
50 | const entries = fileContent
51 | .trim()
52 | .split('\n')
53 | .map((line) => JSON.parse(line))
54 | .map(reshape)
55 |
56 | // Filter the entries by topic and movie ID
57 | return filterByTopicAndId(movieId, topic, entries)
58 | } catch (error) {
59 | if (error instanceof Error) {
60 | console.error(`Error parsing Kafka event log: ${error.message}`)
61 | } else {
62 | console.error('An unknown error occurred')
63 | }
64 | throw error
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/playwright/config/local.config.ts:
--------------------------------------------------------------------------------
1 | import merge from 'lodash/merge'
2 | import { defineConfig } from '@playwright/test'
3 | import { baseConfig } from './base.config'
4 | import { log } from '../../src'
5 |
6 | // IMPORTANT:the setup for logging to files needs to be uniform between test files
7 | // best place to put it is in a config file
8 |
9 | // SINGLE LOG FILE
10 | // log.configure({
11 | // fileLogging: {
12 | // enabled: true,
13 | // // Force all tests to use this specific folder regardless of test context
14 | // defaultTestFolder: 'all-tests-in-one',
15 | // forceConsolidated: true,
16 | // outputDir: 'playwright-logs/'
17 | // }
18 | // })
19 | // Check environment variables for log configuration
20 | const SILENT = process.env.SILENT === 'true'
21 | const DISABLE_FILE_LOGS = process.env.DISABLE_FILE_LOGS === 'true' || SILENT
22 | const DISABLE_CONSOLE_LOGS =
23 | process.env.DISABLE_CONSOLE_LOGS === 'true' || SILENT
24 |
25 | // ORGANIZED LOGS
26 | log.configure({
27 | // Set console directly to false rather than using object format
28 | console: {
29 | enabled: !DISABLE_CONSOLE_LOGS
30 | }, // This should disable console logs completely
31 | format: {
32 | maxLineLength: 4000 // Set your desired maximum line length
33 | },
34 | // debug < info < step < success < warning < error
35 | // level: 'step', // show all logs, or limit them
36 | fileLogging: {
37 | enabled: !DISABLE_FILE_LOGS,
38 | defaultTestFolder: 'before-hooks', // all hooks go to the default folder
39 | forceConsolidated: false, // Explicitly disable consolidation
40 | outputDir: 'playwright-logs/'
41 | }
42 | })
43 |
44 | export const BASE_URL = process.env.BASE_URL || 'http://localhost:3000'
45 | export const API_URL = process.env.VITE_API_URL || 'http://localhost:3001'
46 |
47 | export default defineConfig(
48 | merge({}, baseConfig, {
49 | use: {
50 | baseURL: BASE_URL // case sensitive
51 | },
52 | webServer: [
53 | // Backend
54 | {
55 | command: 'npm run start:backend',
56 | url: API_URL,
57 | reuseExistingServer: !process.env.CI,
58 | stdout: 'pipe',
59 | stderr: 'pipe',
60 | timeout: 180000
61 | },
62 | // Frontend server
63 | {
64 | command: 'npm run start:frontend',
65 | url: BASE_URL,
66 | reuseExistingServer: !process.env.CI,
67 | stdout: 'pipe',
68 | stderr: 'pipe',
69 | timeout: 180000
70 | }
71 | ],
72 | // Add the special project to your config
73 | projects: [...(baseConfig.projects || [])]
74 | })
75 | )
76 |
--------------------------------------------------------------------------------
/playwright/tests/sample-app/frontend/movie-routes-helper-version.spec.ts:
--------------------------------------------------------------------------------
1 | import { expect, test } from '@playwright/support/merged-fixtures'
2 | import { generateMovieWithoutId } from '@playwright/support/utils/movie-factories'
3 | import type { Movie } from '@shared/types/movie-types'
4 | import { type InterceptNetworkCall } from '../../../../src/intercept-network-call'
5 | import { log } from 'src/log'
6 |
7 | test.describe('App routes (playwright-utils helpers)', () => {
8 | const movies = [
9 | { id: 1, ...generateMovieWithoutId() },
10 | { id: 2, ...generateMovieWithoutId() },
11 | { id: 3, ...generateMovieWithoutId() }
12 | ]
13 | const movie = movies[0]
14 | let loadGetMovies: InterceptNetworkCall
15 |
16 | test.beforeEach(({ interceptNetworkCall }) => {
17 | loadGetMovies = interceptNetworkCall({
18 | method: 'GET',
19 | url: '/movies',
20 | fulfillResponse: {
21 | status: 200,
22 | body: { data: movies }
23 | }
24 | })
25 | })
26 |
27 | test('should redirect to /movies (playwright-utils helpers)', async ({
28 | page
29 | }) => {
30 | await page.goto('/')
31 |
32 | await expect(page).toHaveURL('/movies')
33 | const {
34 | responseJson: { data: moviesResponse }
35 | } = (await loadGetMovies) as { responseJson: { data: typeof movies } }
36 | expect(moviesResponse).toEqual(movies)
37 |
38 | await expect(page.getByTestId('movie-list-comp')).toBeVisible()
39 | await expect(page.getByTestId('movie-form-comp')).toBeVisible()
40 | await expect(page.getByTestId('movie-item-comp')).toHaveCount(movies.length)
41 |
42 | await log.info(
43 | 'with PW you have to use for await of, since you have to await the expect'
44 | )
45 | const movieItemComps = page.getByTestId('movie-item-comp').all()
46 | const items = await movieItemComps
47 | for (const item of items) {
48 | await expect(item).toBeVisible()
49 | }
50 | })
51 |
52 | test('should direct nav to by query param (playwright-utils helpers)', async ({
53 | page,
54 | interceptNetworkCall
55 | }) => {
56 | const movieName = encodeURIComponent(movie?.name as Movie['name'])
57 |
58 | const loadGetMovies2 = interceptNetworkCall({
59 | method: 'GET',
60 | url: '/movies?*',
61 | fulfillResponse: {
62 | status: 200,
63 | body: movie
64 | }
65 | })
66 |
67 | await page.goto(`/movies?name=${movieName}`)
68 |
69 | const { responseJson: resBody } = await loadGetMovies2
70 | expect(resBody).toEqual(movie)
71 |
72 | await expect(page).toHaveURL(`/movies?name=${movieName}`)
73 | })
74 | })
75 |
--------------------------------------------------------------------------------
/sample-app/frontend/src/logo.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/intercept-network-call/core/observe-network-call.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-unused-vars */
2 | import type { Page } from '@playwright/test'
3 | import type { NetworkCallResult } from './types'
4 | import { NetworkInterceptError, NetworkTimeoutError } from './types'
5 | import { matchesRequest } from './utils/matches-request'
6 |
7 | export async function observeNetworkCall<
8 | TRequest = unknown,
9 | TResponse = unknown
10 | >(
11 | page: Page,
12 | method?: string,
13 | url?: string,
14 | timeout?: number
15 | ): Promise> {
16 | try {
17 | const request = await page.waitForRequest(
18 | (req) => matchesRequest(req, method, url),
19 | { timeout }
20 | )
21 |
22 | const response = await request.response()
23 | if (!response) {
24 | throw new NetworkInterceptError(
25 | 'No response received for the request',
26 | 'observe',
27 | url,
28 | method
29 | )
30 | }
31 |
32 | let data: TResponse | null = null
33 |
34 | try {
35 | data = await response.json()
36 | } catch (_error) {
37 | const contentType =
38 | response.headers()['content-type'] ||
39 | response.headers()['Content-Type'] ||
40 | ''
41 |
42 | if (!contentType.includes('application/json')) {
43 | data = null
44 | } else {
45 | console.warn(
46 | 'Failed to parse JSON response despite Content-Type indicating JSON'
47 | )
48 | }
49 | }
50 |
51 | let requestJson: TRequest | null = null
52 | try {
53 | requestJson = await request.postDataJSON()
54 | } catch (_error) {
55 | // Request has no post data or is not JSON
56 | }
57 |
58 | return {
59 | request,
60 | response,
61 | responseJson: data,
62 | status: response.status(),
63 | requestJson: requestJson
64 | }
65 | } catch (error) {
66 | // Handle timeout errors specifically
67 | if (error instanceof Error && error.message.includes('Timeout')) {
68 | throw new NetworkTimeoutError(
69 | 'Request timeout while observing network call',
70 | 'observe',
71 | timeout || 30000,
72 | url,
73 | method
74 | )
75 | }
76 |
77 | // Re-throw our custom errors
78 | if (error instanceof NetworkInterceptError) {
79 | throw error
80 | }
81 |
82 | // Wrap other errors
83 | throw new NetworkInterceptError(
84 | `Failed to observe network call: ${error instanceof Error ? error.message : 'Unknown error'}`,
85 | 'observe',
86 | url,
87 | method
88 | )
89 | }
90 | }
91 |
--------------------------------------------------------------------------------
/playwright/support/auth/token/check-validity.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Token validation utilities
3 | * Provides functions to check if tokens are valid or need renewal
4 | */
5 | import { log } from '../../../../src/log'
6 | import { loadStorageState } from '../../../../src/auth-session'
7 | import { extractToken } from './extract'
8 | import { isTokenExpired } from './is-expired'
9 | import { needsTokenRenewal, renewToken } from './renew'
10 |
11 | /**
12 | * Check if a token exists and is valid, renewing it if needed
13 | * @param tokenPath Path to the token storage file
14 | * @returns The storage state object if a valid token exists, null otherwise
15 | */
16 | export async function checkTokenValidity(
17 | tokenPath: string
18 | ): Promise | null> {
19 | // Check if we already have a valid token
20 | const existingStorageState = loadStorageState(tokenPath)
21 | if (!existingStorageState) {
22 | return null
23 | }
24 |
25 | // Check if the token is expired using explicit validation
26 | const token = extractToken(existingStorageState)
27 | if (!token || isTokenExpired(token)) {
28 | return null
29 | }
30 |
31 | // Check if token needs renewal (JWT expired but refresh token valid)
32 | if (needsTokenRenewal(existingStorageState)) {
33 | log.infoSync(
34 | 'ℹ️ JWT token expired, attempting to renew token using refresh token'
35 | )
36 | try {
37 | // Call our renewal helper function with the storage path
38 | await renewToken({ storageState: tokenPath })
39 |
40 | // Load the updated storage state after successful renewal
41 | const renewedStorageState = loadStorageState(tokenPath)
42 | if (!renewedStorageState) {
43 | throw new Error('Failed to load renewed storage state')
44 | }
45 |
46 | // Verify the renewed token is valid
47 | const token = extractToken(renewedStorageState)
48 | if (!token || isTokenExpired(token)) {
49 | throw new Error('Renewed token is invalid or already expired')
50 | }
51 |
52 | log.infoSync(`✓ Successfully renewed token from ${tokenPath}`)
53 | return renewedStorageState
54 | } catch (error) {
55 | // If renewal fails, we'll proceed to get a new token via full login
56 | const errorMessage =
57 | error instanceof Error ? error.message : 'Unknown error'
58 | log.infoSync(`⚠️ Failed to renew token: ${errorMessage}`)
59 | log.infoSync('⚠️ Will attempt to acquire a new token')
60 | return null
61 | }
62 | } else {
63 | // Token is still valid, use it
64 | log.infoSync(`✓ Using existing token from ${tokenPath}`)
65 | return existingStorageState
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/playwright/support/global-setup.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Global setup script for Playwright testing
3 | *
4 | * This script handles initial setup tasks before tests run:
5 | * Explicitly configures authentication through a two-step process:
6 | * - Step 1: Configure auth storage settings with configureAuthSession
7 | * - Step 2: Register an auth provider implementation with setAuthProvider
8 | *
9 | * To use this, add to your playwright config:
10 | * ```
11 | * globalSetup: '../support/global-setup.ts'
12 | * ```
13 | */
14 |
15 | import {
16 | authStorageInit,
17 | setAuthProvider,
18 | configureAuthSession,
19 | authGlobalInit
20 | } from '../../src/auth-session'
21 |
22 | type UserOptions = {
23 | admin: string
24 | fraudAnalystUser: string
25 | settingsAdminUser: string
26 | freeUser: string
27 | shopifyUser: string
28 | }
29 |
30 | export const VALID_TEST_USERS: UserOptions = {
31 | admin: 'admin',
32 | freeUser: 'freeUser',
33 | settingsAdminUser: 'settingsAdminUser',
34 | fraudAnalystUser: 'fraudAnalystUser',
35 | shopifyUser: 'shopifyUser'
36 | }
37 |
38 | // Uncomment to use the custom auth provider
39 | import myCustomProvider from './auth/custom-auth-provider'
40 |
41 | /**
42 | * Global setup function that runs before tests
43 | */
44 | async function globalSetup() {
45 | console.log('Running global setup')
46 |
47 | // ========================================================================
48 | // STEP 1: Configure minimal auth storage settings
49 | // ========================================================================
50 | // Ensure storage directories exist (required for both auth approaches)
51 |
52 | // if single user
53 | // authStorageInit()
54 |
55 | // if multiple users
56 | for (const user of Object.values(VALID_TEST_USERS)) {
57 | authStorageInit({
58 | userIdentifier: user
59 | })
60 | }
61 | // This just sets up where tokens will be stored and debug options
62 | configureAuthSession({
63 | debug: true
64 | })
65 |
66 | // ========================================================================
67 | // STEP 2: Set up custom auth provider
68 | // ========================================================================
69 | // This defines HOW authentication tokens are acquired and used
70 |
71 | setAuthProvider(myCustomProvider)
72 |
73 | // Optional: pre-fetch all tokens in the beginning
74 | await authGlobalInit()
75 | // if the authUrl is different from the appUrl, you can pass it as an option
76 | // by default it takes AUTH_BASE_URL (if it exists) or baseURL/BASE_URL
77 | // await authGlobalInit({
78 | // authBaseURL: 'https://auth.example.com'
79 | // })
80 | }
81 |
82 | export default globalSetup
83 |
--------------------------------------------------------------------------------
/AGENTS.md:
--------------------------------------------------------------------------------
1 | # Repository Guidelines
2 |
3 | ## Project Structure & Module Organization
4 |
5 | Core TypeScript utilities live in `src/`, grouped by feature folders such as `api-request`, `intercept-network-call`, and `log`. Build outputs land in `dist/`; regenerate them via `npm run build` instead of editing. Docs stay in `docs/`, and Playwright specs, fixtures, and config live in `playwright/`. The `sample-app/{backend,frontend}` workspace powers demo flows, `scripts/` holds automation helpers, and transient outputs (`playwright-report/`, `test-results/`, `har-files/`) should remain untracked.
6 |
7 | ## Build, Test, and Development Commands
8 |
9 | - `npm run build`: clean + emit CJS, ESM, and type outputs into `dist/`.
10 | - `npm run validate`: parallel type-check, lint, unit tests, and formatting to catch regressions fast.
11 | - `npm run test`: executes `sample-app` backend Jest suite and frontend Vitest suite.
12 | - `npm run test:pw` / `npm run test:pw-ui`: run Playwright specs headless or in UI mode against `TEST_ENV=local`.
13 | - `npm run test:pw:burn-in`: repeats flaky suites (`PW_BURN_IN=true`) before promoting changes.
14 | - `npm run start:sample-app`: boots backend + frontend so local playwright runs hit real services.
15 |
16 | ## Coding Style & Naming Conventions
17 |
18 | Source targets Node 18+, so use 2-space indentation, trailing commas, and ES module syntax. Prefer named exports and keep file names kebab-case to satisfy `eslint-plugin-filenames`. Run `npm run fix:format` (Prettier + ESLint) before pushing, and store fixtures beside their modules (for example `src/api-request/fixtures.ts`).
19 |
20 | ## Testing Guidelines
21 |
22 | Author unit or component tests beside the code they verify, mirroring the `*.spec.ts` naming pattern in `sample-app`. Integration flows belong in `playwright/tests`; tag cases that hit external services and capture HTML reporter output when failures occur. Run `npm run validate` plus the needed Playwright command before every PR, and use `npm run test:pw:burn-in` for flaky or high-traffic fixtures.
23 |
24 | ## Commit & Pull Request Guidelines
25 |
26 | Use Conventional Commit prefixes (`feat:`, `fix:`, `docs:`, `chore:`) with subjects ≤72 characters and keep each commit focused. Include updated HAR/log assets whenever behavior shifts. PRs must link an issue, summarize the change, list validation steps, and attach screenshots or console output for UI/test updates; rerun `npm run validate` after rebases and note any skipped checks.
27 |
28 | ## Security & Configuration Tips
29 |
30 | Never commit `.env` values or Playwright storage states; rely on `TEST_ENV` and document defaults in `docs/`. Run `setup-playwright-browsers` after fresh installs for consistent binaries. Dry-run releases with `npm run publish:local` before tagging to confirm artifacts and registry scopes.
31 |
--------------------------------------------------------------------------------
/src/api-request/schema-validation/core.ts:
--------------------------------------------------------------------------------
1 | /** Core schema validation engine */
2 |
3 | // Zod types - will be loaded dynamically
4 | import type { SupportedSchema, ValidationResult, ShapeAssertion } from './types'
5 | import { validateShape } from './internal/shape-validator'
6 | import { processSchema } from './internal/schema-processors'
7 | import {
8 | buildValidationResult,
9 | buildErrorResult
10 | } from './internal/result-builder'
11 |
12 | /** Detect schema format based on input */
13 | export function detectSchemaFormat(
14 | schema: SupportedSchema
15 | ): ValidationResult['schemaFormat'] {
16 | if (typeof schema === 'string') {
17 | if (schema.endsWith('.yaml') || schema.endsWith('.yml')) {
18 | return 'YAML OpenAPI'
19 | }
20 | return 'JSON OpenAPI'
21 | }
22 |
23 | if (schema && typeof schema === 'object') {
24 | // Check if it's a Zod schema
25 | if (
26 | '_def' in schema &&
27 | typeof (schema as unknown as Record).parse === 'function'
28 | ) {
29 | return 'Zod Schema'
30 | }
31 |
32 | // Check if it's an OpenAPI spec (has 'openapi' or 'swagger' field)
33 | if (
34 | (schema as Record).openapi ||
35 | (schema as Record).swagger
36 | ) {
37 | return 'JSON OpenAPI'
38 | }
39 |
40 | // Default to JSON Schema
41 | return 'JSON Schema'
42 | }
43 |
44 | return 'JSON Schema'
45 | }
46 |
47 | /** Main validation function using strategy pattern */
48 | export async function validateSchema(
49 | data: unknown,
50 | schema: SupportedSchema,
51 | options: {
52 | shape?: ShapeAssertion
53 | path?: string
54 | endpoint?: string
55 | method?: string
56 | status?: number
57 | } = {}
58 | ): Promise {
59 | const startTime = Date.now()
60 |
61 | try {
62 | const schemaFormat = detectSchemaFormat(schema)
63 |
64 | // Process schema using appropriate strategy
65 | const processingResult = await processSchema(
66 | data,
67 | schema,
68 | schemaFormat,
69 | options
70 | )
71 |
72 | let { validationErrors } = processingResult
73 | const { schemaForResult } = processingResult
74 |
75 | // Add shape validation if provided
76 | if (options.shape) {
77 | const shapeErrors = await validateShape(data, options.shape)
78 | validationErrors = [...validationErrors, ...shapeErrors]
79 | }
80 |
81 | const validationTime = Date.now() - startTime
82 |
83 | return buildValidationResult(
84 | validationErrors,
85 | schemaFormat,
86 | validationTime,
87 | schemaForResult
88 | )
89 | } catch (error) {
90 | const validationTime = Date.now() - startTime
91 | return buildErrorResult(error, detectSchemaFormat(schema), validationTime)
92 | }
93 | }
94 |
--------------------------------------------------------------------------------
/playwright/tests/network-record-playback/auto-fallback.spec.ts:
--------------------------------------------------------------------------------
1 | import { expect, test } from '@playwright/support/merged-fixtures'
2 | import { addMovie } from '@playwright/support/ui-helpers/add-movie'
3 | import { promises as fs } from 'fs'
4 | import { log } from 'src/log'
5 |
6 | test.describe('network recorder - auto-record fallback', () => {
7 | test('should automatically switch to record mode when HAR file is missing', async ({
8 | page,
9 | networkRecorder,
10 | context
11 | }) => {
12 | process.env.PW_NET_MODE = 'playback'
13 |
14 | const recorderContext = networkRecorder.getContext()
15 | const harFilePath = recorderContext.harFilePath
16 |
17 | await log.step(
18 | 'Delete HAR file if it exists to simulate missing HAR scenario'
19 | )
20 | try {
21 | await fs.unlink(harFilePath)
22 | await log.debug(`Deleted existing HAR file: ${harFilePath}`)
23 | } catch {
24 | await log.debug(`HAR file does not exist (expected): ${harFilePath}`)
25 | }
26 |
27 | await log.step('Setup network recorder - should auto-switch to record mode')
28 | await networkRecorder.setup(context)
29 |
30 | await log.step('Verify the recorder switched to record mode')
31 | const contextAfterSetup = networkRecorder.getContext()
32 | expect(contextAfterSetup.mode).toBe('record')
33 | await log.info('✅ Verified mode switched from playback to record')
34 |
35 | await log.step('Navigate and perform actions to generate network traffic')
36 | await page.goto('/')
37 |
38 | const { name, year, rating, director } = {
39 | name: 'auto-fallback-test-movie',
40 | year: 2024,
41 | rating: 8.5,
42 | director: 'Test Director'
43 | }
44 |
45 | await log.step('add a movie to generate network traffic for recording')
46 | await addMovie(page, name, year, rating, director)
47 | await page.getByTestId('add-movie-button').click()
48 |
49 | await log.step('Wait for the movie to appear')
50 | await page.getByText(name).waitFor()
51 |
52 | await log.step('Cleanup network recorder to ensure HAR file is written')
53 | await networkRecorder.cleanup()
54 |
55 | await log.step('Verify HAR file was created and contains recorded data')
56 | const harExists = await fs
57 | .access(harFilePath)
58 | .then(() => true)
59 | .catch(() => false)
60 | expect(harExists).toBe(true)
61 | await log.info(`✅ Verified HAR file was created: ${harFilePath}`)
62 |
63 | await log.step('Verify HAR file has content')
64 | const harContent = await fs.readFile(harFilePath, 'utf-8')
65 | const harData = JSON.parse(harContent)
66 | expect(harData.log.entries.length).toBeGreaterThan(0)
67 | await log.info(
68 | `✅ Verified HAR file contains ${harData.log.entries.length} network requests`
69 | )
70 | })
71 | })
72 |
--------------------------------------------------------------------------------
/src/burn-in/core/config.ts:
--------------------------------------------------------------------------------
1 | import type { BurnInConfig } from './types'
2 | import * as fs from 'node:fs'
3 | import * as path from 'node:path'
4 |
5 | export const DEFAULT_CONFIG: BurnInConfig = {
6 | skipBurnInPatterns: [
7 | '**/config/**',
8 | '**/configuration/**',
9 | '**/playwright.config.ts',
10 | '**/*featureFlags*',
11 | '**/*constants*',
12 | '**/*config*',
13 | '**/*types*',
14 | '**/*interfaces*',
15 | '**/package.json',
16 | '**/tsconfig.json',
17 | '**/*.md'
18 | ],
19 | testPatterns: ['**/*.spec.ts', '**/*.test.ts'],
20 | burnIn: {
21 | repeatEach: 3,
22 | retries: 0
23 | },
24 | burnInTestPercentage: 1
25 | }
26 |
27 | export function loadConfig(configPath?: string): BurnInConfig {
28 | const configs: BurnInConfig[] = [DEFAULT_CONFIG]
29 |
30 | // Try to load from possible TypeScript config file locations
31 | const configPaths = configPath
32 | ? [configPath]
33 | : [
34 | 'config/.burn-in.config.ts', // Recommended: organized in config folder
35 | '.burn-in.config.ts', // Alternative: project root (hidden)
36 | 'burn-in.config.ts', // Alternative: project root
37 | 'playwright/.burn-in.config.ts' // Alternative: playwright folder
38 | ]
39 |
40 | for (const configFile of configPaths) {
41 | if (fs.existsSync(configFile)) {
42 | try {
43 | // Only load TypeScript config files
44 | if (path.extname(configFile) !== '.ts') {
45 | console.warn(
46 | `⚠️ Skipping non-TypeScript config: ${configFile}. Only .ts config files are supported.`
47 | )
48 | continue
49 | }
50 |
51 | // Safely load TypeScript config
52 | delete require.cache[path.resolve(configFile)] // Clear cache for fresh load
53 | const configModule = require(path.resolve(configFile))
54 | const loadedConfig: BurnInConfig = configModule.default || configModule
55 |
56 | // Validate that it's actually a config object
57 | if (typeof loadedConfig !== 'object' || loadedConfig === null) {
58 | throw new Error('Config must export a BurnInConfig object')
59 | }
60 |
61 | configs.push(loadedConfig)
62 | console.log(`📋 Loaded burn-in config from: ${configFile}`)
63 | break
64 | } catch (error) {
65 | console.warn(
66 | `⚠️ Failed to load config from ${configFile}:`,
67 | error instanceof Error ? error.message : String(error)
68 | )
69 | }
70 | }
71 | }
72 |
73 | // Merge all configs (later configs override earlier ones)
74 | return configs.reduce(
75 | (merged, config) => ({
76 | ...merged,
77 | ...config,
78 | burnIn: {
79 | ...(merged.burnIn || {}),
80 | ...(config.burnIn || {})
81 | }
82 | }),
83 | {} as BurnInConfig
84 | )
85 | }
86 |
--------------------------------------------------------------------------------
/.github/actions/setup-kafka/action.yml:
--------------------------------------------------------------------------------
1 | name: 'Setup and Manage Kafka'
2 | description: 'Sets up Kafka for testing, handles startup, health checks, and cleanup'
3 |
4 | inputs:
5 | kafka-compose-file:
6 | description: 'Path to the Kafka docker-compose file'
7 | required: false
8 | default: './sample-app/backend/src/events/kafka-cluster.yml'
9 | health-check-script:
10 | description: 'Path to the Kafka health check script'
11 | required: false
12 | default: './sample-app/backend/scripts/kafka-health-check.js'
13 | continue-on-error:
14 | description: 'Whether to continue if Kafka fails to start'
15 | required: false
16 | default: 'true'
17 |
18 | outputs:
19 | kafka-ready:
20 | description: 'Whether Kafka is successfully running'
21 | value: ${{ steps.health-check.outputs.ready }}
22 |
23 | runs:
24 | using: 'composite'
25 | steps:
26 | # 1. Start Kafka containers
27 | - name: Start Kafka
28 | id: start-kafka
29 | continue-on-error: ${{ inputs.continue-on-error == 'true' }}
30 | shell: bash
31 | run: |
32 | docker compose -f ${{ inputs.kafka-compose-file }} up -d --no-recreate
33 |
34 | # 2. Wait for Kafka to be ready with health checks
35 | - name: Wait for Kafka to be ready
36 | id: health-check
37 | continue-on-error: ${{ inputs.continue-on-error == 'true' }}
38 | shell: bash
39 | run: |
40 | echo "ready=false" >> $GITHUB_OUTPUT
41 | echo "Waiting for Kafka containers to initialize..."
42 | # First wait for containers to fully start up (30 seconds max)
43 | sleep 5
44 | for i in {1..5}; do
45 | echo "Attempt $i: Checking if Kafka containers are running..."
46 | if docker ps | grep -q "events-kafka"; then
47 | echo "Kafka container is running"
48 | break
49 | fi
50 | sleep 5
51 | done
52 |
53 | # Now wait for Kafka to be responsive (allow up to 3 failures)
54 | for i in {1..3}; do
55 | echo "Attempt $i: Checking Kafka connectivity..."
56 | if node ${{ inputs.health-check-script }}; then
57 | echo "✅ Kafka is ready!"
58 | echo "ready=true" >> $GITHUB_OUTPUT
59 | break
60 | else
61 | echo "⚠️ Kafka health check failed on attempt $i, retrying..."
62 | # Give Kafka a bit more time to initialize
63 | sleep 10
64 | fi
65 | done
66 |
67 | echo "Proceeding with tests (Kafka may or may not be fully ready)"
68 |
69 | # 3. Register cleanup hook to run after tests
70 | - name: Register Kafka cleanup
71 | id: register-cleanup
72 | shell: bash
73 | run: |
74 | echo "::save-state name=kafka_compose_file::${{ inputs.kafka-compose-file }}"
75 | echo "Kafka cleanup will be performed at the end of the workflow"
76 |
--------------------------------------------------------------------------------
/src/file-utils/core/file-downloader.ts:
--------------------------------------------------------------------------------
1 | import type { Page } from '@playwright/test'
2 | import { existsSync } from 'node:fs'
3 | import path from 'node:path'
4 | import { recurse } from '../../recurse'
5 |
6 | export type DownloadOptions = {
7 | page: Page
8 | downloadDir: string
9 | /** A function that triggers the download action. */
10 | trigger: () => Promise
11 | /** Optional: A specific filename to save the file as. If not provided, a unique name is generated. */
12 | fileName?: string
13 | /** Optional: Timeout for waiting for the download event. Defaults to 30 seconds. */
14 | timeout?: number
15 | }
16 |
17 | /**
18 | * Handles a file download in Playwright by wrapping the common boilerplate.
19 | * It waits for the download event, triggers the download, and saves the file.
20 | *
21 | * @returns The full path to the downloaded file.
22 | */
23 | export async function handleDownload(
24 | options: DownloadOptions
25 | ): Promise {
26 | const { page, downloadDir, trigger, fileName, timeout = 30000 } = options
27 |
28 | const downloadPromise = page.waitForEvent('download', { timeout })
29 | await trigger()
30 | const download = await downloadPromise
31 | const finalFileName = fileName || download.suggestedFilename()
32 |
33 | if (!finalFileName) {
34 | throw new Error(
35 | 'Download failed: No filename was suggested by the server, and no explicit `fileName` was provided.'
36 | )
37 | }
38 |
39 | const extension = path.extname(finalFileName)
40 | const basename = path.basename(finalFileName, extension)
41 | const uniqueFilename = `${basename}-${Date.now()}${extension}`
42 | const downloadPath = path.join(downloadDir, uniqueFilename)
43 |
44 | await download.saveAs(downloadPath)
45 |
46 | // Wait for the file to be fully written to the disk
47 | await waitForFile({ filePath: downloadPath, timeout })
48 |
49 | return downloadPath
50 | }
51 |
52 | type WaitFileOptions = {
53 | timeout?: number
54 | interval?: number
55 | /**
56 | * Controls logging behavior.
57 | * - If `true`, logs a default message to the console.
58 | * - If a `string`, logs that custom message.
59 | * - If `false` or `undefined`, logging is disabled.
60 | */
61 | log?: boolean | string
62 | }
63 |
64 | async function waitForFile(
65 | options: { filePath: string } & WaitFileOptions
66 | ): Promise {
67 | const { filePath, ...waitOptions } = options
68 | const mergedOptions = {
69 | timeout: 30000,
70 | interval: 250,
71 | log: 'Waiting for file to be available',
72 | ...waitOptions
73 | }
74 |
75 | await recurse(
76 | async () => existsSync(filePath),
77 | (exists) => exists,
78 | {
79 | timeout: mergedOptions.timeout,
80 | interval: mergedOptions.interval,
81 | log: mergedOptions.log,
82 | error: `Timed out waiting for file to exist at: ${filePath}`
83 | }
84 | )
85 | }
86 |
--------------------------------------------------------------------------------
/test.http:
--------------------------------------------------------------------------------
1 | @baseUrl = http://localhost:3001
2 |
3 | ###
4 | # @name generateToken
5 | # Identity-based authentication with user information
6 | POST {{baseUrl}}/auth/identity-token
7 | Content-Type: application/json
8 |
9 | {
10 | "username": "test-user",
11 | "password": "password123",
12 | "userIdentifier": "admin"
13 | }
14 |
15 | ###
16 | # @name validateAuthWithToken
17 | # Test the authentication validation endpoint with token
18 | GET {{baseUrl}}/auth/validate
19 | Cookie: seon-jwt={{token}}
20 |
21 | ###
22 | # @name renewToken
23 | # This requires a valid refresh cookie to be present in your browser
24 | POST {{baseUrl}}/auth/renew
25 | Content-Type: application/json
26 |
27 | ###
28 | # Token for authentication
29 | @token = {{generateToken.response.body.token}}
30 |
31 | ###
32 | # @name heartbeat
33 | GET {{baseUrl}}
34 |
35 | ###
36 | # @name addMovie
37 | POST {{baseUrl}}/movies
38 | Content-Type: application/json
39 | Cookie: seon-jwt={{token}}
40 |
41 | {
42 | "name": "Inception",
43 | "year": 2010,
44 | "rating": 7.5,
45 | "director": "Christopher Nolan"
46 | }
47 |
48 | ###
49 | @movieId = {{addMovie.response.body.data.id}}
50 | @movieName = {{addMovie.response.body.data.name}}
51 |
52 | ###
53 | # @name getAllMovies
54 | GET {{baseUrl}}/movies
55 | Cookie: seon-jwt={{token}}
56 |
57 | ###
58 | # @name getMovieById
59 | GET {{baseUrl}}/movies/{{movieId}}
60 | Cookie: seon-jwt={{token}}
61 |
62 | ###
63 | # @name getMovieByName
64 | GET {{baseUrl}}/movies?name={{movieName}}
65 | Cookie: seon-jwt={{token}}
66 |
67 | ###
68 | # @name addDuplicateMovie
69 | POST {{baseUrl}}/movies/
70 | Content-Type: application/json
71 | Cookie: seon-jwt={{token}}
72 |
73 | {
74 | "name": "Inception",
75 | "year": 2010,
76 | "rating": 7.5,
77 | "director": "Christopher Nolan"
78 | }
79 |
80 | ###
81 | # @name addMovieInvalidYear
82 | POST {{baseUrl}}/movies
83 | Content-Type: application/json
84 | Cookie: seon-jwt={{token}}
85 |
86 | {
87 | "name": "Invalid Year Movie",
88 | "year": 1800,
89 | "rating": 7.5,
90 | "director": "Christopher Nolan"
91 | }
92 |
93 | ###
94 | # @name updateMovie
95 | PUT {{baseUrl}}/movies/{{movieId}}
96 | Content-Type: application/json
97 | Cookie: seon-jwt={{token}}
98 |
99 | {
100 | "name": "Inception Updated",
101 | "year": 2015,
102 | "rating": 8.0,
103 | "director": "Steven Spielberg"
104 | }
105 |
106 | ###
107 | # @name deleteMovie
108 | DELETE {{baseUrl}}/movies/{{movieId}}
109 | Cookie: seon-jwt={{token}}
110 |
111 | ###
112 | # @name getNonExistentMovie
113 | GET {{baseUrl}}/movies/999
114 | Cookie: seon-jwt={{token}}
115 | Authorization: {{token}}
116 |
117 |
118 | ###
119 | # @name deleteNonExistentMovie
120 | DELETE {{baseUrl}}/movies/999
121 | Cookie: seon-jwt={{token}}
122 | Authorization: {{token}}
123 |
124 |
125 |
--------------------------------------------------------------------------------
/playwright/tests/sample-app/frontend/movie-routes.spec.ts:
--------------------------------------------------------------------------------
1 | import { expect, test } from '@playwright/support/merged-fixtures'
2 | import { generateMovieWithoutId } from '@playwright/support/utils/movie-factories'
3 | import type { Movie } from '@shared/types/movie-types'
4 | import type { Response } from '@playwright/test'
5 |
6 | test.describe('App routes (vanilla playwright)', () => {
7 | const movies = [
8 | { id: 1, ...generateMovieWithoutId() },
9 | { id: 2, ...generateMovieWithoutId() },
10 | { id: 3, ...generateMovieWithoutId() }
11 | ]
12 | const movie = movies[0]
13 | let loadGetMovies: Promise
14 |
15 | test.beforeEach(async ({ page }) => {
16 | await page.route('**/movies', (route) =>
17 | route.fulfill({
18 | status: 200,
19 | body: JSON.stringify({ data: movies }),
20 | headers: { 'Content-Type': 'application/json' }
21 | })
22 | )
23 | loadGetMovies = page.waitForResponse(
24 | (response) =>
25 | response.url().includes('/movies') && response.status() === 200
26 | )
27 | })
28 |
29 | test('should redirect to /movies @smoke (vanilla playwright)', async ({
30 | page
31 | }) => {
32 | await page.goto('/')
33 |
34 | await expect(page).toHaveURL('/movies')
35 | const getMovies = await loadGetMovies
36 | const { data } = await getMovies.json()
37 | expect(data).toEqual(movies)
38 |
39 | await expect(page.getByTestId('movie-list-comp')).toBeVisible()
40 | await expect(page.getByTestId('movie-form-comp')).toBeVisible()
41 | await expect(page.getByTestId('movie-item-comp')).toHaveCount(movies.length)
42 | // with PW you have to use for await of, since you have to await the expect
43 | const movieItemComps = page.getByTestId('movie-item-comp').all()
44 | const items = await movieItemComps
45 | for (const item of items) {
46 | await expect(item).toBeVisible()
47 | }
48 | })
49 |
50 | test('should direct nav to by query param (vanilla playwright)', async ({
51 | page
52 | }) => {
53 | const movieName = encodeURIComponent(movie?.name as Movie['name'])
54 |
55 | await page.route('**/movies?*', (route) =>
56 | route.fulfill({
57 | status: 200,
58 | body: JSON.stringify(movie),
59 | headers: { 'Content-Type': 'application/json' }
60 | })
61 | )
62 | const loadGetMovies2 = page.waitForResponse(
63 | (response) =>
64 | response.url().includes('/movies?') && response.status() === 200
65 | )
66 |
67 | await page.goto(`/movies?name=${movieName}`)
68 |
69 | const getMovie = await loadGetMovies2
70 | const resBody = await getMovie.json()
71 | expect(resBody).toEqual(movie)
72 |
73 | await expect(page).toHaveURL(`/movies?name=${movieName}`)
74 |
75 | const movieItemComps = page.getByTestId('movie-item-comp').all()
76 | const items = await movieItemComps
77 | for (const item of items) {
78 | await expect(item).toBeVisible()
79 | }
80 | })
81 | })
82 |
--------------------------------------------------------------------------------
/src/api-request/api-request-fixture.ts:
--------------------------------------------------------------------------------
1 | import { test as base } from '@playwright/test'
2 | import { apiRequest as apiRequestFunction } from './api-request'
3 | import type { ApiRequestParams } from './api-request'
4 | import type { EnhancedApiPromise } from './schema-validation/internal/promise-extension'
5 |
6 | /**
7 | * Type for the apiRequest fixture parameters - exactly like ApiRequestParams but without the 'request' property
8 | * which is handled internally by the fixture.
9 | */
10 | export type ApiRequestFixtureParams = Omit
11 |
12 | export const test = base.extend<{
13 | /**
14 | * Simplified helper for making API requests and returning the status and JSON body.
15 | * This helper automatically performs the request based on the provided method, path, body, and headers.
16 | * It handles URL construction with proper slash handling and response parsing based on content type.
17 | *
18 | * IMPORTANT: When using the fixture version, you do NOT need to provide the 'request' parameter,
19 | * as it's automatically injected by the fixture.
20 | *
21 | * @example
22 | * // GET request to an endpoint
23 | * test('fetch user data', async ({ apiRequest }) => {
24 | * const { status, body } = await apiRequest({
25 | * method: 'GET',
26 | * path: '/api/users/123', // Note: use 'path' not 'url'
27 | * headers: { 'Authorization': 'Bearer token' }
28 | * });
29 | *
30 | * expect(status).toBe(200);
31 | * expect(body.name).toBe('John Doe');
32 | * });
33 | *
34 | * @example
35 | * // POST request with a body
36 | * test('create new item', async ({ apiRequest }) => {
37 | * const { status, body } = await apiRequest({
38 | * method: 'POST',
39 | * path: '/api/items', // Note: use 'path' not 'url'
40 | * baseUrl: 'https://api.example.com', // override default baseURL
41 | * body: { name: 'New Item', price: 19.99 },
42 | * headers: { 'Content-Type': 'application/json' }
43 | * });
44 | *
45 | * expect(status).toBe(201);
46 | * expect(body.id).toBeDefined();
47 | * });
48 | */
49 | apiRequest: (
50 | params: ApiRequestFixtureParams
51 | ) => EnhancedApiPromise
52 | }>({
53 | apiRequest: async ({ request, baseURL, page }, use) => {
54 | const apiRequest = ({
55 | method,
56 | path,
57 | baseUrl,
58 | configBaseUrl = baseURL,
59 | body = null,
60 | headers,
61 | params,
62 | uiMode = false,
63 | testStep
64 | }: ApiRequestFixtureParams): EnhancedApiPromise => {
65 | return apiRequestFunction({
66 | request,
67 | method,
68 | path,
69 | baseUrl,
70 | configBaseUrl,
71 | body,
72 | headers,
73 | params,
74 | uiMode,
75 | testStep,
76 | page // Pass page context for UI mode
77 | })
78 | }
79 |
80 | await use(apiRequest)
81 | }
82 | })
83 |
--------------------------------------------------------------------------------