Skip to main content
In the Momentic/Vercel loop, Vercel builds a preview per pull request, CI runs Momentic against that preview URL, and the result gates the merge. The only Vercel-specific piece is deployment protection: every other step is generic Momentic web testing.

​
Test against a local dev server

home.test.yaml

​
Test a preview deployment

Get the preview URL in CI (github.event.pull_request context exposes it through the vercel deployment status, or use the Vercel CLI vercel inspect). URL resolution is ordered: --url-override overrides a test’s url: field, which takes precedence over the environment’s baseUrl. The sample test pins url: for local runs, so point the run at the preview explicitly:
Tests that have no url: fall through to the environment, so you can instead keep url off the test and select environments[].baseUrl with --env preview. Use one convention per repo: mixed pinning makes --env silently do nothing for tests that set url:.

​
Bypass deployment protection

Vercel’s standard protection blocks unauthenticated requests, including test browsers. Two options, both covered in Test Vercel protected preview environments:
  • Send x-vercel-protection-bypass + x-vercel-set-bypass-cookie headers on every request (fast; can hit CORS limits).
  • Append ?x-vercel-protection-bypass=<secret>&x-vercel-set-bypass-cookie=true to the base URL (works through CORS; Vercel converts it to a cookie).
Create the secret in Vercel project settings under Deployment Protection > Protection Bypass for Automation, store it as VERCEL_AUTOMATION_BYPASS_SECRET, and pass it through envVariables or the shell environment. Never commit it.

​
In CI

A complete GitHub Actions job that waits for the preview, then runs the suite with the bypass header:
.github/workflows/preview-tests.yml
--custom-headers adds the bypass to every request the test makes. If your app sends cross-origin fetches that reject the header, switch to the query-param form from Option B instead.

​
Next.js pitfalls

  • Hydration timing. next dev and React transitions can leave elements visible-but-inert briefly. Assert on the post-hydration state (“the Sign in button is clickable”) rather than adding fixed waits.
  • next/image and visual assertions. Placeholder blur and lazy images make pixel-level checks racy; keep visual assertions on stable regions.
  • Middleware redirects on preview. Auth middleware that redirects (302) to login runs before the bypass cookie is set on the first request: include the bypass params on the initial URL, not only in headers.
  • Preview vs production data. Point NEXT_PUBLIC_* env vars at staging backends for previews so tests exercise realistic data without touching production.
  • VERCEL_AUTOMATION_BYPASS_SECRET in forks. GitHub does not pass secrets to workflows from forks; gate the test job with if: on same-repo PRs or use pull_request_target carefully.