For Next.js apps on Vercel
E2E + Visual Testing
for Next.js Apps.
You ship on Vercel. Lastest ships the tests. App Router, Server Components, and Server Actions break in ways unit tests never catch-hydration mismatches, silent action failures, RSC payload drift. Lastest replays your real flows on every preview deploy and tells you the moment something shifts.
Why Unit Tests Aren't Enough
Your Next.js app passes type-check and still breaks in prod. Here's why.
The App Router moved logic into Server Components and Server Actions. They render on the server, hydrate on the client, and fail silently in between. Two ways to handle it, and only one actually catches the regressions that matter.
Lean on TypeScript and unit tests.
Types pass. Vitest is green. You ship. Then a Server Action throws on a serialization mismatch you couldn't see in the type system, hydration drifts because a date was rendered server-side and re-rendered client-side, and the Vercel preview looks fine until a real user clicks the button.
- Hydration bugs are invisible until something flickers in production
- Server Actions fail silently-the toast never fires, the user just sits there
- No visual layer-the layout shifted and your unit suite has no idea
- Preview deploys ship without ever running through a real browser
Use Lastest. Record once. Replay on every preview.
Point Lastest at your Vercel preview URL, click through signup, dashboard, and Server Action flows once, hit stop. Lastest captures deterministic Playwright code with 7-layer selector fallback, snapshots a visual baseline, and replays the suite on every PR-zero AI calls, zero token cost, full hydration coverage.
- Real browser, real hydration-catches mismatches unit tests can't
- Tests Server Actions end-to-end-click, mutation, redirect, toast
- 3 visual diff engines-Pixelmatch, SSIM, Butteraugli
- Wires into Vercel preview deploys-block merge if a flow breaks
- Self-healing selectors survive App Router refactors
Built for Next.js Workflows
Vercel ships the build. Lastest ships the proof.
Two features that matter most when you're a solo founder shipping a Next.js app on every push.
01 · Record
Click through your App Router flows. That's the test.
Open the recorder, paste your Vercel preview URL, walk through the route you care about: server component, client island, server action, redirect. Hit stop. Lastest generates deterministic Playwright code with 7-layer self-healing selectors that survive your next App Router refactor.
- Works with any Vercel preview, production, or localhost URL
- Captures Server Action mutations and the resulting redirect
- No access to your source required-tests the running app
02 · Visual diff
Did the last RSC change quietly shift the layout?
Server Components re-render on data changes. A new prop, a new wrapper, a Tailwind class change, and your DOM tests pass while the hero section sits a few pixels off. Lastest compares screenshots with three diff engines (Pixelmatch for pixel-perfect, SSIM for layout, Butteraugli for human-eye perceptual) and surfaces visual drift on the Vercel preview before the merge.
- Text-region-aware diffs reduce false positives from dynamic data
- Branch-to-branch compare for Vercel preview PR review
- Approve or reject each change with a one-click slider
Common questions for Next.js apps
- Does Lastest work with the Next.js App Router and React Server Components?
- Yes. Lastest tests the running app, not the source, so server components, server actions, parallel routes, intercepting routes, and streaming SSR all work. The recorder waits for network-idle and DOM stability before each step, which means streaming responses settle before assertions fire.
- How does Lastest catch hydration mismatches?
- Hydration mismatches in Next.js usually appear as a brief flash of one DOM, replaced by a different DOM after the client takes over. Lastest captures the post-hydration screenshot and compares it to the SSR baseline; mismatches surface as visual diffs you can approve or fix.
- Can it test against Vercel preview deploys?
- Yes. Point the GitHub Action (
las-team/lastest/action@main) at the Vercel preview URL on PR open. Three diff engines (Pixelmatch, SSIM, Butteraugli) score the run; the PR fails on a non-trivial diff. Approved baselines replay for $0 forever, with zero AI tokens spent on replay. - How is this different from Playwright Test?
- Playwright Test is excellent, but you still write every script by hand, maintain selectors as Tailwind classes change, and bolt on a separate visual diff layer. Lastest authors Playwright code from a recorded flow with a 7-layer selector fallback (data-testid, id, role, aria-label, text, CSS, OCR) and ships the visual diff in the box. AI runs only when you create or fix a test; the resulting code is plain Playwright, fully editable.
- What about middleware, route handlers, and Edge runtime?
- All transparent to the runner. Lastest exercises whatever URL the running Next.js app serves, including middleware-protected routes, edge handlers, and i18n routing. If middleware redirects, the recording follows the redirect.
- What does it cost?
- Self-hosted is $0 forever (open source, FSL-1.1-ALv2 license) with unlimited screenshots and replays on your own infra. Prefer managed? Lastest Cloud is a flat $299/month, with no per-seat or per-screenshot fees. Either way, replays are zero-token: AI runs only when you create or fix a test.
Add E2E tests
to your Next.js app.
In five minutes.
No cloud account. No API key. No procurement. Point it at your Vercel preview URL and go. Open source, FSL-1.1-ALv2 licensed, $0 forever.
★ Star & Install from GitHub →# 1. clone
$ git clone https://github.com/las-team/lastest
# 2. start
$ cd lastest && docker-compose up -d
# 3. point at your vercel preview URL
$ open http://localhost:3000
✓ ship on vercel. sleep at night.