Filip Gačić

Full browser automation covering navigation, form interactions, visual regression, and cross-browser checks. Runs on every push via GitHub Actions.

test('hero renders correctly', async ({ page }) => {
  await page.goto('/')
  await expect(page.locator('h1')).toBeVisible()
  await expect(page).toHaveTitle(/QA Engineer/)
})

Request-level validation of all API routes - status codes, response schemas, error handling, and latency budgets. No browser overhead.

test('health endpoint', async ({ request }) => {
  const res = await request.get('/api/health')
  expect(res.status()).toBe(200)
  const body = await res.json()
  expect(body).toMatchObject({ status: 'ok' })
})

Smoke tests (5 VUs) run in CI. Load scenarios (100 VUs, 2 min) validate p95 latency under realistic traffic.

export const options = { vus: 5, duration: '30s' }

export default function () {
  const res = http.get(__ENV.BASE_URL)
  check(res, { 'status 200': (r) => r.status === 200 })
  sleep(1)
}

Per-section and stateful DOM snapshots at mobile, tablet, and desktop widths. Pixel diffs surface unintentional layout shifts before they ship - animations are frozen and the globe is masked for determinism.

await percySnapshot(page, 'Home / Hero', {
  scope: sel(testIds.sections.hero),
})
// drive the UI into a state, then snapshot
await page.getByTestId(testIds.contact.submit).click()
await percySnapshot(page, 'Contact / Validation errors')